From e47445df6c389fef2aacc72449c02ff471e4cb68 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 23 May 2024 12:40:39 -0400 Subject: [PATCH] Allows asterisk in `FormControl.Label` to be adjustable (#4543) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add new props to `FormControl.Label` * Add conditional * Add changeset * Update docs json * Add more examples * chore(deps-dev): bump ejs from 3.1.9 to 3.1.10 (#4549) Bumps [ejs](https://github.com/mde/ejs) from 3.1.9 to 3.1.10. - [Release notes](https://github.com/mde/ejs/releases) - [Commits](https://github.com/mde/ejs/compare/v3.1.9...v3.1.10) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * BranchName: Add style for span and add v8 tokens (#4556) * add style for branchName as span adn add v8 tokens * added changeset * Update thin-ligers-turn.md * test(vrt): update snapshots * use not a instead of matching for span --------- Co-authored-by: Siddharth Kshetrapal Co-authored-by: lukasoppermann * refactor(Banner): update region to use a dedicated aria-label (#4539) * refactor(Banner): update region to use a dedicated aria-label * chore: add changeset, update config to exclude codesandbox * feat: add aria-label to Banner * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * Update packages/react/src/Banner/Banner.test.tsx Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * test: update test label with aria-label --------- Co-authored-by: Josh Black Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> * chore(deps-dev): bump cross-env from 7.0.2 to 7.0.3 (#4561) Bumps [cross-env](https://github.com/kentcdodds/cross-env) from 7.0.2 to 7.0.3. - [Release notes](https://github.com/kentcdodds/cross-env/releases) - [Changelog](https://github.com/kentcdodds/cross-env/blob/master/CHANGELOG.md) - [Commits](https://github.com/kentcdodds/cross-env/compare/v7.0.2...v7.0.3) --- updated-dependencies: - dependency-name: cross-env dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/plugin-transform-modules-commonjs (#4562) Bumps [@babel/plugin-transform-modules-commonjs](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-modules-commonjs) from 7.23.3 to 7.24.1. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-plugin-transform-modules-commonjs) --- updated-dependencies: - dependency-name: "@babel/plugin-transform-modules-commonjs" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jest-fail-on-console from 3.1.1 to 3.2.0 (#4563) Bumps [jest-fail-on-console](https://github.com/ValentinH/jest-fail-on-console) from 3.1.1 to 3.2.0. - [Release notes](https://github.com/ValentinH/jest-fail-on-console/releases) - [Commits](https://github.com/ValentinH/jest-fail-on-console/compare/v3.1.1...v3.2.0) --- updated-dependencies: - dependency-name: jest-fail-on-console dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(FeatureFlags): broaden feature flag type to accept undefined (#4554) * feat(FeatureFlags): loosen feature flag type to accept undefined * chore: add changeset * Update .changeset/grumpy-coats-worry.md --------- Co-authored-by: Josh Black * prevent form submit (#4551) * deprecate title prop on ActionList.Group component on docs (#4544) * chore: add hydro analytics to storybook (#4558) * chore: add hydro analytics to storybook * chore: use previewHead over managerHead * Update build-docs --------- Co-authored-by: Josh Black * Revert "Revert "Add support for nested submenus to `ActionMenu`"" (#4486) * Revert "Revert "Add support for nested submenus to `ActionMenu` (#4386)" (#4472)" This reverts commit 82072eb7169578bb686c07c64b3dd52eac764e38. * just want a change to trigger rebuild --------- Co-authored-by: Siddharth Kshetrapal Co-authored-by: Pavithra Kodmad * chore(deps): update typescript to 5.4.5 (#4568) Co-authored-by: Josh Black * Use dynamic height and width for dialogs (#4567) * Use dynamic height and width for dialogs * Update tall-forks-bathe.md --------- Co-authored-by: Siddharth Kshetrapal * Make asterisk default, update story scenarios * Update packages/react/src/FormControl/FormControl.docs.json Co-authored-by: Owen Niblock * Update packages/react/src/internal/components/InputLabel.tsx Co-authored-by: Owen Niblock --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Lukas Oppermann Co-authored-by: Siddharth Kshetrapal Co-authored-by: lukasoppermann Co-authored-by: Josh Black Co-authored-by: Josh Black Co-authored-by: Kate Higa <16447748+khiga8@users.noreply.github.com> Co-authored-by: Armağan Co-authored-by: Ian Sanders Co-authored-by: Pavithra Kodmad Co-authored-by: Dusty Greif Co-authored-by: Owen Niblock --- .changeset/stupid-suns-cheat.md | 5 ++++ .../src/FormControl/FormControl.docs.json | 12 ++++++++ .../FormControl.features.stories.tsx | 28 +++++++++++++++++++ .../src/FormControl/_FormControlLabel.tsx | 8 +++++- .../src/internal/components/InputLabel.tsx | 8 ++++-- 5 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 .changeset/stupid-suns-cheat.md 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