@primer/[email protected]

See documentation for this release

Patch Changes

• #1025 667d820 Thanks @joshfarrant! - Removed aria-describedby from AnchorNav.Link component.

• #1015 1afeeae Thanks @danielguillan! - Fixed an issue in ActionMenu where anchor links in split-button mode were only clickable on the text. Now, the clickable area covers the full width and height of the item.

• #1024 97b7a97 Thanks @joshfarrant! - Improved accessibility of SubNav component when no active link — denoted by aria-current="page" — is present.

  • Hide last separator (on large viewports only) when there is no active link
  • Set a fallback accessible label on the overlay toggle when there is no active link

• #1020 584280e Thanks @joshfarrant! - ActionMenu bugfixes:

  • Fixed a bug in ActionMenu.Item where provided onClick and onKeyDown handlers wouldn't be called.
  • Fixed a bug which allowed Tab to cycle through the list of ActionMenu.Item elements which resulted in unpredictable focus behaviour. The intended way to navigate through the list is by using the arrow keys.

• #1012 ce945a2 Thanks @joshfarrant! - Removed the Checkbox and Radio components' built-in <label> as it was only used for styling and would result in inputs having two associated labels when used inside a FormControl.

• #1017 dd93551 Thanks @joshfarrant! - Increased the touch target size of SubNav.SubMenu toggle button

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #994 61a1fa6 Thanks @joshfarrant! - MinimalFooter now respects the ordering of the socialLinks prop when rendering social links, e.g. <MinimalFooter socialLinks={['x', 'tiktok', 'youtube']} /> will render the links in that order.

  Note: This may constitute a visual breaking change if you were relying on the social link order to not be respected.

• #920 2af9c78 Thanks @joshfarrant! - - Added play/pause button to LogoSuite component.

  • Removed "idle" value from LogoSuite.LogoBar component's marqueeSpeed prop.
    • This prop was introduced to enable custom play/pause buttons but is no longer necessary as the play/pause button is now built into the component.

Patch Changes

• #1008 91073c0 Thanks @danielguillan! - Added missing types in PricingOptions.FeatureListGroupHeading

• #994 61a1fa6 Thanks @joshfarrant! - - Increased minimum touch target size of social icons in the MinimalFooter component to 24px.

  • Increased contrast of social icons in the MinimalFooter component to over 3:1.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Minor Changes

• #978 d33f300 Thanks @danielguillan! - ⚠️ Breaking changes

  The PricingOptions.FeatureListHeading component has been renamed to PricingOptions.FeatureListGroupHeading. PricingOptions.FeatureListHeading is now used to optionally customize the heading of the PricingOptions feature list accordion.

  - <PricingOptions.FeatureListHeading />
  + <PricingOptions.FeatureListGroupHeading />

  Full example with customizable accordion heading:,

  <PricinOptions>
    <PricingOptions.FeatureList>
      <PricingOptions.FeatureListHeading>My custom title</PricingOptions.FeatureListHeading>
      <PricingOptions.FeatureListGroupHeading>Feature set 1</PricingOptions.FeatureListGroupHeading>
      <PricingOptions.FeatureListItem>Feature A</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Feature B</PricingOptions.FeatureListItem>
      <PricingOptions.FeatureListItem>Feature C</PricingOptions.FeatureListItem>
    </PricingOptions.FeatureList>
  </PricinOptions>

Patch Changes

• #1002 84d8e52 Thanks @danielguillan! - - Updated styles and layout in PricingOptions for a more condensed design.

  • Added new variant options to support gradient styling in PricingOptions: default-gradient and cards-gradient.

  Usage example:

  <PricingOptions variant="default-gradient">{/*...*/}</PricingOptions>

• #1003 ab4d480 Thanks @joshfarrant! - Fixed an accessibility issue in the SubNav component where items within the SubNav.SubMenu weren't accessible to assistive technologies on narrow viewports.

• #1001 0adad57 Thanks @rezrah! - Add support for deeper link nesting in SubNav

  Use SubNav.SubHeading to present another tier of content between the SubNav.Heading and SubNav.Link sub-components.

  Usage example:

  <SubNav>
    <SubNav.Heading href="#">Top-level page</SubNav.Heading>
    <SubNav.SubHeading href="#">Sub-level page</SubNav.SubHeading>
    <SubNav.Link href="#">Child page</SubNav.Link>
    <SubNav.Link href="#">Child page</SubNav.Link>
    <SubNav.Link href="#">Child page</SubNav.Link>
    <SubNav.Link href="#">Child page</SubNav.Link>
  </SubNav>

