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

@primer/[email protected]

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/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #547 9cef031 Thanks @mperrotti! - Adds a Tooltip component.

  Example:

  <Tooltip text="Hello, Tooltip!">
    <Button>Hover me</Button>
  </Tooltip>

Patch Changes

• #588 a600e38 Thanks @rezrah! - Added larger row gaps in Grid at wider breakpoints, which were previously missing. Now consistent with column gaps.

• #587 16b87f1 Thanks @joshfarrant! - Add trailingComponent prop to CTABanner

• #588 a600e38 Thanks @rezrah! - Added borderRadius prop to Image component.

• #588 a600e38 Thanks @rezrah! - Added new monospace option to Heading and Text font property.

• #584 682df70 Thanks @mgriffin! - Adds a missing space around font-size calculation in the IDE component

• #588 a600e38 Thanks @rezrah! - Added minimal Card variant, allowing for alternative presentation, with minimal internal padding.

  <Card ctaText="Discover how" href="https://github.com" variant="minimal">
    <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
    <Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description>
  </Card>

• #588 a600e38 Thanks @rezrah! - - Reduced sizes for all headings in Prose by two positions on the type scale. E.g. h2 previously 64px, now 40px.

  • Added editorial variant to Prose for alternative presentation. Provides more relaxed spacing and presentation for child elements.

• #585 a033995 Thanks @MelissaPastore! - Update SubNav stylesheet to exclude Subnav links with aria-current set to "false" from active link styling

@primer/[email protected]

Minor Changes

• #547 9cef031 Thanks @mperrotti! - Adds a Tooltip component.

  Example:

  <Tooltip text="Hello, Tooltip!">
    <Button>Hover me</Button>
  </Tooltip>

@primer/[email protected]

Minor Changes

• #575 89d6590 Thanks @rezrah! - New pagination component generally available

  <Pagination pageCount={15} currentPage={5} />

  🔗 Read the documentation for more examples

• #574 95f15ba Thanks @rezrah! - New breadcrumbs component generally available

  <Breadcrumbs>
    <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/copilot/chat" selected>
      Chat
    </Breadcrumbs.Item>
  </Breadcrumbs>

  🔗 Read the documentation for more examples

• #555 3980daa Thanks @rezrah! - Added new IDE component

  Example:

  <IDE alternativeText="description of the IDE, including any animations for users of assistive technologies">
    <IDE.Editor />
    <IDE.Chat />
  </IDE>

  🔗 See the documentation for more examples

Patch Changes

• #568 40a129d Thanks @rezrah! - Added support for optional Button and sub menu's in SubNav component.

  Also added fullWidth prop to optionally remove the default component padding.

  <SubNav>
    <SubNav.Heading href="#">Heading</SubNav.Heading>
    <SubNav.Link href="#">Link</SubNav.Link>
    <SubNav.Link href="#">Link</SubNav.Link>
    <SubNav.Link href="#">Link</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Link
      <SubNav.SubMenu>
        <SubNav.Link href="#">Link feature one</SubNav.Link>
        <SubNav.Link href="#">Link feature two</SubNav.Link>
        <SubNav.Link href="#">Link feature three</SubNav.Link>
        <SubNav.Link href="#">Link feature four</SubNav.Link>
      </SubNav.SubMenu>
    </SubNav.Link>
    <SubNav.Link href="#">Link</SubNav.Link>
    <SubNav.Link href="#">Link</SubNav.Link>
    <SubNav.Action href="#" variant="secondary">
      Optional CTA
    </SubNav.Action>
  </SubNav>

• #566 eaeb50e Thanks @joshfarrant! - Adjusted block padding of small button controls from 12px to 8px.

  This change affects all small size Button and ActionMenu instances.

• #575 89d6590 Thanks @rezrah! - Added none optiona to arrowDirection prop of Link component. This value removes the arrow entirely.

  <Link arrowDirection="none" {...rest} />

• #573 e76c92b Thanks @joshfarrant! - Add trailingComponent prop to Hero

@primer/[email protected]

Patch Changes

• #566 eaeb50e Thanks @joshfarrant! - Adjusted block padding of small button controls from 12px to 8px.

  This change affects all small size Button and ActionMenu instances.

@primer/[email protected]

Minor Changes

• #530 a9f0c1a Thanks @danielguillan! - New pricing options component now generally available

  <PricingOptions>
    <PricingOptions.Item>
      <PricingOptions.Label>Recommended</PricingOptions.Label>
      <PricingOptions.Heading>Copilot</PricingOptions.Heading>
      <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
      <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
        10
      </PricingOptions.Price>
      <PricingOptions.FeatureList>
        <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
      </PricingOptions.FeatureList>
      <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
      <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
    </PricingOptions.Item>
    <PricingOptions.Item>
      <PricingOptions.Label>Recommended</PricingOptions.Label>
      <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
      <PricingOptions.Description>
        Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
        Enterprise Cloud.
      </PricingOptions.Description>
      <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
        39
      </PricingOptions.Price>
      <PricingOptions.FeatureList>
        <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
        <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
      </PricingOptions.FeatureList>
      <PricingOptions.PrimaryAction href="/waitlist">Join waitlist</PricingOptions.PrimaryAction>
    </PricingOptions.Item>
  </PricingOptions>

  🔗 Read the documentation for more examples

Patch Changes

• #553 0fb9052 Thanks @rezrah! - Use default text color in labels that feature gradients

• #560 9b150a7 Thanks @rezrah! - Removed redundant spacing on SubNav menu toggle button

@primer/[email protected]

@primer/[email protected]