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

@primer/[email protected]

Minor Changes

• #634 598a2c5d Thanks @joshfarrant! - ⚠️ This update contains a breaking change.

  Refactored VideoPlayer component to make it more modular and customisable.

  • The showTitle prop has been renamed to visuallyHiddenTitle and inverted.
    • This prop hides the title visually, but keeps it accessible to screen readers.
    • Where you previously passed showTitle={false}, you should now pass visuallyHiddenTitle={true}.
  • The branding prop has been renamed to showBranding.
  • Individual video controls can be optionally hidden by setting any of the showPlayPauseButton, showSeekControl, showCCButton, showMuteButton, showVolumeControl, and showFullScreenButton props to false.
  • A custom play icon can be provided using the playIcon prop.

Patch Changes

• #623 8727997c Thanks @rezrah! - Added fullWidth prop to Hero.Heading to remove default max-width constraint, and enabling easier placement using a parent Grid.

• #623 8727997c Thanks @rezrah! - Added RiverStoryScroll component, an experimental layout component that wraps around existing River patterns.

  <RiverStoryScroll>
    <River>
      <River.Visual />
      <River.Content />
    </River>
    <River>
      <River.Visual />
      <River.Content />
    </River>
    <River>
      <River.Visual />
      <River.Content />
    </River>
  </RiverStoryScroll>
  

  🔗 See Storybook for more examples.

• #647 39e00cfa Thanks @joshfarrant! - Added isExternal prop to SubdomainNavBar.Link component. When isExternal is true, a link-external icon is displayed next to the link.

• #644 b3f1f364 Thanks @danielguillan! - Improve the layout responsiveness of SubdomainNavBar

• #639 ebf92224 Thanks @stamat! - Fix cut AnchorNav action button outline due the introduced overflow auto

• #646 81e983e6 Thanks @rezrah! - Adds responsive toggling of feature lists in the PricingOptions component.

  PricingOptions.FeatureList can now be collapsed at regular and wide viewports.

  <PricingOptions>
    <PricingOptions.Item>
      <PricingOptions.FeatureList expanded={{narrow: true, regular: true, wide: true}} />
    </PricingOptions.Item>
  </PricingOptions>
  

• #623 8727997c Thanks @rezrah! - Added --brand-CTABanner-bgColor token to CTABanner for easier customisation of the banners background color, when enabled.

@primer/[email protected]

Patch Changes

• #623 8727997c Thanks @rezrah! - Added --brand-CTABanner-bgColor token to CTABanner for easier customisation of the banners background color, when enabled.

@primer/[email protected]

See documentation for this release

Patch Changes

• #632 77b98a4c Thanks @joshfarrant! - Partial revert of changes to the LogoSuite logobar elements.

  To allow optimal treatment of logos based on their respective file formats, <img> tag will continue be styled with a CSS filter, whereas inline <svg> elements will be styled with CSS fill.

• #637 8887dc37 Thanks @joshfarrant! - Fixes previously non-functional aspectRatio prop on Image component

• #636 3a76bfba Thanks @rezrah! - Added Statistic component.

  Use the statistic component to display concise numerical information.

  <Statistic>
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  

  See the documentation for more usage examples.

@primer/[email protected]

Patch Changes

• #632 77b98a4c Thanks @joshfarrant! - Partial revert of changes to the LogoSuite logobar elements.

  To allow optimal treatment of logos based on their respective file formats, <img> tag will continue be styled with a CSS filter, whereas inline <svg> elements will be styled with CSS fill.

@primer/[email protected]

Patch Changes

• #595 d0c1630 Thanks @stamat! - AnchorNav accessibility improvements.

  • Removed JS-augmented scrolling behavior in AnchorNav, reverting to browser-defaults.
  • Fixed zoom-related bug where certain anchor nav items were not visible.

• #629 03237fa Thanks @stamat! - Updated FAQGroup autofocusing conditions

• #622 3450e4b Thanks @joshfarrant! - Improved keyboard navigation in mobile AnchorNav component. Arrow key navigation has been replaced with tab navigation.

• #630 809960b Thanks @joshfarrant! - In Image component, the height prop is now correctly forwarded to the underlying img element, when using `as="picture" customization.

@primer/[email protected]

@primer/[email protected]