diff --git a/.changeset/stupid-suns-cheat.md b/.changeset/stupid-suns-cheat.md new file mode 100644 index 00000000000..3f936571554 --- /dev/null +++ b/.changeset/stupid-suns-cheat.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator` diff --git a/packages/react/src/FormControl/FormControl.docs.json b/packages/react/src/FormControl/FormControl.docs.json index a4c737b98b6..94dcd39ad7c 100644 --- a/packages/react/src/FormControl/FormControl.docs.json +++ b/packages/react/src/FormControl/FormControl.docs.json @@ -56,6 +56,18 @@ "defaultValue": "'label'", "description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'" }, + { + "name": "requiredText", + "type": "string", + "defaultValue": "'*'", + "description": "The text to display when the field is required" + }, + { + "name": "requiredIndicator", + "type": "boolean", + "defaultValue": "true", + "description": "Whether to show or hide the required text in the accessibility tree, the required text is still shown visually." + }, { "name": "sx", "type": "SystemStyleObject" diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx index 07bb3fecb8d..b8184d635e6 100644 --- a/packages/react/src/FormControl/FormControl.features.stories.tsx +++ b/packages/react/src/FormControl/FormControl.features.stories.tsx @@ -10,6 +10,7 @@ import { Radio, RadioGroup, Select, + Text, TextInput, TextInputWithTokens, Textarea, @@ -306,3 +307,30 @@ export const DisabledInputs = () => ( ) + +export const CustomRequired = () => ( + + + Form Input Label + This is a form field with a custom required indicator + + + + Required fields are marked with an asterisk (*) + + Form Input Label + + This is a form field with a required indicator that is hidden in the accessibility tree + + + + + + + Form Input Label + + This is a form field that is marked as optional, it is not required + + + +) diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/_FormControlLabel.tsx index 62c346d8ff8..8c52c909c52 100644 --- a/packages/react/src/FormControl/_FormControlLabel.tsx +++ b/packages/react/src/FormControl/_FormControlLabel.tsx @@ -8,12 +8,14 @@ export type Props = { * Whether the label should be visually hidden */ visuallyHidden?: boolean + requiredText?: string + requiredIndicator?: boolean id?: string } & SxProp const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, sx, ...props}) => { +> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, ...props}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -26,6 +28,8 @@ const FormControlLabel: React.FC< id, visuallyHidden, required, + requiredText, + requiredIndicator, disabled, sx, ...props, @@ -36,6 +40,8 @@ const FormControlLabel: React.FC< visuallyHidden, htmlFor: htmlFor || formControlId, required, + requiredText, + requiredIndicator, disabled, sx, ...props, diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index 68ac9e129c6..e932a4d5418 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -6,6 +6,8 @@ import VisuallyHidden from '../../_VisuallyHidden' type BaseProps = SxProp & { disabled?: boolean required?: boolean + requiredText?: string + requiredIndicator?: boolean visuallyHidden?: boolean id?: string } @@ -28,6 +30,8 @@ const InputLabel: React.FC> = ({ htmlFor, id, required, + requiredText, + requiredIndicator, visuallyHidden, sx, as = 'label', @@ -52,10 +56,10 @@ const InputLabel: React.FC> = ({ }} {...props} > - {required ? ( + {required || requiredText ? ( {children} - * + {requiredText ?? '*'} ) : ( children