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

@primer/[email protected]

Minor Changes

• #811 6331ae61 Thanks @rezrah! - River and SectionIntro link colors now default to blue (accent) for consistency with Card, Pillar and similar components that feature blue links.

  ⚠️ This is a visual breaking change. Please manually review all usages of River and SectionIntro to ensure there is sufficient contrast with the background color.

Patch Changes

• #805 2928995b Thanks @rezrah! - Disabled all transitions and auto-staggering when reduced-motion user preference is enabled

• #809 bbb14ce9 Thanks @rezrah! - Updated Link underline to fill entire width

• #798 af335d37 Thanks @joshfarrant! - - Fixed a bug where the Bento leadingVisual prop wouldn't honour the provided size.

  • Updated the Card.Icon internal implementation to use the new Icon component.

• #810 774b91b0 Thanks @rezrah! - Added new background customization options to CTABanner

  New props:

  • backgroundColor
  • backgroundImageSrc
  • backgroundImageSize
  • backgroundImagePosition

  Also added variant prop to CTABanner.Description, to achieve higher contrast when using background images.

  🔗 See the documentation for more details and usage examples.

• #805 2928995b Thanks @rezrah! - Removed negative margin from RiverStoryScroll when reduced-motion user preference is enabled

@primer/[email protected]

Minor Changes

• #798 af335d37 Thanks @joshfarrant! - ⚠️ Breaking change: Removed all Card-icon-background/color tokens (eg --brand-Card-icon-background-blue, --brand-Card-icon-color-orange)

@primer/[email protected]

Minor Changes

• #779 b5c291e2 Thanks @joshfarrant! - Accessibility improvements to the FormControl.Hint component.

  • FormControl.Hint is now automatically associated with the form field using aria-describedby.
  • Improvements to the styling of FormControl.Hint when used alongside a Checkbox.

Patch Changes

• #791 8105b6a3 Thanks @joshfarrant! - Increased spacing between River components on narrow viewports from 28px to 36px

• #776 06fd8476 Thanks @joshfarrant! - Added aria-describedby attribute to leading/trailing text and visuals in TextInput component

• #781 ec6ffc36 Thanks @joshfarrant! - - Card component no longer expands to full width when fullWidth={false}

  • Card component no longer renders duplicate borders in dark mode when hasBorder={true}

• #774 a6baf41d Thanks @joshfarrant! - Fixed issue where Button component would reflow and break over multiple lines when its text content exceeded the viewport width.

  ⚠️ Breaking changes to the following design tokens:

  - --brand-control-medium-paddingBlock
  + --brand-control-medium-paddingBlock-normal

  - --brand-control-large-paddingBlock
  + --brand-control-large-paddingBlock-normal

  Additional tokens added:

  + --brand-control-medium-paddingBlock-condensed
  + --brand-control-large-paddingBlock-condensed

• #728 c6ee839e Thanks @MelissaPastore! - Fixed a bug with the Checkbox component where validation messages wouldn't be positioned correctly.

• #768 0270f06d Thanks @danielguillan! - Improves spacing of RiverBreakout content

• #797 b3e34be5 Thanks @rezrah! - Fixed visual bug in RiverStoryScroll layout on narrow viewports. Also adjusted positioning of the pagination to be closer to the scrolled items.

• #760 6be1118d Thanks @joshfarrant! - Fixed a bug where passing a className to Hero.Label or Hero.Eyebrow would replace the default class.

• #766 d10dc535 Thanks @danielguillan! - Adds internal paddings to River content on larger viewports

• #767 299ad371 Thanks @danielguillan! - - Update the order of River children to ensure an accessible markup structure.

  • On narrow viewports, the content and visuals are now flipped, with the visuals always placed first to enhance visual hierarchy.

    ⚠️ This may introduce a visual breaking change, whereby the visual is now displayed earlier in the page than originally intended. Please manually review content adjacent to the River components for correctness.

• #785 ec7d4023 Thanks @joshfarrant! - Fixed bug in Card component which caused the focus outline to not display when in dark-mode

@primer/[email protected]

Minor Changes

• #774 a6baf41d Thanks @joshfarrant! - Fixed issue where Button component would reflow and break over multiple lines when its text content exceeded the viewport width.

  ⚠️ Breaking changes to the following design tokens:

  - --brand-control-medium-paddingBlock
  + --brand-control-medium-paddingBlock-normal

  - --brand-control-large-paddingBlock
  + --brand-control-large-paddingBlock-normal

  Additional tokens added:

  + --brand-control-medium-paddingBlock-condensed
  + --brand-control-large-paddingBlock-condensed

Patch Changes

• #791 8105b6a3 Thanks @joshfarrant! - Increased spacing between River components on narrow viewports from 28px to 36px

• #769 41531950 Thanks @danielguillan! - Adjust text 800 line height