@primer/react-brand@0.40.1

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/brand-primitives@0.40.1

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/react-brand@0.40.0

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/brand-primitives@0.40.0

@primer/brand-primitives@0.40.0

@primer/react-brand@0.39.0

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/brand-primitives@0.39.0

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);

@primer/react-brand@0.38.0

See documentation for this release

Minor Changes

• #691 34e7aa8b Thanks @joshfarrant! - > Warning

  This update contains a breaking visual change to the LogoSuite component. LogoSuite components without a specified variant prop will now automatically apply either emphasis or muted styles depending on the number of logos in the LogoBar.

  • Added new default behaviour to the variant prop of the LogoSuite component. If variant is undefined then either emphasis or muted styles are automatically applied depending on the number of logos in the LogoBar. Five or fewer logos apply the emphasis style, while six or more use the muted style.
  • Reduced LogoSuite size on mobile viewports.

Patch Changes

• #694 5f1181be Thanks @joshfarrant! - Improved screen reader accuracy of column indexes in ComparisonTable.

@primer/brand-primitives@0.38.0

Minor Changes

• #691 34e7aa8b Thanks @joshfarrant! - > Warning

  This update contains a breaking visual change to the LogoSuite component. LogoSuite components without a specified variant prop will now automatically apply either emphasis or muted styles depending on the number of logos in the LogoBar.

  • Added new default behaviour to the variant prop of the LogoSuite component. If variant is undefined then either emphasis or muted styles are automatically applied depending on the number of logos in the LogoBar. Five or fewer logos apply the emphasis style, while six or more use the muted style.
  • Reduced LogoSuite size on mobile viewports.

@primer/react-brand@0.37.0

Minor Changes

• #684 e382a491 Thanks @danielguillan! - Extend Hero.Heading and Heading.Description length.

  Warning
  This change can lead to reduced contrast in certain situations. Please manually review all instances of the Hero - particularly those that use a background image - to ensure that minimum contrast requirements are met.

Patch Changes

• #695 2bb68ea7 Thanks @joshfarrant! - ComparisonTable featured columns now identify themselves to screen readers by appending the text featured to the column title. This text can be customized using the visuallyHiddenFeaturedLabel prop.

• #677 c76c8c87 Thanks @rezrah! - Removed redundant styles in default Section and BreakoutBanner components

• #688 55a353c7 Thanks @rezrah! - Added experimental TextRevealAnimation component.

• #688 55a353c7 Thanks @rezrah! - Remove strict, custom typings for Testimonial.Quote

• #679 30f717dd Thanks @joshfarrant! - Fixed an issue where SubNav submenus were not accessible through keyboard navigation

@primer/brand-primitives@0.37.0

@primer/brand-primitives@0.37.0