Skip to content

@primer/[email protected]
Compare
Choose a tag to compare
@primer-css primer-css released this 02 Aug 11:06
· 129 commits to main since this release
@primer/[email protected]
7da3471
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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.

Assets 2
Loading