Release tracking

[primer-css]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@primer/react-brand@0.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.

@primer/brand-primitives@0.44.0

@primer/brand-storybook@0.44.0

@primer/brand-e2e@0.44.0

@primer/brand-fonts@0.44.0

@primer/brand-config@0.44.0

[github-actions]

❗ Pre-merge checklist

Please ensure these items are checked before merging.

✅ Preliminary checks

• All CI checks pass on this pull request
• Docs and Storybook previews open in a browser

🔌 Integration smoke tests

Dotcom

• Performed successful integration test with github/github, as a primary consumer of Primer Brand
  • Install RC: bin/npm install --save --save-exact @primer/react-brand@{RC_VERSION}
    Important: Verify that each workspace package has been updated correctly in their respective package.json files
  • Run development server
  • Manually verify release-specific bugfixes and/or features on the following pages:
    • /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
  • Manually compare production site to local instance for any non-release specific regressions

Subdomain sites

• Performed successful integration test with githubuniverse.com, as a Tier 1 consumer of Primer Brand outside of the monolith.

  • Run development server and verify no new console warnings or regressions are found
  • Run local build to verify the release compiles correctly
  • Manually performed side-by-side comparison with production

• Performed successful integration test with https://resources.github.com/, as a Tier 1 consumer of Primer Brand outside of the monolith.

  • Run development server and verify no new console warnings or regressions are found
  • Run local build to verify the release compiles correctly
  • Manually performed side-by-side comparison with production

Sandboxes

• Works in CodeSandbox or StackBlitz
  • New components render successfully
  • (optional) Tested in both SPA and SSR apps if release contains build changes

🤔 Cross-check (aka sanity test)

• Release notes accurately describe the changes made
• All bugfixes in this release have resolved their corresponding issues
• The issues for reverted PRs have been re-opened and commented on with a link to the reverted PR
• No noticeable regressions or side-effects have not been introduced as a result of changes in this release.
  • If they have, determine severity of the issue and consider hotfixing

After tests

• Add report summary of your findings, including any images. Use following template as a guide:

  #### Smoke test results
  
  - Feature 1 🟢 🟡 🔴 (choose one, depending on success levels)
  
    {insert screenshot}
  
  Release testing status: Ready to release 🟢 | Paused 🟡 🔴 (choose one and provide reason)

🚢 After merge

• Issue release comms in primer brand Slack channel
• Add the preview deployment's link to releases as a way of permalinking to old version's docs. Example

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

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 🟢

[rezrah]

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 🟢