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

@primer/[email protected]

Minor Changes

• #503 3098b3b Thanks @joseph-lozano! - Added SkipToContent button to SubdomainNavBar

• #548 f0a581c Thanks @rezrah! - Added new SubNav component

  Example:

  <SubNav>
    <SubNav.Heading>Features</SubNav.Heading>
    <SubNav.Link href="#">Actions</SubNav.Link>
    <SubNav.Link href="#">Packages</SubNav.Link>
    <SubNav.Link href="#" aria-current="page">
      Copilot
    </SubNav.Link>
    <SubNav.Link href="#">Code review</SubNav.Link>
  </SubNav>

  🔗 See the documentation for more examples

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #541 392d4c4 Thanks @danielguillan! - Adds hover states to the social icon links in MinimalFooter

• #542 79fa589 Thanks @rezrah! - - Added new size option to ActionMenu

  • Improved, automatic overlay positioning dependent on the action menu's location in the viewport.

  Example:

  <>
    <ActionMenu size="small">
      <ActionMenu.Button>Small</ActionMenu.Button>
      <ActionMenu.Overlay aria-label="Menu items">
        <ActionMenu.Item value="Item 1">Item 1</ActionMenu.Item>
        <ActionMenu.Item value="Item 2">Item 2</ActionMenu.Item>
      </ActionMenu.Overlay>
    </ActionMenu>
    <ActionMenu size="medium">
      <ActionMenu.Button>Medium</ActionMenu.Button>
      <ActionMenu.Overlay aria-label="Menu items">
        <ActionMenu.Item value="Item 1">Item 1</ActionMenu.Item>
        <ActionMenu.Item value="Item 2">Item 2</ActionMenu.Item>
      </ActionMenu.Overlay>
    </ActionMenu>
  </>

  🔗 See the documentation for more examples

@primer/[email protected]

@primer/[email protected]