From 9162f526dc5a461d52212f501148cb0c51962052 Mon Sep 17 00:00:00 2001 From: gepd Date: Sat, 1 May 2021 04:02:30 -0400 Subject: [PATCH 1/6] feat: added status prop to set color by states test: check status success, warning and error --- .../__snapshots__/index.test.tsx.snap | 168 ++++++++ components/checkbox/__tests__/index.test.tsx | 12 + components/checkbox/checkbox.icon.tsx | 17 +- components/checkbox/checkbox.tsx | 16 +- components/checkbox/styles.ts | 38 ++ .../__snapshots__/index.test.tsx.snap | 260 +++++++++++++ components/radio/__tests__/index.test.tsx | 12 + components/radio/radio.tsx | 20 +- components/radio/styles.ts | 44 +++ .../__snapshots__/index.test.tsx.snap | 360 ++++++++++++++++++ components/select/__tests__/index.test.tsx | 12 + components/select/select.tsx | 16 +- components/select/styles.ts | 40 +- .../__snapshots__/index.test.tsx.snap | 184 +++++++++ components/slider/__tests__/index.test.tsx | 12 + components/slider/slider.tsx | 11 +- components/slider/styles.ts | 32 ++ .../__snapshots__/index.test.tsx.snap | 292 ++++++++++++++ components/toggle/__tests__/index.test.tsx | 12 + components/toggle/styles.ts | 32 ++ components/toggle/toggle.tsx | 10 +- 21 files changed, 1573 insertions(+), 27 deletions(-) create mode 100644 components/checkbox/styles.ts create mode 100644 components/radio/styles.ts create mode 100644 components/slider/styles.ts create mode 100644 components/toggle/styles.ts diff --git a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap index b3ce5234e..5a98d1336 100644 --- 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`] = ` } " `; + +exports[`Checkbox should work with different status 1`] = ` +"
" +`; diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx index acd1f710b..0b7fecd00 100644 --- 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( +
+ + + + +
, + ) + expect(wrapper.html()).toMatchSnapshot() + }) + it('should work correctly with initial value', () => { let wrapper = mount(Sydney) let input = wrapper.find('input').getDOMNode() diff --git a/components/checkbox/checkbox.icon.tsx b/components/checkbox/checkbox.icon.tsx index 0ba4e1554..36af84732 100644 --- 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 = ({ disabled, checked }) => { +const CheckboxIcon: React.FC = ({ fill, bg, disabled, checked }) => { const theme = useTheme() - const { fill, bg, stroke } = useMemo(() => { + const { _fill, _bg } = useMemo(() => { return { - fill: theme.palette.foreground, - bg: theme.palette.background, - stroke: theme.palette.accents_5, + _fill: fill, + _bg: bg, } }, [theme.palette]) @@ -23,15 +24,15 @@ const CheckboxIcon: React.FC = ({ disabled, checked }) => { - + ) : ( )} diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index 1deb70003..81c62a6f3 100644 --- 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 + status?: NormalTypes initialChecked?: boolean onChange?: (e: CheckboxEvent) => void size?: NormalSizes @@ -28,6 +31,7 @@ interface Props { const defaultProps = { disabled: false, + status: 'default' as NormalTypes, initialChecked: false, size: 'small' as NormalSizes, className: '', @@ -45,9 +49,11 @@ const Checkbox: React.FC = ({ className, children, size, + status, value, ...props }) => { + const theme = useTheme() const [selfChecked, setSelfChecked] = useState(initialChecked) const { updateState, inGroup, disabledAll, values } = useCheckbox() const isDisabled = inGroup ? disabledAll || disabled : disabled @@ -67,6 +73,12 @@ const Checkbox: React.FC = ({ } const fontSize = useMemo(() => getCheckboxSize(size), [size]) + + const { fill, bg } = useMemo(() => getColors(theme.palette, status), [ + theme.palette, + status, + ]) + const changeHandle = useCallback( (ev: React.ChangeEvent) => { if (isDisabled) return @@ -95,7 +107,7 @@ const Checkbox: React.FC = ({ return ( " +`; diff --git a/components/toggle/__tests__/index.test.tsx b/components/toggle/__tests__/index.test.tsx index 5dfffc593..f856a310f 100644 --- a/components/toggle/__tests__/index.test.tsx +++ b/components/toggle/__tests__/index.test.tsx @@ -31,6 +31,18 @@ describe('Toggle', () => { expect(() => wrapper.unmount()).not.toThrow() }) + it('should work with different status', () => { + const wrapper = mount( +
+ + + + +
, + ) + expect(wrapper.html()).toMatchSnapshot() + }) + it('should set toggle follow checked prop', async () => { const wrapper = mount() expectToggleIsChecked(wrapper) diff --git a/components/toggle/styles.ts b/components/toggle/styles.ts new file mode 100644 index 000000000..f17bec30f --- /dev/null +++ b/components/toggle/styles.ts @@ -0,0 +1,32 @@ +import { GeistUIThemesPalette } from 'components/themes/presets' +import { NormalTypes } from 'components/utils/prop-types' + +export type SelectColor = { + bg: string +} + +export const getColors = ( + palette: GeistUIThemesPalette, + status?: NormalTypes, +): SelectColor => { + const colors: { [key in NormalTypes]: SelectColor } = { + default: { + bg: palette.success, + }, + secondary: { + bg: palette.secondary, + }, + success: { + bg: palette.success, + }, + warning: { + bg: palette.warning, + }, + error: { + bg: palette.error, + }, + } + + if (!status) return colors.default + return colors[status] +} diff --git a/components/toggle/toggle.tsx b/components/toggle/toggle.tsx index 82336b380..87e6274ee 100644 --- a/components/toggle/toggle.tsx +++ b/components/toggle/toggle.tsx @@ -1,7 +1,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react' import withDefaults from '../utils/with-defaults' import useTheme from '../use-theme' -import { NormalSizes } from '../utils/prop-types' +import { NormalSizes, NormalTypes } from '../utils/prop-types' +import { getColors } from './styles' interface ToggleEventTarget { checked: boolean @@ -20,11 +21,13 @@ interface Props { onChange?: (ev: ToggleEvent) => void disabled?: boolean size?: NormalSizes + status?: NormalTypes className?: string } const defaultProps = { size: 'medium' as NormalSizes, + status: 'default' as NormalTypes, disabled: false, initialChecked: false, className: '', @@ -66,6 +69,7 @@ const Toggle: React.FC = ({ disabled, onChange, size, + status, className, ...props }) => { @@ -91,6 +95,8 @@ const Toggle: React.FC = ({ [disabled, selfChecked, onChange], ) + const { bg } = useMemo(() => getColors(theme.palette, status), [theme.palette, status]) + useEffect(() => { if (checked === undefined) return setSelfChecked(checked) @@ -175,7 +181,7 @@ const Toggle: React.FC = ({ } .checked { - background-color: ${theme.palette.success}; + background-color: ${bg}; } .checked > .inner { From 856dd37075d672a19d3ab8173139eae8f98a0d42 Mon Sep 17 00:00:00 2001 From: gepd Date: Sat, 1 May 2021 04:05:38 -0400 Subject: [PATCH 2/6] docs: added playground example and API reference MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../__snapshots__/index.test.tsx.snap | 1 + .../auto-complete/__tests__/index.test.tsx | 4 +- components/auto-complete/auto-complete.tsx | 7 +-- components/checkbox/__tests__/index.test.tsx | 8 ++-- components/checkbox/checkbox.icon.tsx | 10 ++-- components/checkbox/checkbox.tsx | 10 ++-- components/input/__tests__/index.test.tsx | 6 +-- components/input/input-props.ts | 6 ++- components/input/input.tsx | 9 ++-- components/input/password.tsx | 2 +- components/radio/__tests__/index.test.tsx | 8 ++-- components/radio/radio.tsx | 10 ++-- components/select/__tests__/index.test.tsx | 8 ++-- components/select/select.tsx | 10 ++-- components/slider/__tests__/index.test.tsx | 8 ++-- components/slider/slider.tsx | 8 ++-- components/textarea/__tests__/index.test.tsx | 2 +- components/textarea/textarea.tsx | 10 ++-- components/toggle/__tests__/index.test.tsx | 8 ++-- components/toggle/toggle.tsx | 8 ++-- pages/en-us/components/checkbox.mdx | 43 +++++++++++++---- pages/en-us/components/radio.mdx | 43 +++++++++++++---- pages/en-us/components/select.mdx | 38 +++++++++++++++ pages/en-us/components/slider.mdx | 46 ++++++++++++++----- pages/en-us/components/toggle.mdx | 42 +++++++++++++---- 25 files changed, 249 insertions(+), 106 deletions(-) diff --git a/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap index b07b91691..690baa48e 100644 --- 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 index 1b20654e8..fcd376aaf 100644 --- 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(
- - + +
, diff --git a/components/auto-complete/auto-complete.tsx b/components/auto-complete/auto-complete.tsx index e3bf55713..93d6e3486 100644 --- 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< toggleFocusHandler(true)} onBlur={() => toggleFocusHandler(false)} diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx index 0b7fecd00..3916d2c6e 100644 --- a/components/checkbox/__tests__/index.test.tsx +++ b/components/checkbox/__tests__/index.test.tsx @@ -26,10 +26,10 @@ describe('Checkbox', () => { it('should work with different status', () => { const wrapper = mount(
- - - - + + + +
, ) expect(wrapper.html()).toMatchSnapshot() diff --git a/components/checkbox/checkbox.icon.tsx b/components/checkbox/checkbox.icon.tsx index 36af84732..979eb8d76 100644 --- a/components/checkbox/checkbox.icon.tsx +++ b/components/checkbox/checkbox.icon.tsx @@ -11,10 +11,10 @@ interface Props { const CheckboxIcon: React.FC = ({ fill, bg, disabled, checked }) => { const theme = useTheme() - const { _fill, _bg } = useMemo(() => { + const { propsFill, propsBg } = useMemo(() => { return { - _fill: fill, - _bg: bg, + propsFill: fill, + propsBg: bg, } }, [theme.palette]) @@ -24,9 +24,9 @@ const CheckboxIcon: React.FC = ({ fill, bg, disabled, checked }) => { - + ) : ( diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index 81c62a6f3..6d173c56b 100644 --- a/components/checkbox/checkbox.tsx +++ b/components/checkbox/checkbox.tsx @@ -21,7 +21,7 @@ export interface CheckboxEvent { interface Props { checked?: boolean disabled?: boolean - status?: NormalTypes + type?: NormalTypes initialChecked?: boolean onChange?: (e: CheckboxEvent) => void size?: NormalSizes @@ -31,7 +31,7 @@ interface Props { const defaultProps = { disabled: false, - status: 'default' as NormalTypes, + type: 'default' as NormalTypes, initialChecked: false, size: 'small' as NormalSizes, className: '', @@ -49,7 +49,7 @@ const Checkbox: React.FC = ({ className, children, size, - status, + type, value, ...props }) => { @@ -74,9 +74,9 @@ const Checkbox: React.FC = ({ const fontSize = useMemo(() => getCheckboxSize(size), [size]) - const { fill, bg } = useMemo(() => getColors(theme.palette, status), [ + const { fill, bg } = useMemo(() => getColors(theme.palette, type), [ theme.palette, - status, + type, ]) const changeHandle = useCallback( diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx index 9d450a7b8..4a37168ef 100644 --- a/components/input/__tests__/index.test.tsx +++ b/components/input/__tests__/index.test.tsx @@ -24,9 +24,9 @@ describe('Input', () => { it('should work with different status', () => { const wrapper = mount(
- - - + + +
, ) expect(wrapper.html()).toMatchSnapshot() diff --git a/components/input/input-props.ts b/components/input/input-props.ts index 0af90bf79..92f0a9fb5 100644 --- a/components/input/input-props.ts +++ b/components/input/input-props.ts @@ -6,7 +6,8 @@ export interface Props { initialValue?: string placeholder?: string size?: NormalSizes - status?: NormalTypes + type?: NormalTypes + hymlType?: string readOnly?: boolean disabled?: boolean label?: string @@ -32,7 +33,8 @@ export const defaultProps = { iconClickable: false, width: 'initial', size: 'medium' as NormalSizes, - status: 'default' as NormalTypes, + type: 'default' as NormalTypes, + htmlType: 'text', autoComplete: 'off', className: '', placeholder: '', diff --git a/components/input/input.tsx b/components/input/input.tsx index 32a62f58b..ba5284754 100644 --- a/components/input/input.tsx +++ b/components/input/input.tsx @@ -37,7 +37,8 @@ const Input = React.forwardRef getColors(theme.palette, status), - [theme.palette, status], + () => getColors(theme.palette, type), + [theme.palette, type], ) const changeHandler = (event: React.ChangeEvent) => { @@ -145,7 +146,7 @@ const Input = React.forwardRef {icon && } { it('should work with different status', () => { const wrapper = mount(
- - - - + + + +
, ) expect(wrapper.html()).toMatchSnapshot() diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 32ddd67ba..fc863f03c 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -23,7 +23,7 @@ interface Props { checked?: boolean value?: string | number size?: NormalSizes - status?: NormalTypes + type?: NormalTypes className?: string disabled?: boolean onChange?: (e: RadioEvent) => void @@ -31,7 +31,7 @@ interface Props { const defaultProps = { size: 'medium' as NormalSizes, - status: 'default' as NormalTypes, + type: 'default' as NormalTypes, disabled: false, className: '', } @@ -45,7 +45,7 @@ const Radio: React.FC> = ({ onChange, disabled, size, - status, + type, value: radioValue, children, ...props @@ -69,9 +69,9 @@ const Radio: React.FC> = ({ const fontSize = useMemo(() => getRadioSize(size), [size]) - const { label, border, bg } = useMemo(() => getColors(theme.palette, status), [ + const { label, border, bg } = useMemo(() => getColors(theme.palette, type), [ theme.palette, - status, + type, ]) const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll]) diff --git a/components/select/__tests__/index.test.tsx b/components/select/__tests__/index.test.tsx index 1f1c87ee3..40a0cf815 100644 --- a/components/select/__tests__/index.test.tsx +++ b/components/select/__tests__/index.test.tsx @@ -20,10 +20,10 @@ describe('Select', () => { it('should work with different status', () => { const wrapper = mount(
- - + +
, ) expect(wrapper.html()).toMatchSnapshot() diff --git a/components/select/select.tsx b/components/select/select.tsx index c4c11ff19..69642fc44 100644 --- a/components/select/select.tsx +++ b/components/select/select.tsx @@ -16,7 +16,7 @@ import Ellipsis from '../shared/ellipsis' interface Props { disabled?: boolean size?: NormalSizes - status?: NormalTypes + type?: NormalTypes value?: string | string[] initialValue?: string | string[] placeholder?: React.ReactNode | string @@ -36,7 +36,7 @@ interface Props { const defaultProps = { disabled: false, size: 'medium' as NormalSizes, - status: 'default' as NormalTypes, + type: 'default' as NormalTypes, icon: SelectIcon as React.ComponentType, pure: false, multiple: false, @@ -52,7 +52,7 @@ export type SelectProps = Props & typeof defaultProps & NativeAttrs const Select: React.FC> = ({ children, size, - status, + type, disabled, initialValue: init, value: customValue, @@ -86,9 +86,9 @@ const Select: React.FC> = ({ }, [value]) const sizes = useMemo(() => getSizes(theme, size), [theme, size]) - const { border, placeholderColor } = useMemo(() => getColors(theme.palette, status), [ + const { border, placeholderColor } = useMemo(() => getColors(theme.palette, type), [ theme.palette, - status, + type, ]) const updateVisible = (next: boolean) => setVisible(next) diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx index df8eb1e85..ac63f4643 100644 --- a/components/slider/__tests__/index.test.tsx +++ b/components/slider/__tests__/index.test.tsx @@ -72,10 +72,10 @@ describe('Slider', () => { it('should work with different status', () => { const wrapper = mount(
- - - - + + + +
, ) expect(wrapper.html()).toMatchSnapshot() diff --git a/components/slider/slider.tsx b/components/slider/slider.tsx index a64199931..0d9ee7ffd 100644 --- a/components/slider/slider.tsx +++ b/components/slider/slider.tsx @@ -18,7 +18,7 @@ import { NormalTypes } from 'components/utils/prop-types' interface Props { hideValue?: boolean value?: number - status?: NormalTypes + type?: NormalTypes initialValue?: number step?: number max?: number @@ -31,7 +31,7 @@ interface Props { const defaultProps = { hideValue: false, - status: 'default' as NormalTypes, + type: 'default' as NormalTypes, initialValue: 0, step: 1, min: 0, @@ -71,7 +71,7 @@ const getValue = ( const Slider: React.FC> = ({ hideValue, disabled, - status, + type, step, max, min, @@ -112,7 +112,7 @@ const Slider: React.FC> = ({ [max, min, step, sideWidthRef], ) - const { bg } = useMemo(() => getColors(theme.palette, status), [theme.palette, status]) + const { bg } = useMemo(() => getColors(theme.palette, type), [theme.palette, type]) const dragHandler = (event: DraggingEvent) => { if (disabled) return diff --git a/components/textarea/__tests__/index.test.tsx b/components/textarea/__tests__/index.test.tsx index 304050a0a..ffb8f2643 100644 --- a/components/textarea/__tests__/index.test.tsx +++ b/components/textarea/__tests__/index.test.tsx @@ -13,7 +13,7 @@ describe('Textarea', () => { it('should work with different styles', () => { const wrapper = mount(
-