From c9db016541bb130cb4afedee92d89a1e9b4f400f Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Sun, 13 Dec 2020 16:11:55 +0100 Subject: [PATCH 1/7] fix(button): display flex --- src/components/Button/Button.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 503bb67e..9049878f 100644 --- a/src/components/Button/Button.module.css +++ b/src/components/Button/Button.module.css @@ -5,7 +5,7 @@ padding: 10px 14px; border: none; cursor: pointer; - display: inline-block; + display: flex; } .smallButton { From 0fd2f00d29d83b8f9d14fb48062fbbb47829cf61 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 14 Dec 2020 00:11:15 +0100 Subject: [PATCH 2/7] feat(formfield): support errorMessage array --- src/components/FormField/FormField.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/FormField/FormField.tsx b/src/components/FormField/FormField.tsx index 8c6f359d..8957c400 100644 --- a/src/components/FormField/FormField.tsx +++ b/src/components/FormField/FormField.tsx @@ -7,7 +7,7 @@ import styles from './FormField.module.css'; type Props = { label?: string; hint?: ReactNode; - errorMessage?: string; + errorMessage?: string | (string | undefined)[]; className?: string; children: ReactNode; }; @@ -16,11 +16,23 @@ const FormField: React.FC = ({ label, className, children, hint, errorMes const mergedClassNames = classNames(cssReset.ventura, className, { [styles.isSpaced]: Boolean(label), }); + + let errorMessages: string[] = []; + if (Array.isArray(errorMessage)) { + errorMessages = errorMessage.filter(Boolean) as string[]; + } else if (errorMessage) { + errorMessages = [errorMessage]; + } + return (
{Boolean(label) && {label}} {children} - {Boolean(errorMessage) && {errorMessage}} + {errorMessages.map((err) => ( + + {err} + + ))} {Boolean(hint) &&
{hint}
}
); From 8693d70406a436c783071b8f2f88c5503a12057f Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 14 Dec 2020 00:11:54 +0100 Subject: [PATCH 3/7] feat(input): add number type --- src/components/Input/Input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index ea21df2f..f05da4f2 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -11,7 +11,7 @@ interface Props { onChange?: ChangeEventHandler; onBlur?: FocusEventHandler; placeholder?: string; - type?: 'text' | 'email' | 'password'; + type?: 'text' | 'email' | 'password' | 'number'; spellCheck?: boolean; autoComplete?: boolean; maxLength?: number; From 42ce0409c4871483ad64c146ef87bfc09dcd0e7b Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 14 Dec 2020 00:12:31 +0100 Subject: [PATCH 4/7] fix(slider): remove slider horizontal padding --- src/components/Slider/Slider.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Slider/Slider.module.css b/src/components/Slider/Slider.module.css index 0c7b94ed..89cbb088 100644 --- a/src/components/Slider/Slider.module.css +++ b/src/components/Slider/Slider.module.css @@ -3,7 +3,7 @@ display: flex; align-items: center; justify-content: center; - padding: 20px; + padding: 20px 0; touch-action: none; } From e1ae0f6307cf91e30fecaca19181252150c49a37 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 14 Dec 2020 00:13:06 +0100 Subject: [PATCH 5/7] fix(slider): auto calculate numberOfDecimals --- src/components/Slider/Slider.tsx | 20 ++++++++++++-------- src/utils/math.ts | 4 ++++ 2 files changed, 16 insertions(+), 8 deletions(-) create mode 100644 src/utils/math.ts diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 002d0a82..a1523ffe 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -5,15 +5,16 @@ import classnames from 'classnames'; import { Handle } from './Handle/Handle'; import { SliderRail } from './SliderRail/SliderRail'; import { Tick } from './Tick/Tick'; +import { countDecimals } from '../../utils/math'; import cssReset from '../../css-reset.module.css'; import styles from './Slider.module.css'; type Props = { value: number; - onChange: (value: number) => void; + onChange?: (value: number) => void; valueBoundaries: [number, number]; - textBoundaries?: [string, string]; + textBoundaries?: [string | undefined, string | undefined]; stepSize?: number; numberOfDecimals?: number; isDisabled?: boolean; @@ -26,18 +27,21 @@ const Slider: React.FC = ({ onChange, valueBoundaries, textBoundaries, - stepSize, - numberOfDecimals = 0, + stepSize: defaultStepSize, + numberOfDecimals: defaultNumberOfDecimals, isDisabled = false, showTooltip = true, className, }: Props) => { + const minValue = valueBoundaries[0]; + const maxValue = valueBoundaries[1]; + const numberOfDecimals = + defaultNumberOfDecimals ?? Math.max(...valueBoundaries.map(countDecimals)); + const stepSize = defaultStepSize ?? valueBoundaries[1] <= 100 ? 1 : (maxValue - minValue) / 100; const formatValue = (val: number) => (Math.round(val * (10 ** numberOfDecimals || 1)) / (10 ** numberOfDecimals || 1)).toFixed( numberOfDecimals, ); - const minValue = valueBoundaries[0]; - const maxValue = valueBoundaries[1]; const classNames = classnames( cssReset.ventura, styles.sliderWrapper, @@ -50,10 +54,10 @@ const Slider: React.FC = ({ return (
onChange(values[0])} + onChange={(values) => onChange && onChange(values[0])} values={[value]} disabled={isDisabled} > diff --git a/src/utils/math.ts b/src/utils/math.ts new file mode 100644 index 00000000..a08d42df --- /dev/null +++ b/src/utils/math.ts @@ -0,0 +1,4 @@ +export const countDecimals = (value: number) => { + if (Math.floor(value) === value) return 0; + return String(value).split('.')[1].length || 0; +}; From 34ec4c4e9d8711946721501a150aa8cd1b21c113 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Sat, 19 Dec 2020 14:06:58 +0100 Subject: [PATCH 6/7] test(slider): add test for number of decimals --- src/components/Slider/Slider.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx index c5251b96..81a64994 100644 --- a/src/components/Slider/Slider.test.tsx +++ b/src/components/Slider/Slider.test.tsx @@ -15,6 +15,12 @@ describe('Slider', () => { expect(asFragment()).toMatchSnapshot(); }); + test('the displayed decimals should be the same as the value boundaries', () => { + const { queryByText } = render(); + expect(queryByText('10.00')).not.toBe(null); + expect(queryByText('10.05')).not.toBe(null); + }); + test('3 decimals should be displayed', () => { const { queryByText } = render(); expect(queryByText('100.000')).not.toBe(null); From 803eae765c4f8eb4fc9cf1207085885cac7692fe Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Sat, 19 Dec 2020 14:08:20 +0100 Subject: [PATCH 7/7] test(formfield): add test for multiple error messages --- src/components/FormField/FormField.test.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/FormField/FormField.test.tsx b/src/components/FormField/FormField.test.tsx index df915a60..2524e9ea 100644 --- a/src/components/FormField/FormField.test.tsx +++ b/src/components/FormField/FormField.test.tsx @@ -16,6 +16,24 @@ describe('FormField', () => { expect(queryByText(/Something went wrong/)).not.toBe(null); }); + test('undefined errorMessage should not be rendered', () => { + const { queryByText } = render( + Form elements here, + ); + expect(queryByText(/undefined/)).toBe(null); + }); + + test('array of error messages should all be rendered', () => { + const { queryByText } = render( + + Form elements here + , + ); + expect(queryByText(/A second error/)).not.toBe(null); + expect(queryByText(/A first error/)).not.toBe(null); + expect(queryByText(/undefined/)).toBe(null); + }); + test('hint should be rendered', () => { const { queryByText } = render( You should look here}>Form elements here,