diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx index e45ed1c6b4..aeb79bfed7 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx @@ -10,6 +10,7 @@ export const ConnectedCheckbox: React.FC = ({ disabled, id, label, + 'aria-label': ariaLabel, multiline, name, onUpdate, @@ -38,6 +39,7 @@ export const ConnectedCheckbox: React.FC = ({ }} onBlur={onBlur} label={label} + aria-label={ariaLabel} multiline={multiline} id={id} aria-required={isRequired} diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx index 12b9359de3..bcce9a8f74 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx @@ -1,13 +1,19 @@ -import { ReactNode } from 'react'; +import { ComponentProps, ReactNode } from 'react'; import { + Checkbox, + CheckboxLabelProps, CheckboxProps, + CheckboxReactNodeLabelProps, + CheckboxStringLabelProps, InputWrapperProps, RadioGroupProps, RadioProps, SelectProps, TextAreaProps, + VanillaCheckboxProps, } from '../../Form'; +import { DistributiveOmit } from '../utility'; export interface BaseConnectedFieldProps { onUpdate?: (value: boolean) => void; @@ -16,13 +22,20 @@ export interface BaseConnectedFieldProps { export interface ConnectedFieldProps extends BaseConnectedFieldProps { name: string; } +// export type ConnectedCheckboxProps = DistributiveOmit< +// ComponentProps, +// 'name' +// >; +// ConnectedFieldProps; -export interface ConnectedCheckboxProps - extends Omit< - CheckboxProps, - 'defaultValue' | 'name' | 'htmlFor' | 'validation' - >, - ConnectedFieldProps {} +type NewVanillaCheckboxProps = Omit< + VanillaCheckboxProps, + 'defaultValue' | 'name' | 'htmlFor' | 'validation' | 'label' | 'aria-label' +> & + ConnectedFieldProps; + +export type ConnectedCheckboxProps = NewVanillaCheckboxProps & + (CheckboxReactNodeLabelProps | CheckboxStringLabelProps); type FieldComponent = Omit; diff --git a/packages/gamut/src/ConnectedForm/utility.d.ts b/packages/gamut/src/ConnectedForm/utility.d.ts new file mode 100644 index 0000000000..3472010ebb --- /dev/null +++ b/packages/gamut/src/ConnectedForm/utility.d.ts @@ -0,0 +1,3 @@ +export type DistributiveOmit = T extends Entity + ? Omit + : never; diff --git a/packages/gamut/src/Form/inputs/Checkbox.tsx b/packages/gamut/src/Form/inputs/Checkbox.tsx index 0bd68e549c..a81e32bfd7 100644 --- a/packages/gamut/src/Form/inputs/Checkbox.tsx +++ b/packages/gamut/src/Form/inputs/Checkbox.tsx @@ -23,17 +23,31 @@ import { BaseInputProps } from '../types'; export type CheckboxTextProps = StyleProps; export type CheckboxPaddingProps = StyleProps; -export type CheckboxProps = Omit< +export type CheckboxStringLabelProps = { + label: string; + 'aria-label'?: string; +}; + +export type CheckboxReactNodeLabelProps = { + label: number; + 'aria-label': string; +}; + +export type CheckboxLabelProps = + | CheckboxStringLabelProps + | CheckboxReactNodeLabelProps; + +export type VanillaCheckboxProps = Omit< InputHTMLAttributes, - 'value' + 'value' | 'label' | 'aria-label' > & CheckboxPaddingProps & Pick & { /** * If the label is a ReactNode, an aria-label must be added. */ - label: ReactNode | string; - 'aria-label'?: string; + // label: ReactNode | string; + // 'aria-label'?: string; multiline?: boolean; className?: string; /** @@ -71,6 +85,8 @@ export type CheckboxProps = Omit< dontAriaHideLabel?: boolean; }; +export type CheckboxProps = VanillaCheckboxProps & CheckboxLabelProps; + const CheckboxLabel = styled.label>( noSelect, checkboxLabel, diff --git a/packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx b/packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx index 2126ef89c3..e0b839d18e 100644 --- a/packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx +++ b/packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx @@ -157,7 +157,7 @@ export const ConnectedFormPlayground: React.FC = ({ label="checkbox field" field={{ component: ConnectedCheckbox, - label: 'check it ouuut', + label:
check it ouuut
, }} {...connectedFormGroup} />