@primer/react-brand@0.36.0

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

@primer/brand-primitives@0.36.0

@primer/react-brand@0.35.0

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

Patch Changes

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

@primer/react-brand@0.34.3

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

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

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

@primer/brand-primitives@0.34.2

@primer/react-brand@0.34.1

Patch Changes

• #606 66c3049 Thanks @rezrah! - Added new fullWidth prop to Card component for easier placement in narrow viewports. This elimates the requirement for end-users to author additional custom CSS to achieve the same effect.

  <Card fullWidth href="https://github.com">
    <Card.Image />
    <Card.Heading />
    <Card.Description />
  </Card>

• #596 ae20ce8 Thanks @stamat! - Improved keyboard navigation for tab lists in the FAQ Groups component. Now features focus trapping, and up and down keypress navigation as specified in the ARIA tab panel pattern.

• #594 d0fbb4a Thanks @stamat! - In Bento, the Bento.Visual will now respect the aspect ratio of the original image instead of cropping it.

  Individual Bento sections will now expand beyond their initial size to fit the content within them.

  If you've previously used this component, please verify that this change doesn't alter the flow of your document.

• #611 7e90641 Thanks @joshfarrant! - Resolved an issue with the AnchorNav component where focus would become trapped on mobile

• #616 f12b8b3 Thanks @rezrah! - Updated all instances of <Text /> in River components to use muted color instead of default by default, for improved visual hierarchy.

  Warning
  This is a visual breaking change to the River component. This can lead to reduced contrast in some situations, so please review all usages to ensure minimum contrast requirements are met.

• #597 1c4a0f3 Thanks @stamat! - Added idle speed to LogoSuite marquee animation

• #614 67d0af9 Thanks @rezrah! - Added multiline code block support to Prose using <pre> and <code> HTML elements.

• #599 e21a6b1 Thanks @rfearing! - Added raster image support to LogoSuite component

• #615 c8d9117 Thanks @rezrah! - Added pageAttributesBuilder prop to Pagination component to enable forwarding of custom data attributes to paged items.

  <Pagination
    pageCount={3}
    currentPage={1}
    pageAttributesBuilder={n => {
      return {
        'data-custom-attribute': `custom-attribute-${n}`,
      }
    }}
  />

  🔗 See documentation for more details

• #614 67d0af9 Thanks @rezrah! - Fixed incorrect background color applied to inline <code> instances in Prose in dark color mode

• #610 cf7e09e Thanks @rezrah! - Fixed line wrapping in SubNav.Heading

@primer/brand-primitives@0.34.1

@primer/brand-primitives@0.34.1