From f85ed796b74e7bf95d2afa4214f9ca32db33b358 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 12 Oct 2023 16:57:55 +0200 Subject: [PATCH 1/5] fix(Field): show warning in case of properties misuse --- .changeset/spicy-apricots-doubt.md | 5 +++ .../forms/Form/use-field/use-field-props.tsx | 32 ++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 .changeset/spicy-apricots-doubt.md diff --git a/.changeset/spicy-apricots-doubt.md b/.changeset/spicy-apricots-doubt.md new file mode 100644 index 00000000..4f31c56e --- /dev/null +++ b/.changeset/spicy-apricots-doubt.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Show warning if a field is linked to a form but default value is provided. And in case when a field is unlinked but validation rules are provided.' diff --git a/src/components/forms/Form/use-field/use-field-props.tsx b/src/components/forms/Form/use-field/use-field-props.tsx index c2070e05..df83d3d3 100644 --- a/src/components/forms/Form/use-field/use-field-props.tsx +++ b/src/components/forms/Form/use-field/use-field-props.tsx @@ -4,12 +4,13 @@ import { useDebugValue } from 'react'; import { useChainedCallback, useEvent } from '../../../../_internal'; import { useInsideLegacyField } from '../Field'; import { mergeProps } from '../../../../utils/react'; +import { warn } from '../../../../utils/warnings'; import { useField } from './use-field'; -import type { ValidateTrigger } from '../../../../shared'; import type { CubeFieldProps } from './types'; import type { FieldTypes } from '../types'; +import type { ValidateTrigger } from '../../../../shared'; export type UseFieldPropsParams = { valuePropsMapper?: ({ value, onChange }) => any; @@ -24,6 +25,19 @@ export type UseFieldPropsParams = { unsafe__isDisabled?: boolean; }; +const VALUE_PROPERTIES = [ + 'value', + 'defaultValue', + 'isSelected', + 'defaultSelected', + 'isIndeterminate', + 'defaultIndeterminate', + 'selectedKey', + 'defaultSelectedKey', + 'selectedKeys', + 'defaultSelectedKeys', +]; + export function useFieldProps< T extends FieldTypes, Props extends CubeFieldProps, @@ -77,6 +91,22 @@ export function useFieldProps< ), ); + if (props.rules && !props.name) { + warn( + `The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`, + ); + } + + if (isOutsideOfForm) { + for (const valuePropName of VALUE_PROPERTIES) { + if (valuePropName in props) { + warn( + `The "${valuePropName}" property is not suitable for fields that are part of a form. To set default values, please use the "defaultValues" property of the form component instead. To unlink the field from the form, remove the "name" property from the field.`, + ); + } + } + } + const result = isOutsideOfForm ? props : mergeProps( From 9738d29e66c6eb709f8b9442f90d2b7a6c7fbd50 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 12 Oct 2023 18:13:30 +0200 Subject: [PATCH 2/5] fix(Switch): accessibility warning --- src/components/forms/Switch/Switch.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/forms/Switch/Switch.tsx b/src/components/forms/Switch/Switch.tsx index 2bfedc75..1ba141cd 100644 --- a/src/components/forms/Switch/Switch.tsx +++ b/src/components/forms/Switch/Switch.tsx @@ -190,7 +190,16 @@ function Switch(props: WithNullableSelected, ref) { let domRef = useFocusableRef(ref, inputRef); // eslint-disable-next-line react-hooks/rules-of-hooks - let { inputProps } = useSwitch(props, useToggleState(props), inputRef); + let { inputProps } = useSwitch( + { + ...props, + ...(typeof label === 'string' && label.trim() + ? { 'aria-label': label } + : {}), + }, + useToggleState(props), + inputRef, + ); const mods = { 'inside-form': insideForm, From b85ea510c7e5fad93e46ad9e6fd4ec09a0fb80f7 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 12 Oct 2023 18:19:09 +0200 Subject: [PATCH 3/5] chore: increase size limit --- .size-limit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 7d634858..244c36f5 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -19,13 +19,13 @@ module.exports = [ }), ); }, - limit: '214kB', + limit: '215kB', }, { name: 'Tree shaking (just a Button)', path: './dist/es/index.js', webpack: true, import: '{ Button }', - limit: '28 kB', + limit: '29 kB', }, ]; From 2fefcbfe019a5a08beb09f730ed8e6b567756e98 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 12 Oct 2023 19:00:30 +0200 Subject: [PATCH 4/5] fix(Field): pass "for" attribute to label --- src/components/forms/Form/use-field/types.ts | 2 ++ .../forms/Form/use-field/use-field-props.tsx | 12 +++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/forms/Form/use-field/types.ts b/src/components/forms/Form/use-field/types.ts index e4207dbe..bfc929ea 100644 --- a/src/components/forms/Form/use-field/types.ts +++ b/src/components/forms/Form/use-field/types.ts @@ -7,6 +7,7 @@ import { ValidationState, } from '../../../../shared'; import { CubeFormInstance } from '../use-form'; +import { Props } from '../../../../tasty'; export interface CubeFieldProps { /** The initial value of the input. */ @@ -33,6 +34,7 @@ export interface CubeFieldProps { validateTrigger?: ValidateTrigger; /** Message for the field. Some additional information or error notice */ message?: ReactNode; + labelProps?: Props; } export type FieldReturnValue = { diff --git a/src/components/forms/Form/use-field/use-field-props.tsx b/src/components/forms/Form/use-field/use-field-props.tsx index df83d3d3..aa20b77a 100644 --- a/src/components/forms/Form/use-field/use-field-props.tsx +++ b/src/components/forms/Form/use-field/use-field-props.tsx @@ -107,7 +107,7 @@ export function useFieldProps< } } - const result = isOutsideOfForm + const result: Props = isOutsideOfForm ? props : mergeProps( props, @@ -119,6 +119,16 @@ export function useFieldProps< }, ); + if (result.id) { + if (!result.labelProps) { + result.labelProps = {}; + } + + if (result.labelProps) { + result.labelProps.for = result.id; + } + } + if (process.env.NODE_ENV === 'development') { // eslint-disable-next-line react-hooks/rules-of-hooks useDebugValue(result); From 3864b4de7d2a49630bba644fc0a61d0fbed50b11 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 12 Oct 2023 19:01:00 +0200 Subject: [PATCH 5/5] fix(Field): pass "for" attribute to label * 2 --- .changeset/cuddly-actors-boil.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-actors-boil.md diff --git a/.changeset/cuddly-actors-boil.md b/.changeset/cuddly-actors-boil.md new file mode 100644 index 00000000..f8867a95 --- /dev/null +++ b/.changeset/cuddly-actors-boil.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix "for" attribute in field labels.