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

Minor Changes

• #860 2502f658 Thanks @rezrah! - Decreased the default heading size in River component. Use size="4" to restore the previous text size, if needed.

• #863 00ef0694 Thanks @rezrah! - Added a new FrostedGlassVFX component for applying a frosted glass-effect texture to nested components.

  ⚠️ This is an experimental component, and not tested for compatibility with other Primer Brand components.

  When using this component, ensure there is sufficient contrast between the foreground text and the background imagery, as the frosted glass effect can significantly reduce legibility.

  Usage example:

  <FrostedGlassVFX>
    <Testimonial variant="default">
      <Testimonial.Quote>
        GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first
        line of code we&apos;re writing.
      </Testimonial.Quote>
      <Testimonial.Name />
      <Testimonial.Avatar />
    </Testimonial>
  </FrostedGlassVFX>

  🔗 (See Storybook for an example)[https://primer.style/brand/storybook/?path=/story/components-testimonial-examples--with-frosted-glass]

Patch Changes

• #859 cd18615f Thanks @rezrah! - AnchorNav component updates:

  • AnchorNav.Action and AnchorNav.SecondaryAction now appear visually smaller by default. Use size="medium" if the previous, larger buttons are needed.
  • AnchorNav.Action and AnchorNav.SecondaryAction each support a variant prop, allowing primary Button visuals to be optionally applied.

• #866 8223135d Thanks @rezrah! - Fixed delayed appearance of heading separator in SubNav.

• #865 0401cc5c Thanks @joshfarrant! - Style improvements to the SubNav component.

  • Fixed a bug in SubNav.Link elements with aria-current, which caused inconsistent appearance across viewports.

• #863 00ef0694 Thanks @rezrah! - Added new Testimonial variants.

  Use variant="default" or variant="subtle" for an alternative visual appearance. The current design will be referred to as minimal going forward.

  🔗 See the documentation for usage examples

• #867 4bac3868 Thanks @rezrah! - Hero.Description updated to support variant="muted"

• #868 c0aa598d Thanks @rezrah! - SubNav.Link now supports variant="default" to help increase contrast and legibility on non-standard backgrounds.

@primer/[email protected]

Patch Changes

• #863 00ef0694 Thanks @rezrah! - Added new design tokens for Testimonial and FrostedGlassVFX components

  :root {
    --brand-Testimonial-borderMask-default
    --brand-Testimonial-borderMask-subtle
    --brand-FrostedGlassVFX-bgColor
    --brand-FrostedGlassVFX-boxShadow
    --brand-FrostedGlassVFX-borderMask
    --brand-FrostedGlassVFX-blurIntensity-high
    --brand-FrostedGlassVFX-blurIntensity-medium
    --brand-FrostedGlassVFX-blurIntensity-low
  }
  

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

[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.

[joshfarrant]

Smoke test results

• FrostedGlassVFX component 🟢

Component works as expected

Release testing status: Ready to release 🟢

• River default heading size 🟢

Default heading size verified as being reduced to 5

Release testing status: Ready to release 🟢

• AnchorNav 🟢

Actions are smaller, and variant gets forwarded as expected

Release testing status: Ready to release 🟢

• SubNav 🟢

Links in SubMenu can now be marked as current, and style improvements are present.

New variant="default on SubNav.Link works as expected

Release testing status: Ready to release 🟢

• Hero 🟢

Hero.Description muted variant works as expected.

Release testing status: Ready to release 🟢

• Testimonial 🟢

New variants work as expected

Release testing status: Ready to release 🟢

githubuniverse.com

This release of @primer/react-brand triggers a new warning in the terminal when running githubuniverse.com locally.

 ⚠ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/@primer/react-brand/lib/css/main.css
Warning

(16344:5) autoprefixer: end value has mixed support, consider using flex-end instead

This is being triggered by this line in the SubNav which was introduced in 21b2584.

We're using justify-content: end; in quite a few places. The support for it appears to be absolutely fine and encompasses our supported browsers. I don't think this warning is a concern and there are no visual regressions.

Resources Hub

The same issue (autoprefixer: end value has mixed support, consider using flex-end instead) is flagged here too. For the same reasons as above I don't think this is a concern.