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

@primer/[email protected]

Patch Changes

• #534 f196cea Thanks @rezrah! - Added x variant to UnorderedList, and leadingVisual, variant, leadingVisualAriaLabel and leadingVisualFill props to list items.

  Example:

  <UnorderedList variant="x">
    <UnorderedList.Item leadingVisual={CheckIcon} leadingVisualFill="green">
      Check icon override in green
    </UnorderedList.Item>
    <UnorderedList.Item leadingVisualFill="orange">X icon in orange</UnorderedList.Item>
    <UnorderedList.Item leadingVisualFill="red">X icon in red</UnorderedList.Item>
    <UnorderedList.Item leadingVisualFill="blue">X icon in blue</UnorderedList.Item>
    <UnorderedList.Item leadingVisualFill="purple">X icon in purple</UnorderedList.Item>{' '}
    <UnorderedList.Item variant="muted">Muted text color</UnorderedList.Item>
  </UnorderedList>

@primer/[email protected]

@primer/[email protected]