@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

@primer/[email protected]

See documentation for this release

Patch Changes

• #754 d061705c Thanks @joshfarrant! - The RiverStoryScroll component now enforces that its children must be River components through type checking, instead of relying on a run-time check.

• #739 24bd6338 Thanks @joshfarrant! - Fixed a bug in the SubNav component where the submenu toggle was rendered as an empty button on mobile viewports.

• #736 73cf706e Thanks @lukasoppermann! - Replaced the --brand-VideoPlayer-tooltip-padding design token in the VideoPlayer component with two new tokens that separately account for padding along each axis: --brand-VideoPlayer-tooltip-padding-inline and --brand-VideoPlayer-tooltip-padding-block.

  Note: This update does not introduce any visual changes. Please update any manual references to --brand-VideoPlayer-tooltip-padding to use the new tokens.

  - --brand-VideoPlayer-tooltip-padding
  + --brand-VideoPlayer-tooltip-padding-inline
  + --brand-VideoPlayer-tooltip-padding-block

• #722 99328ce0 Thanks @danielguillan! - Added support for <b> elements to Bento, RiverBreakout, SectionIntro, Timeline, and Testimonial components, as <em> is semantically interpreted by screen readers for emphasis, while <b> allows duo-tone text to function purely as a visual decoration.

  Usage example:

  <SectionIntro>
    <SectionIntro.Heading>
      <b>Expressive headline</b> about an exclusive set of features.
    </SectionIntro.Heading>
  </SectionIntro>

  Important
  The updated components still support the use of <em> elements for backward compatibility, but moving forward, the only recommended element for emphasized text is <b>.

• #733 2dcb9bad Thanks @danielguillan! - Fixes Label component multiline reflow

• #746 4af8db14 Thanks @joshfarrant! - Fixed a bug where Card components rendered within a dark colour mode would not take the full width of their container.

@primer/[email protected]

Patch Changes

• #736 73cf706e Thanks @lukasoppermann! - Replaced the --brand-VideoPlayer-tooltip-padding design token in the VideoPlayer component with two new tokens that separately account for padding along each axis: --brand-VideoPlayer-tooltip-padding-inline and --brand-VideoPlayer-tooltip-padding-block.

  Note: This update does not introduce any visual changes. Please update any manual references to --brand-VideoPlayer-tooltip-padding to use the new tokens.

  - --brand-VideoPlayer-tooltip-padding
  + --brand-VideoPlayer-tooltip-padding-inline
  + --brand-VideoPlayer-tooltip-padding-block

• #738 f6bab573 Thanks @lukasoppermann! - Fixed line formatting in functional/size/size-coarse.css and functional/size/size-fine.css

  E.g.

  -    @media (pointer: coarse) { :root {
  -  --brand-controlStack-medium-gap-auto: var(--base-size-12);
  -  --brand-controlStack-small-gap-auto: var(--base-size-16);
  -  --brand-control-minTarget-auto: var(--base-size-44);
  -}}
  +@media (pointer: coarse) {
  +  :root {
  +    --brand-controlStack-medium-gap-auto: var(--base-size-12);
  +    --brand-controlStack-small-gap-auto: var(--base-size-16);
  +    --brand-control-minTarget-auto: var(--base-size-44);
  +  }
  +}

@primer/[email protected]

See documentation for this release

Minor Changes

• #690 98fa3a2a Thanks @rezrah! - Improved React 19 compatibility by treating react-dom/client and react/jsx-runtime as external dependencies of the project. This change resolved a reported conflict with the latest React 19 release candidate.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #717 24fc6d02 Thanks @rezrah! - Improved a11y labelling in various components.

  Please note these changes could affect any behavioral tests, which rely on accessible matchers such as getByRole.

  • SubdomainNavBar search button aria-label changed from 'search' to 'Toggle search bar'
  • SubdomainNavBar removal of unnecessary aria-label 'global breadcrumb'
  • Checkbox addition of new label for checked state icon as 'Checkmark'
  • Checkbox addition of new label for indeterminate state icon as 'Dash icon'

• #707 715dfbb3 Thanks @rezrah! - New Footnotes component generally available

  import {Footnotes} from '@primer/react-brand'

  <Footnotes>
    <Footnotes.Item>There are now 100 million developers around the world using GitHub.</Footnotes.Item>
  </Footnotes>

  🔗 Read the documentation for usage guidelines and examples

Patch Changes

• #711 1cde8ef2 Thanks @joshfarrant! - Updated SubNav links and submenus to use ul and li elements — instead of div elements — to communicate the hierarchy of the navigation to assistive technologies.

• #700 47908f1e Thanks @rezrah! - ActionMenu button no longer truncates longer labels. Now follows WCAG criterion around text reflow.

• #714 fb1980b1 Thanks @rezrah! - Hide paged items in Pagination component on narrow viewports to prevent horizontal scrolling and offer improved accessibility by default.

  Use showPages to re-enable paged items if required:

  <Pagination showPages />

@primer/[email protected]

Minor Changes

• #717 24fc6d02 Thanks @rezrah! - Change to xxlarge breakpoint and the addition of two new base scale size tokens.

  Outcome of an upgrade to Primer Primitives v9 release.

  + --base-size-2: 0.125rem;

  + --base-size-6: 0.375rem;

  - --brand-breakpoint-xxlarge: 90rem;
  + --brand-breakpoint-xxlarge: 87.5rem;

  - @custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
  + @custom-media --brand-viewportRange-wide-viewport (min-width: 87.5rem);