• #976 4cdb794 Thanks @danielguillan! - Added a new 350 size option to the Text component.

  E.g.

  <Text size="350">A new text size available</Text>

• #976 4cdb794 Thanks @danielguillan! - Increased the default text size for the Hero description and set its default font weight to "normal".

• #1005 dcfdb2c Thanks @rezrah! - Updated default background color in dark mode from #0d1117 (dark gray) to #000000 (black) across all components as part of a revised visual design strategy.

• #998 fcade91 Thanks @rezrah! - Fixed a forwardRef bug in Checkbox. An external ref can now be passed correctly to the component.

@primer/[email protected]

Patch Changes

• #976 4cdb794 Thanks @danielguillan! - Added a new 350 step to the typographic scale.

  E.g.

  .Some-text {
    font-weight: var(--brand-text-weight-350);
    font-size: var(--brand-text-size-350);
    line-height: var(--brand-text-lineHeight-350);
    letter-spacing: var(--brand-text-letterSpacing-350);
  }

• #1002 84d8e52 Thanks @danielguillan! - - Updated styles and layout in PricingOptions for a more condensed design.

  • Added new variant options to support gradient styling in PricingOptions: default-gradient and cards-gradient.

  Usage example:

  <PricingOptions variant="default-gradient">{/*...*/}</PricingOptions>

• #1005 dcfdb2c Thanks @rezrah! - Updated dark mode color values for canvas.default and black.0

  - --base-color-scale-black-0: #0d1117
  + --base-color-scale-black-0: #000000

  - --brand-color-canvas-default: var(--base-color-scale-gray-9)
  + --brand-color-canvas-default: var(--base-color-scale-black-0)

@primer/[email protected]

Minor Changes

• #991 c083863 Thanks @rezrah! - Updated the underlying HTML elements in the Statistic component for improved accessibility. Now a paragraph by default, where it was previously a heading. It can optionally also be set as a <span> using the as prop.

  ⚠️ Breaking changes:

  • stretch prop in Statistic.Heading has been removed.
  • as prop now accepts p and span only
  • size prop now accepts 1000, 900, 800, 700, 600, 500, 400, 300, 200

• 05aee45 Thanks @rezrah! - The torchlight visual effect on dark mode Card components is now optional. The new default effect is now similar to its light mode counterpart.

  To re-enable the torchlight effect, use variant="torchlight". Note this effect continues to only work in dark color modes.

  <ThemeProvider colorMode="dark">
    <Card variant="torchlight" />
  </ThemeProvider>

Patch Changes

• #989 bb24a54 Thanks @joshfarrant! - Allow hovered SubNav.SubMenu menus to be closed using Escape key

• #986 c9f10ec Thanks @rezrah! - Visual updates to Button and ActionMenu components.

  • secondary button variants now feature lighter border colors.
  • subtle button variants now feature a semi-transparent background color in rest state.
  • accent button variants in dark mode now use a darker hue for parity with its GitHub product counterpart.

• #991 c083863 Thanks @rezrah! - Additional size options available in the Text component: 800, 900, 1000.

• #985 6364954 Thanks @joshfarrant! - The focus outline color of SubNav links is now set to var(--brand-color-focus);

• #961 b43d15d Thanks @danielguillan! - Noop update to smooth-scrolling behavior in main.css. Previous scroll-behavior: smooth; is still applied, but location in the compiled stylesheet has been updated.

• #961 b43d15d Thanks @danielguillan! - Patched a type mismatch between React 18.x and 19.x for inert prop in RiverAccordion component. Refer to the following source file for more details.

• #961 b43d15d Thanks @danielguillan! - Updated IDE to use the full container width.

@primer/[email protected]

Patch Changes

• #986 c9f10ec Thanks @rezrah! - Visual updates to Button and ActionMenu components.

  • secondary button variants now feature lighter border colors.
  • subtle button variants now feature a semi-transparent background color in rest state.
  • accent button variants in dark mode now use a darker hue for parity with its GitHub product counterpart.

@primer/[email protected]

Patch Changes

• #972 663a4c1 Thanks @rezrah! - Add mode="split-button" variant to ActionMenu component

• #972 663a4c1 Thanks @rezrah! - Removed default arrow visibility in the ButtonGroup and CTABanner components.

  Use hasArrow on individual Button elements to restore the previous arrow appearance.

• #972 663a4c1 Thanks @rezrah! - ActionMenu overlay alignment now defaults to end, where it was previously start. Use the menuAlignment prop in ActionMenu to restore previous behavior if required.

@primer/[email protected]

@primer/[email protected]