feat: add status prop in checkbox, radio, select, slider and toggle (#…

…530) * feat: added status prop to set color by states test: check status success, warning and error * docs: added playground example and API reference fix: replaced ´_´ as it's not recommended to use fix: removed redundant return refactor: renamed prop from status to type test: update test with the renamed prop * docs: update prop references from status to type fix: status prop not updated to type fix: missing return * fix(select): set icons and hover state to follow the theme * test(slider): update snapshots * chore: always use relative paths when import types Co-authored-by: unix <unix.bio@gmail.com>
geist-org · Aug 13, 2021 · 5bbce55 · 5bbce55
1 parent f6e39cf
commit 5bbce55
Show file tree

Hide file tree

Showing 50 changed files with 1,881 additions and 145 deletions.
diff --git a/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,5 +10,6 @@ exports[`AutoComplete should render correctly 1`] = `
   initialValue=""
   options={Array []}
   size="medium"
+  type="default"
 />
 `;
diff --git a/components/auto-complete/__tests__/index.test.tsx b/components/auto-complete/__tests__/index.test.tsx
@@ -14,8 +14,8 @@ describe('AutoComplete', () => {
   it('should support sizes and status', () => {
     const wrapper = mount(
       <div>
-        <AutoComplete status="secondary" />
-        <AutoComplete status="success" />
+        <AutoComplete type="secondary" />
+        <AutoComplete type="success" />
         <AutoComplete size="mini" />
         <AutoComplete size="large" />
       </div>,

diff --git a/components/auto-complete/auto-complete.tsx b/components/auto-complete/auto-complete.tsx
@@ -31,7 +31,7 @@ export type AutoCompleteOptions = Array<
 interface Props {
   options: AutoCompleteOptions
   size?: NormalSizes
-  status?: NormalTypes
+  type?: NormalTypes
   initialValue?: string
   value?: string
   width?: string
@@ -53,6 +53,7 @@ const defaultProps = {
   disabled: false,
   clearable: false,
   size: 'medium' as NormalSizes,
+  type: 'default' as NormalTypes,
   disableMatchWidth: false,
   disableFreeSolo: false,
   className: '',
@@ -94,7 +95,7 @@ const AutoComplete = React.forwardRef<
       searching,
       children,
       size,
-      status,
+      type,
       value,
       width,
       clearable,
@@ -209,7 +210,7 @@ const AutoComplete = React.forwardRef<
           <Input
             ref={inputRef}
             size={size}
-            status={status}
+            type={type}
             onChange={onInputChange}
             onFocus={() => toggleFocusHandler(true)}
             onBlur={() => toggleFocusHandler(false)}

diff --git a/components/badge/badge.tsx b/components/badge/badge.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import useTheme from '../use-theme'
 import { NormalSizes, NormalTypes } from '../utils/prop-types'
-import { GeistUIThemesPalette } from 'components/themes/presets'
+import { GeistUIThemesPalette } from '../themes/presets'
 import BadgeAnchor from './badge-anchor'
 
 interface Props {

diff --git a/components/button-group/button-group.tsx b/components/button-group/button-group.tsx
@@ -3,7 +3,7 @@ import useTheme from '../use-theme'
 import withDefaults from '../utils/with-defaults'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
 import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'
-import { GeistUIThemesPalette } from 'components/themes/presets'
+import { GeistUIThemesPalette } from '../themes/presets'
 
 interface Props {
   disabled?: boolean

diff --git a/components/button/utils.tsx b/components/button/utils.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react'
 import { NormalSizes } from '../utils/prop-types'
 import ButtonIcon from './button-icon'
-import { ButtonProps } from 'components/button/button'
-import { ButtonGroupConfig } from 'components/button-group/button-group-context'
+import { ButtonProps } from './button'
+import { ButtonGroupConfig } from '../button-group/button-group-context'
 
 export const getButtonChildrenWithIcon = (
   auto: boolean,

diff --git a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -1041,3 +1041,171 @@ exports[`Checkbox should work correctly with different sizes 1`] = `
         }
       </style></label></div>"
 `;
+
+exports[`Checkbox should work with different status 1`] = `
+"<div><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\"></span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\"></span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\"></span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
+        svg {
+          display: inline-flex;
+          width: calc(0.86 * var(--checkbox-size));
+          height: calc(0.86 * var(--checkbox-size));
+          user-select: none;
+          opacity: 1;
+          cursor: pointer;
+        }
+      </style><input type=\\"checkbox\\"><span class=\\"text\\"></span><style>
+        label {
+          --checkbox-size: .875rem;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          width: auto;
+          cursor: pointer;
+          opacity: 1;
+          height: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+        }
+
+        .text {
+          font-size: var(--checkbox-size);
+          line-height: var(--checkbox-size);
+          padding-left: calc(var(--checkbox-size) * 0.57);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        input {
+          opacity: 0;
+          outline: none;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin: 0;
+          padding: 0;
+          z-index: -1;
+          background-color: transparent;
+        }
+      </style></label></div>"
+`;
diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx
@@ -23,6 +23,18 @@ describe('Checkbox', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work with different status', () => {
+    const wrapper = mount(
+      <div>
+        <Checkbox type="secondary" />
+        <Checkbox type="success" />
+        <Checkbox type="warning" />
+        <Checkbox type="error" />
+      </div>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   it('should work correctly with initial value', () => {
     let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
     let input = wrapper.find('input').getDOMNode()

diff --git a/components/checkbox/checkbox.icon.tsx b/components/checkbox/checkbox.icon.tsx
@@ -4,16 +4,17 @@ import useTheme from '../use-theme'
 interface Props {
   disabled?: boolean
   checked?: boolean
+  fill?: string
+  bg?: string
 }
 
-const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
+const CheckboxIcon: React.FC<Props> = ({ fill, bg, disabled, checked }) => {
   const theme = useTheme()
 
-  const { fill, bg, stroke } = useMemo(() => {
+  const { propsFill, propsBg } = useMemo(() => {
     return {
-      fill: theme.palette.foreground,
-      bg: theme.palette.background,
-      stroke: theme.palette.accents_5,
+      propsFill: fill,
+      propsBg: bg,
     }
   }, [theme.palette])
 
@@ -23,15 +24,15 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
         <svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z"
-            fill={fill}
+            fill={propsFill}
           />
-          <path d="M16 3L7.72491 11L5 8" stroke={bg} strokeWidth="1.5" />
+          <path d="M16 3L7.72491 11L5 8" stroke={propsBg} strokeWidth="1.5" />
         </svg>
       ) : (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
           <path
             d="M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z"
-            stroke={stroke}
+            stroke={theme.palette.accents_5}
           />
         </svg>
       )}

diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx
@@ -3,7 +3,9 @@ import { useCheckbox } from './checkbox-context'
 import CheckboxGroup, { getCheckboxSize } from './checkbox-group'
 import CheckboxIcon from './checkbox.icon'
 import useWarning from '../utils/use-warning'
-import { NormalSizes } from '../utils/prop-types'
+import { NormalSizes, NormalTypes } from '../utils/prop-types'
+import { getColors } from './styles'
+import useTheme from '../use-theme'
 
 interface CheckboxEventTarget {
   checked: boolean
@@ -19,6 +21,7 @@ export interface CheckboxEvent {
 interface Props {
   checked?: boolean
   disabled?: boolean
+  type?: NormalTypes
   initialChecked?: boolean
   onChange?: (e: CheckboxEvent) => void
   size?: NormalSizes
@@ -28,6 +31,7 @@ interface Props {
 
 const defaultProps = {
   disabled: false,
+  type: 'default' as NormalTypes,
   initialChecked: false,
   size: 'small' as NormalSizes,
   className: '',
@@ -45,9 +49,11 @@ const Checkbox: React.FC<CheckboxProps> = ({
   className,
   children,
   size,
+  type,
   value,
   ...props
 }) => {
+  const theme = useTheme()
   const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)
   const { updateState, inGroup, disabledAll, values } = useCheckbox()
   const isDisabled = inGroup ? disabledAll || disabled : disabled
@@ -67,6 +73,12 @@ const Checkbox: React.FC<CheckboxProps> = ({
   }
 
   const fontSize = useMemo(() => getCheckboxSize(size), [size])
+
+  const { fill, bg } = useMemo(() => getColors(theme.palette, type), [
+    theme.palette,
+    type,
+  ])
+
   const changeHandle = useCallback(
     (ev: React.ChangeEvent) => {
       if (isDisabled) return
@@ -95,7 +107,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
 
   return (
     <label className={`${className}`}>
-      <CheckboxIcon disabled={isDisabled} checked={selfChecked} />
+      <CheckboxIcon fill={fill} bg={bg} disabled={isDisabled} checked={selfChecked} />
       <input
         type="checkbox"
         disabled={isDisabled}