feat(scaleable): add scaleable props to each component (#531)

* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
2026-04-24 04:15:54 +08:00 · 2021-06-23 10:53:30 +08:00
parent c3708c1948
commit 7facec3849
382 changed files with 15046 additions and 27916 deletions
--- a/components/input/tests/snapshots/index.test.tsx.snap
+++ b/components/input/tests/snapshots/index.test.tsx.snap
--- a/components/input/tests/snapshots/password.test.tsx.snap
+++ b/components/input/tests/snapshots/password.test.tsx.snap
@@ -1,34 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`InputPassword should render correctly 1`] = `
-"<div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"password\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg><style>
+"<div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"password\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><svg viewBox=\\"0 0 24 24\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg><style>
        .input-icon {
-          box-sizing: content-box;
-          display: flex;
-          width: calc(1.687 * 16pt * .42);
+          box-sizing: border-box;
+          display: inline-flex;
+          width: calc(var(--input-height) - 2px);
+          flex-shrink: 0;
          height: 100%;
          align-items: center;
-          vertical-align: middle;
+          justify-content: center;
          margin: 0;
-          padding: 0 calc(1.687 * 16pt * .3);
+          padding: 0;
          line-height: 1;
          position: relative;
          cursor: pointer;
          pointer-events: auto;
        }
+        .input-icon :global(svg) {
+          width: calc(var(--input-height) - 2px);
+          height: calc(var(--input-height) - 2px);
+          transform: scale(0.44);
+        }
      </style></span></div></div><style>
          .with-label {
            display: inline-block;
-            width: initial;
            box-sizing: border-box;
            -webkit-box-align: center;
+            --input-height: calc(2.25 * 16px);
+            font-size: calc(0.875 * 16px);
+            width: initial;
+            height: var(--input-height);
+            padding: 0 0 0 0;
+            margin: 0 0 0 0;
          }

          .input-container {
            display: inline-flex;
            align-items: center;
            width: initial;
-            height: calc(1.687 * 16pt);
+            height: var(--input-height);
          }

          .input-wrapper {
@@ -68,10 +79,10 @@ exports[`InputPassword should render correctly 1`] = `
          }

          input {
-            margin: 4px 10px;
+            margin: 0.25em 0.625em;
            padding: 0;
            box-shadow: none;
-            font-size: .875rem;
+            font-size: calc(0.875 * 16px);
            background-color: transparent;
            border: none;
            color: #000;
--- a/components/input/tests/index.test.tsx
+++ b/components/input/tests/index.test.tsx
@@ -9,18 +9,6 @@ describe('Input', () => {
    expect(() => wrapper.unmount()).not.toThrow()
  })

-  it('should work with different sizes', () => {
-    const wrapper = mount(
-      <div>
-        <Input size="mini" />
-        <Input size="small" />
-        <Input size="large" />
-        <Input width="50%" />
-      </div>,
-    )
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
  it('should work with different status', () => {
    const wrapper = mount(
      <div>
--- a/components/input/index.ts
+++ b/components/input/index.ts
@@ -2,7 +2,11 @@ import Input from './input'
 import Textarea from '../textarea'
 import InputPassword from './password'

-Input.Textarea = Textarea
-Input.Password = InputPassword
+export type InputComponentType = typeof Input & {
+  Textarea: typeof Textarea
+  Password: typeof InputPassword
+}
+;(Input as InputComponentType).Textarea = Textarea
+;(Input as InputComponentType).Password = InputPassword

-export default Input
+export default Input as InputComponentType
--- a/components/input/input-block-label.tsx
+++ b/components/input/input-block-label.tsx
@@ -3,9 +3,9 @@ import useTheme from '../use-theme'

 export interface InputBlockLabelLabel {}

-const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> = ({
-  children,
-}) => {
+const InputBlockLabelComponent: React.FC<
+  React.PropsWithChildren<InputBlockLabelLabel>
+> = ({ children }) => {
  const theme = useTheme()

  return (
@@ -17,8 +17,8 @@ const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> =
          font-weight: normal;
          color: ${theme.palette.accents_6};
          padding: 0 0 0 1px;
-          margin-bottom: ${theme.layout.gapHalf};
-          font-size: 1rem;
+          margin-bottom: 0.5em;
+          font-size: 1em;
          line-height: 1.5;
        }

@@ -34,6 +34,6 @@ const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> =
  )
 }

-const MemoInputBlockLabel = React.memo(InputBlockLabel)
-
-export default MemoInputBlockLabel
+InputBlockLabelComponent.displayName = 'GeistInputBlockLabel'
+const InputBlockLabel = React.memo(InputBlockLabelComponent)
+export default InputBlockLabel
--- a/components/input/input-icon-clear.tsx
+++ b/components/input/input-icon-clear.tsx
@@ -1,18 +1,14 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import useTheme from '../use-theme'

 interface Props {
  visible: boolean
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
-  heightRatio?: string | undefined
  disabled?: boolean
 }

-const InputIconClear: React.FC<Props> = ({ onClick, heightRatio, disabled, visible }) => {
+const InputIconClear: React.FC<Props> = ({ onClick, disabled, visible }) => {
  const theme = useTheme()
-  const width = useMemo(() => {
-    return heightRatio ? `calc(10.66px * ${heightRatio})` : '18px'
-  }, [heightRatio])
  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault()
    event.stopPropagation()
@@ -35,14 +31,17 @@ const InputIconClear: React.FC<Props> = ({ onClick, heightRatio, disabled, visib

      <style jsx>{`
        .clear-icon {
-          padding: 0 ${theme.layout.gapHalf};
-          margin: 0;
-          display: inline-flex;
-          align-items: center;
-          height: 100%;
-          cursor: ${disabled ? 'not-allowed' : 'pointer'};
          box-sizing: border-box;
+          display: inline-flex;
+          width: calc(var(--input-height) - 2px);
+          flex-shrink: 0;
+          height: 100%;
+          align-items: center;
+          justify-content: center;
+          cursor: ${disabled ? 'not-allowed' : 'pointer'};
          transition: color 150ms ease 0s;
+          margin: 0;
+          padding: 0;
          color: ${theme.palette.accents_3};
          visibility: hidden;
          opacity: 0;
@@ -59,8 +58,9 @@ const InputIconClear: React.FC<Props> = ({ onClick, heightRatio, disabled, visib

        svg {
          color: currentColor;
-          width: ${width};
-          height: ${width};
+          width: calc(var(--input-height) - 2px);
+          height: calc(var(--input-height) - 2px);
+          transform: scale(0.44);
        }
      `}</style>
    </div>
--- a/components/input/input-icon.tsx
+++ b/components/input/input-icon.tsx
@@ -1,45 +1,41 @@
-import React, { useMemo } from 'react'
-import useTheme from '../use-theme'
+import React from 'react'

 export interface InputIconProps {
  icon: React.ReactNode
-  ratio: string
  clickable: boolean
  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
 }

-const InputIcon: React.FC<InputIconProps> = ({ icon, ratio, clickable, onClick }) => {
-  const theme = useTheme()
-  const width = useMemo(() => {
-    return `calc(${ratio} * ${theme.layout.gap} * .42)`
-  }, [theme.layout.gap, ratio])
-  const padding = useMemo(() => {
-    return `calc(${ratio} * ${theme.layout.gap} * .3)`
-  }, [theme.layout.gap, ratio])
-
+const InputIconComponent: React.FC<InputIconProps> = ({ icon, clickable, onClick }) => {
  return (
    <span className="input-icon" onClick={onClick}>
      {icon}
      <style jsx>{`
        .input-icon {
-          box-sizing: content-box;
-          display: flex;
-          width: ${width};
+          box-sizing: border-box;
+          display: inline-flex;
+          width: calc(var(--input-height) - 2px);
+          flex-shrink: 0;
          height: 100%;
          align-items: center;
-          vertical-align: middle;
+          justify-content: center;
          margin: 0;
-          padding: 0 ${padding};
+          padding: 0;
          line-height: 1;
          position: relative;
          cursor: ${clickable ? 'pointer' : 'default'};
          pointer-events: ${clickable ? 'auto' : 'none'};
        }
+        .input-icon :global(svg) {
+          width: calc(var(--input-height) - 2px);
+          height: calc(var(--input-height) - 2px);
+          transform: scale(0.44);
+        }
      `}</style>
    </span>
  )
 }

-const MemoInputIcon = React.memo(InputIcon)
-
-export default MemoInputIcon
+InputIconComponent.displayName = 'GeistInputIcon'
+const InputIcon = React.memo(InputIconComponent)
+export default InputIcon
--- a/components/input/input-label.tsx
+++ b/components/input/input-label.tsx
@@ -3,13 +3,11 @@ import useTheme from '../use-theme'

 export interface InputLabel {
  isRight?: boolean
-  fontSize: string
 }

 const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = ({
  children,
  isRight,
-  fontSize,
 }) => {
  const theme = useTheme()

@@ -32,7 +30,7 @@ const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = ({
          border-top: 1px solid ${theme.palette.border};
          border-left: 1px solid ${theme.palette.border};
          border-bottom: 1px solid ${theme.palette.border};
-          font-size: ${fontSize};
+          font-size: inherit;
          line-height: 1;
        }

--- a/components/input/input-props.ts
+++ b/components/input/input-props.ts
@@ -1,11 +1,10 @@
 import React from 'react'
-import { NormalSizes, NormalTypes } from '../utils/prop-types'
+import { NormalTypes } from '../utils/prop-types'

 export interface Props {
  value?: string
  initialValue?: string
  placeholder?: string
-  size?: NormalSizes
  type?: NormalTypes
  hymlType?: string
  readOnly?: boolean
@@ -15,7 +14,6 @@ export interface Props {
  icon?: React.ReactNode
  iconRight?: React.ReactNode
  iconClickable?: boolean
-  width?: string
  className?: string
  clearable?: boolean
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
@@ -23,7 +21,7 @@ export interface Props {
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
  onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-  autoComplete: string
+  autoComplete?: string
 }

 export const defaultProps = {
@@ -31,8 +29,6 @@ export const defaultProps = {
  readOnly: false,
  clearable: false,
  iconClickable: false,
-  width: 'initial',
-  size: 'medium' as NormalSizes,
  type: 'default' as NormalTypes,
  htmlType: 'text',
  autoComplete: 'off',
--- a/components/input/input.tsx
+++ b/components/input/input.tsx
@@ -1,24 +1,15 @@
-import React, {
-  PropsWithoutRef,
-  RefAttributes,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import useTheme from '../use-theme'
 import InputLabel from './input-label'
 import InputBlockLabel from './input-block-label'
 import InputIcon from './input-icon'
 import InputClearIcon from './input-icon-clear'
-import Textarea from '../textarea/textarea'
-import InputPassword from './password'
-import { getSizes, getColors } from './styles'
+import { getColors } from './styles'
 import { Props, defaultProps } from './input-props'
+import useScaleable, { withScaleable } from '../use-scaleable'

 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
-export type InputProps = Props & typeof defaultProps & NativeAttrs
+export type InputProps = Props & NativeAttrs

 const simulateChangeEvent = (
  el: HTMLInputElement,
@@ -31,12 +22,14 @@ const simulateChangeEvent = (
  }
 }

-const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputProps>>(
+const InputComponent = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<InputProps>
+>(
  (
    {
      label,
      labelRight,
-      size,
      type,
      htmlType,
      icon,
@@ -49,7 +42,6 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
      value,
      onClearClick,
      clearable,
-      width,
      className,
      onBlur,
      onFocus,
@@ -58,16 +50,16 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
      children,
      disabled,
      ...props
-    },
+    }: React.PropsWithChildren<InputProps> & typeof defaultProps,
    ref: React.Ref<HTMLInputElement | null>,
  ) => {
    const theme = useTheme()
+    const { SCALES } = useScaleable()
    const inputRef = useRef<HTMLInputElement>(null)
    useImperativeHandle(ref, () => inputRef.current)

    const [selfValue, setSelfValue] = useState<string>(initialValue)
    const [hover, setHover] = useState<boolean>(false)
-    const { heightRatio, fontSize } = useMemo(() => getSizes(size), [size])
    const isControlledComponent = useMemo(() => value !== undefined, [value])
    const labelClasses = useMemo(
      () => (labelRight ? 'right-label' : label ? 'left-label' : ''),
@@ -114,11 +106,10 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
    }
    const iconProps = useMemo(
      () => ({
-        ratio: heightRatio,
        clickable: iconClickable,
        onClick: iconClickHandler,
      }),
-      [heightRatio, iconClickable, iconClickHandler],
+      [iconClickable, iconClickHandler],
    )

    useEffect(() => {
@@ -139,7 +130,7 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
      <div className="with-label">
        {children && <InputBlockLabel>{children}</InputBlockLabel>}
        <div className={`input-container ${className}`}>
-          {label && <InputLabel fontSize={fontSize}>{label}</InputLabel>}
+          {label && <InputLabel>{label}</InputLabel>}
          <div
            className={`input-wrapper ${hover ? 'hover' : ''} ${
              disabled ? 'disabled' : ''
@@ -161,32 +152,32 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
            {clearable && (
              <InputClearIcon
                visible={Boolean(inputRef.current && inputRef.current.value !== '')}
-                heightRatio={heightRatio}
                disabled={disabled || readOnly}
                onClick={clearHandler}
              />
            )}
            {iconRight && <InputIcon icon={iconRight} {...iconProps} />}
          </div>
-          {labelRight && (
-            <InputLabel fontSize={fontSize} isRight={true}>
-              {labelRight}
-            </InputLabel>
-          )}
+          {labelRight && <InputLabel isRight={true}>{labelRight}</InputLabel>}
        </div>
        <style jsx>{`
          .with-label {
            display: inline-block;
-            width: ${width};
            box-sizing: border-box;
            -webkit-box-align: center;
+            --input-height: ${SCALES.height(2.25)};
+            font-size: ${SCALES.font(0.875)};
+            width: ${SCALES.width(1, 'initial')};
+            height: var(--input-height);
+            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};
+            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
          }

          .input-container {
            display: inline-flex;
            align-items: center;
-            width: ${width};
-            height: calc(${heightRatio} * ${theme.layout.gap});
+            width: ${SCALES.width(1, 'initial')};
+            height: var(--input-height);
          }

          .input-wrapper {
@@ -226,10 +217,10 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
          }

          input {
-            margin: 4px 10px;
+            margin: 0.25em 0.625em;
            padding: 0;
            box-shadow: none;
-            font-size: ${fontSize};
+            font-size: ${SCALES.font(0.875)};
            background-color: transparent;
            border: none;
            color: ${color};
@@ -272,16 +263,7 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
  },
 )

-type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<
-  PropsWithoutRef<P> & RefAttributes<T>
-> & {
-  Textarea: typeof Textarea
-  Password: typeof InputPassword
-}
-type ComponentProps = Partial<typeof defaultProps> &
-  Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs
-
-Input.defaultProps = defaultProps
-
-export default Input as InputComponent<HTMLInputElement, ComponentProps>
+InputComponent.defaultProps = defaultProps
+InputComponent.displayName = 'GeistInput'
+const Input = withScaleable(InputComponent)
+export default Input
--- a/components/input/password-icon.tsx
+++ b/components/input/password-icon.tsx
@@ -8,8 +8,6 @@ const PasswordIcon: React.FC<Props> = ({ visible }) => {
  return (
    <svg
      viewBox="0 0 24 24"
-      width="16"
-      height="16"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
--- a/components/input/password.tsx
+++ b/components/input/password.tsx
@@ -1,5 +1,4 @@
 import React, { useImperativeHandle, useMemo, useRef, useState } from 'react'
-import withDefaults from '../utils/with-defaults'
 import { Props, defaultProps } from './input-props'
 import PasswordIcon from './password-icon'
 import Input from './input'
@@ -14,44 +13,55 @@ const passwordDefaultProps = {
 }

 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>
-export type InputPasswordProps = PasswordProps & typeof passwordDefaultProps & NativeAttrs
+export type InputPasswordProps = PasswordProps & NativeAttrs

 const InputPassword = React.forwardRef<
  HTMLInputElement,
  React.PropsWithChildren<InputPasswordProps>
->(({ hideToggle, children, ...props }, ref: React.Ref<HTMLInputElement | null>) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [visible, setVisible] = useState<boolean>(false)
-  useImperativeHandle(ref, () => inputRef.current)
+>(
+  (
+    {
+      hideToggle,
+      children,
+      ...props
+    }: React.PropsWithChildren<InputPasswordProps> & typeof defaultProps,
+    ref: React.Ref<HTMLInputElement | null>,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [visible, setVisible] = useState<boolean>(false)
+    useImperativeHandle(ref, () => inputRef.current)

-  const iconClickHandler = () => {
-    setVisible(v => !v)
-    /* istanbul ignore next */
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus()
+    const iconClickHandler = () => {
+      setVisible(v => !v)
+      /* istanbul ignore next */
+      if (inputRef && inputRef.current) {
+        inputRef.current.focus()
+      }
    }
-  }

-  const inputProps = useMemo(
-    () => ({
-      ...props,
-      ref: inputRef,
-      iconClickable: true,
-      onIconClick: iconClickHandler,
-      htmlType: visible ? 'text' : 'password',
-    }),
-    [props, iconClickHandler, visible, inputRef],
-  )
-  const icon = useMemo(() => {
-    if (hideToggle) return null
-    return <PasswordIcon visible={visible} />
-  }, [hideToggle, visible])
+    const inputProps = useMemo(
+      () => ({
+        ...props,
+        ref: inputRef,
+        iconClickable: true,
+        onIconClick: iconClickHandler,
+        htmlType: visible ? 'text' : 'password',
+      }),
+      [props, iconClickHandler, visible, inputRef],
+    )
+    const icon = useMemo(() => {
+      if (hideToggle) return null
+      return <PasswordIcon visible={visible} />
+    }, [hideToggle, visible])

-  return (
-    <Input iconRight={icon} {...inputProps}>
-      {children}
-    </Input>
-  )
-})
+    return (
+      <Input iconRight={icon} {...inputProps}>
+        {children}
+      </Input>
+    )
+  },
+)

-export default withDefaults(InputPassword, passwordDefaultProps)
+InputPassword.defaultProps = passwordDefaultProps
+InputPassword.displayName = 'GeistInputPassword'
+export default InputPassword
--- a/components/input/styles.ts
+++ b/components/input/styles.ts
@@ -1,34 +1,6 @@
-import { NormalSizes, NormalTypes } from '../utils/prop-types'
+import { NormalTypes } from '../utils/prop-types'
 import { GeistUIThemesPalette } from '../themes/presets'

-export type InputSize = {
-  heightRatio: string
-  fontSize: string
-}
-
-export const getSizes = (size?: NormalSizes) => {
-  const sizes: { [key in NormalSizes]: InputSize } = {
-    mini: {
-      heightRatio: '1.313',
-      fontSize: '.75rem',
-    },
-    small: {
-      heightRatio: '1.5',
-      fontSize: '.75rem',
-    },
-    medium: {
-      heightRatio: '1.687',
-      fontSize: '.875rem',
-    },
-    large: {
-      heightRatio: '1.875',
-      fontSize: '1rem',
-    },
-  }
-  if (!size) return sizes.medium
-  return sizes[size]
-}
-
 export type InputColor = {
  color: string
  borderColor: string