@primer/[email protected]

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

@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]

Patch Changes

• #854 fa277afd Thanks @rezrah! - SubNav accessibility improvements:

  • Removed focus-trapping in the menu overlay on narrow viewports
  • Added hover state to the SubNav.Heading
  • Added aria-current visual indicator parity on narrow viewports

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

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

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #825 2c8e9240 Thanks @rezrah! - Switched to use CSS Logical Properties in compiled output.

  • Compiled styles now directly use CSS logical properties (e.g., margin-inline-start, margin-inline-end) instead of physical properties (margin-left, margin-right).
  • This change simplifies the stylesheet and reduces its overall size (652kB > 593kB)

  Example of the change:

  Source:

  .selector {
    margin-inline-start: var(--base-size-20);
  }

  Previous compiled output	New compiled output
  [dir='ltr'] .selector { margin-left: 2px; } [dir='rtl'] .selector { margin-right: 2px; }	.selector { margin-inline-start: 2px; }

Patch Changes

• #825 2c8e9240 Thanks @rezrah! - Fixed errors in compiled CSS stylesheets where selectors with special characters were being unintentionally escaped for compatibility with legacy browsers.

• #818 281beb08 Thanks @joshfarrant! - FormControl.Validation is now associated with the relevant input using aria-describedby.

• #822 75da350d Thanks @joshfarrant! - Updated IDEChatMessage type declaration to differentiate between assistant and user messages.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Patch Changes

• #812 8ce76569 Thanks @danielguillan! - Ensure accessible content order in PricingOptions markup

• #815 7345cc9d Thanks @rezrah! - Fixed corner background overflow bug in Card component on Safari browsers

@primer/[email protected]

@primer/[email protected]