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

[github-actions]

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

Changelog

🔗 See documentation for 0.45.0

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

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.

❗ 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

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