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

@primer/[email protected]

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/[email protected]

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/[email protected]

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/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Minor Changes

• #654 ca967a49 Thanks @danielguillan! - Added Section component

  Example:

  <Section
    paddingBlockStart="condensed"
    paddingBlockEnd="spacious"
    backgroundImage="my-background.png"
    backgroundImageSize="cover"
    backgroundImagePosition="top center"
  >
    {/* Section content */}
  </Section>

  🔗 See the documentation for more examples

• #664 ccd37a50 Thanks @rezrah! - PricingOptions now applies the subtle background color by default. This is to ensure adequate contrast on a standard canvas-default background.

  To apply the previous default background color (or custom color), you may override a new design token that has been provided for this reason: --brand-PricingOptions-item-bgColor.

• #672 61d72605 Thanks @rezrah! - New breakout banner component generally available

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

  <BreakoutBanner>
    <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
    <BreakoutBanner.LinkGroup>
      <Link href="#">Primary action</Link>
    </BreakoutBanner.LinkGroup>
  </BreakoutBanner>

  🔗 Read the documentation for usage guidelines and examples

Patch Changes

• #659 6f2949b5 Thanks @joshfarrant! - Added tabAttributes prop to FAQGroup component. This prop is used to set arbitrary attributes on the tabs rendered by the FAQGroup component.

  For example, the below code will add data-analytics="tab-0" to the first tab and data-analytics="tab-1" to the second tab.

  <FAQGroup
    tabAttributes={(children, index) => ({
      'data-analytics': `tab-${index}`,
    })}
  >
    <FAQGroup.Heading>Frequently asked questions</FAQGroup.Heading>
    <FAQ>
      <FAQ.Heading>Using GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>...</FAQ.Item>
      <FAQ.Item>...</FAQ.Item>
      <FAQ.Item>...</FAQ.Item>
    </FAQ>
  
    <FAQ>
      <FAQ.Heading>About GitHub Enterprise</FAQ.Heading>
      <FAQ.Item>...</FAQ.Item>
      <FAQ.Item>...</FAQ.Item>
      <FAQ.Item>...</FAQ.Item>
    </FAQ>
  </FAQGroup>

• #668 9cb14ed3 Thanks @joshfarrant! - Fixed misalignment of FormControl.Validation icon

• #667 3010db67 Thanks @joshfarrant! - Fixed bug with VideoPlayer component where a '0' could be seen in the bottom-left corner during the first render

• #669 67fdd2d6 Thanks @rezrah! - Fixed inability to forward name props to the Select component when used inside a FormControl.

• #660 8f8181b7 Thanks @rezrah! - Fixed width of the focus outline in the Select component to fill the entire width of the control when fullWidth option has bene applied.

@primer/[email protected]

@primer/[email protected]