New release available "@primer/[email protected]"

[github-actions]

A new release is available: https://github.com/primer/brand/releases/tag/%40primer/react-brand%400.44.0.

Changelog

🔗 See documentation for v0.44.0

Minor Changes

• #831 8c3448d0 Thanks @joshfarrant! - Reduced the text size in FormControl.Hint and FormControl.Validation components to match their counterparts in CheckboxGroup and RadioGroup for improved consistency and visual design accuracy.

• #844 00275979 Thanks @joshfarrant! - New Icon component is generally available.

  Example:
  

  🔗 Read the documentation for more usage examples

• #830 1f9eb72b Thanks @joshfarrant! - New CheckboxGroup and RadioGroup components to group Checkbox and Radio components are now available.

  CheckboxGroup

  <CheckboxGroup>
    <CheckboxGroup.Label>Choose your favorite features</CheckboxGroup.Label>
    <FormControl>
      <FormControl.Label>Actions notifications</FormControl.Label>
      <Checkbox value="actions" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Packages</FormControl.Label>
      <Checkbox value="packages" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Codespaces</FormControl.Label>
      <Checkbox value="codespaces" />
    </FormControl>
  </CheckboxGroup>

  🔗 Read the documentation for more CheckboxGroup examples

  RadioGroup:

  <RadioGroup>
    <RadioGroup.Label>Choose your primary workspace</RadioGroup.Label>
    <FormControl>
      <FormControl.Label>Codespaces</FormControl.Label>
      <Radio name="workspace" value="codespaces" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Local environment</FormControl.Label>
      <Radio name="workspace" value="local" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Pen and paper</FormControl.Label>
      <Radio name="workspace" value="remote" />
    </FormControl>
  </RadioGroup>

  🔗 Read the documentation for more RadioGroup examples

• #824 6e398ba7 Thanks @rezrah! - Updates to SubNav component

  • New anchor-based navigation pattern available:

    Use variant="anchor" on SubNav.SubMenu to apply anchor navigation as an alternative to the default dropdown-based submenu.

    <SubNav>
      <SubNav.Heading href="#">Heading</SubNav.Heading>
      <SubNav.Link href="#" aria-current="page">
        Link with anchor navigation
        <SubNav.SubMenu variant="anchor">
          <SubNav.Link href="#">Anchor link one</SubNav.Link>
          <SubNav.Link href="#">Anchor link two</SubNav.Link>
          <SubNav.Link href="#">Anchor link three</SubNav.Link>
          <SubNav.Link href="#">Anchor link four</SubNav.Link>
        </SubNav.SubMenu>
      </SubNav.Link>
      <SubNav.Link href="#">Link</SubNav.Link>
      <SubNav.Link href="#">Link</SubNav.Link>
    </SubNav>

  • Overlay now closes when user clicks outside of it

  • Dropdown submenus now appear with white and black background and foreground colors respectively, irrespective of color mode.

  • Various other visual updates to improve brand-alignment. These include adjustments to text size, weight, color and iconography.

Patch Changes

• #842 26f79f62 Thanks @joshfarrant! - Allow AnchorNav links to wrap to the next line in the expanded list on narrow viewports.

• #843 7473042c Thanks @joshfarrant! - Added a small (200ms) delay to the closing of the Tooltip to make it easier for users to move their cursor to the contents of the Tooltip.

• #847 c3ca91c8 Thanks @stamat! - Improved accessibility of Button and Link components on Windows-based high contrast themes. Outlines are now visible only when focused, and border underlines will appear correctly.

• #841 78e82c16 Thanks @joshfarrant! - Improved accessibility in AnchorNav through clearer navigation menu labelling for screen reader users on narrow viewports.

• #833 0f8bfa65 Thanks @rezrah! - selected breadcrumb items now use non-interactive elements for improved keyboard navigation and correct semantics.

• #838 bf785d6b Thanks @joshfarrant! - Updated the accessible label of the SubNav's open/close toggle button to include the name of the current page.

• #828 652e7ff0 Thanks @joshfarrant! - Fixed bug where TextInput, TextArea, and Select components would expand to the width of a the validation message on the parent FormControl.

❗ Dotcom integration checklist

Note

GitHub Staff only

Please ensure these items are checked before merging.

• Performed successful integration test with github/github
  • Install release @primer/[email protected]
  • Verify CI passes
• Manually verify regressions on following pages against production:
• /features/copilot
• /enterprise
• /enterprise/advanced-security
• /articles/security
• /articles/security/what-is-security-testing
• /features/preview
• /features/copilot/getting-started and /features/copilot
• /solutions/devops
• /education
• /mobile
• /contact-sales
• /about/diversity

[github-actions]

Smoke test results

Reduced the text size in FormControl.Hint and FormControl.Validation 🟢

• Works as expected.

• Verified on enterprise enquiry page

  

New Icon component is generally available 🟢

• Works as described in docs (import available from the package)

New CheckboxGroup and RadioGroup components 🟢

• Works as described in docs

  E.g.

  

Updates to SubNav component 🟡

Warning

Multiple visual regressions observed in dotcom

1. Extensions: github.com/features/copilot/extensions

• Regressions are due to custom overrides, some of which will need to be removed as they're now supported in SubNav .

• Double separators are present. This can be removed as it exists in the component.

• Link colors are being overridden with custom muted colors + blue hover styles. There is also a primer (product) link override being applied, which will needs a dotcom specific override. Recommend adding color: inherit to lp-Hero-subnav a as a workaround.

  With custom overrides ❌	Without custom overrides ✅

2. Features page github.com/features

• Previous SubNav was being repurposed into an AnchorNav

• New updates no longer compatible with this approach

• Recommendation: Use AnchorNav instead, which is intended for this use-case

  Regression when using SubNav ❌	Fixed by using AnchorNav ✅

3. Education page (github.com/education)

• Regression on narrow viewports due to missing overview page, which is a required. Can be fixed by adding a new SubNav.Link with aria-current when on the user is on the parent page.

  Regression from missing aria-current ❌	Fixed by adding aria-current ✅

• Replacing Rails SubNav + React AnchorNav with single React SubNav w/ anchor variant ✨

  Tested hypothetical replacement of the separate Rails subnav + React AnchorNav on Copilot overview page with the new Anchor navigation feature of SubNav v2. Works well, and makes the page feel lighter due to smaller footprint of the new pattern.

  Screen.Recording.2024-12-06.at.11.24.04.mov

Release testing status

This won't be a straightforward upgrade for dotcom, and will require some effort to align with the new SubNav conventions. Please reach out to #primer-brand in Slack for any support.

• Ready to release 🟢

[github-actions]

Smoke test results

Updates to SubNav component 🟢

Regressions from previous smoke test resolved through #851

• anchor navigation bar now hidden by default, appears only on sticky
• requirement for aria-current removed, preventing regression on Education pages
• z-index increased on sub nav to avoid layering conflict with global nav dropdowns

Before	After

New 'hidden until sticky' anchored navigation in SubNav v2 on Copilot page:

Uploading Screen Recording 2024-12-09 at 10.49.40.mov…

Hotfixed SubNav v2 for education page:

Release testing status

This won't be a straightforward upgrade for dotcom, and will require some effort to align with the new SubNav conventions. Please reach out to #primer-brand in Slack for any support.

Ready to release 🟢