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

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