Allows asterisk in FormControl.Label to be adjustable (#4543)

* 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](mde/ejs@v3.1.9...v3.1.10)

---
updated-dependencies:
- dependency-name: ejs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>
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 <[email protected]>
Co-authored-by: lukasoppermann <[email protected]>

* 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 <[email protected]>

* Update packages/react/src/Banner/Banner.test.tsx

Co-authored-by: Kate Higa <[email protected]>

* test: update test label with aria-label

---------

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Kate Higa <[email protected]>

* 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](kentcdodds/cross-env@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] <[email protected]>
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] <[email protected]>
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](ValentinH/jest-fail-on-console@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] <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

* Revert "Revert "Add support for nested submenus to `ActionMenu`"" (#4486)

* Revert "Revert "Add support for nested submenus to `ActionMenu` (#4386)" (#4472)"

This reverts commit 82072eb.

* just want a change to trigger rebuild

---------

Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: Pavithra Kodmad <[email protected]>

* chore(deps): update typescript to 5.4.5 (#4568)

Co-authored-by: Josh Black <[email protected]>

* 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 <[email protected]>

* Make asterisk default, update story scenarios

* Update packages/react/src/FormControl/FormControl.docs.json

Co-authored-by: Owen Niblock <[email protected]>

* Update packages/react/src/internal/components/InputLabel.tsx

Co-authored-by: Owen Niblock <[email protected]>

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Lukas Oppermann <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: lukasoppermann <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Kate Higa <[email protected]>
Co-authored-by: Armağan <[email protected]>
Co-authored-by: Ian Sanders <[email protected]>
Co-authored-by: Pavithra Kodmad <[email protected]>
Co-authored-by: Dusty Greif <[email protected]>
Co-authored-by: Owen Niblock <[email protected]>

Author: 11 people

.changeset/stupid-suns-cheat.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FormControl: Adds new props to `FormControl.Label`, `requiredText` and `requiredIndicator`

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"

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 = () => (
     </FormControl>
   </Box>
 )
+
+export const CustomRequired = () => (
+  <Box sx={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+    <FormControl required={true}>
+      <FormControl.Label requiredText="(required)">Form Input Label</FormControl.Label>
+      <FormControl.Caption>This is a form field with a custom required indicator</FormControl.Caption>
+      <TextInput />
+    </FormControl>
+
+    <Text sx={{fontSize: 1}}>Required fields are marked with an asterisk (*)</Text>
+    <FormControl required={true}>
+      <FormControl.Label requiredIndicator={false}>Form Input Label</FormControl.Label>
+      <FormControl.Caption>
+        This is a form field with a required indicator that is hidden in the accessibility tree
+      </FormControl.Caption>
+      <TextInput />
+    </FormControl>
+
+    <FormControl required={false}>
+      <FormControl.Label requiredText="(optional)" requiredIndicator={false}>
+        Form Input Label
+      </FormControl.Label>
+      <FormControl.Caption>This is a form field that is marked as optional, it is not required</FormControl.Caption>
+      <TextInput />
+    </FormControl>
+  </Box>
+)

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<typeof InputLabel> & 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,

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<React.PropsWithChildren<Props>> = ({
   htmlFor,
   id,
   required,
+  requiredText,
+  requiredIndicator,
   visuallyHidden,
   sx,
   as = 'label',
@@ -52,10 +56,10 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
       }}
       {...props}
     >
-      {required ? (
+      {required || requiredText ? (
         <Box display="flex" as="span">
           <Box mr={1}>{children}</Box>
-          <span>*</span>
+          <span aria-hidden={requiredIndicator ? undefined : true}>{requiredText ?? '*'}</span>
         </Box>
       ) : (
         children