@primer/[email protected]

Minor Changes

• #237 51e383d Thanks @rezrah! - Added Grid component

  Use Grid to create flexible and responsive grid-based layouts

  <Grid>
    <Grid.Column span={4}></Grid.Column>
    <Grid.Column span={4}></Grid.Column>
    <Grid.Column span={4}></Grid.Column>
  </Grid>

  🔗 See the documentation for more details and usage examples.

• #229 2359c0c Thanks @JoshBowdenConcepts! - Added Image component

  Usage example:

  <Image src="/path/to/your/image.jpg" alt="Required alternative text" />

  See the documentation or Storybook for more usage examples.

Patch Changes

• #243 9c479f9 Thanks @josepmartins! - Added support for [Octicons](https://primer.style/design/foundations/icons) in the Card component. The new Card.Icon child is optional, and can be used alongside a Card.Label. Icon color and background can be customized using the color and hasBackground prop respectively.

  <Card href="https://github.com">
    <Card.Icon icon={CopilotIcon} color="purple" hasBackground />
    <Card.Heading>Code search & code view</Card.Heading>
    <Card.Description>
      Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
    </Card.Description>
  </Card>

• #246 e66ffe0 Thanks @TylerJDev! - Fixes zoom issue in SubdomainNavBar where secondary CTA link would disappear at 200% zoom, or specified width

• #237 51e383d Thanks @rezrah! - Improved type defintion accuracy for SubdomainNavBar.PrimaryAction by forwarding all default props from HTMLAnchorElement. This will prevent compiler errors on attributes like onClick.

• #240 6d590e2 Thanks @danielguillan! - Added a size prop to control Testimonial's text size

• #245 52cc40d Thanks @TylerJDev! - Fixes focus navigation within mobile menu in SubdomainNavbar

@primer/[email protected]

Minor Changes

• #237 51e383d Thanks @rezrah! - Added Grid-specific design tokens.

  --grid-spacing-margin
  --grid-spacing-row
  --grid-spacing-column-gap

@primer/[email protected]

Patch Changes

• #234 28f0679 Thanks @josepmartins! - Adjust spacing in River component to avoid margin collapse.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #220 d583547 Thanks @josepmartins! - Added new Label component

  Use Label to indicate the status of the content or add metadata to the Card component.

  <Label color="green" size="large">
    New feature
  </Label>

  🔗 See the documentation for more details and usage examples.

  Update Card component to use Label component and its color variants

  <Card href="https://github.com">
    <Card.Label color="green">New feature</Card.Label>
    <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>

Patch Changes

• #216 3bd2290 Thanks @TylerJDev! - Hides Accordion icons from component's accessible name

• #222 7da349d Thanks @TylerJDev! - Introduces accessibility fixes for SubdomainNavBar

  • Improves ARIA usage across the component
  • Adjusts some landmarks to reduce verbosity
  • Fixes some aria-expanded states

• #225 b59728e Thanks @TylerJDev! - Adds improved combobox accessibility support for SubdomainNavBar search

• #209 b6d9602 Thanks @TylerJDev! - Fixes transition bug by making :hover style take priority over :focus.

• #226 06f045d Thanks @rezrah! - Add heading level customization to River headings.

  <River>
    <River.Visual />
    <River.Content>
      <Heading as="h1">Use alternative heading levels, like h1, h2, h3 and more</Heading>
    </River.Content>
  </River>

@primer/[email protected]

Minor Changes

• #220 d583547 Thanks @josepmartins! - New Label component-specific tokens have been added to the @primer/brand-primitives package.

      --brand-Label-color-default
      --brand-Label-color-blue
      --brand-Label-color-blue-purple-start
      --brand-Label-color-blue-purple-end
      --brand-Label-color-coral
      --brand-Label-color-green
      --brand-Label-color-green-blue-start
      --brand-Label-color-green-blue-end
      --brand-Label-color-gray
      --brand-Label-color-indigo
      --brand-Label-color-lemon
      --brand-Label-color-lime
      --brand-Label-color-orange
      --brand-Label-color-pink
      --brand-Label-color-pink-blue-start
      --brand-Label-color-pink-blue-end
      --brand-Label-color-purple
      --brand-Label-color-purple-red-start
      --brand-Label-color-purple-red-end
      --brand-Label-color-red
      --brand-Label-color-red-orange-start
      --brand-Label-color-red-orange-end
      --brand-Label-color-teal
      --brand-Label-color-yellow

@primer/[email protected]

Patch Changes

• #221 0b5d9b0 Thanks @rezrah! - Updated dark mode Button hover colors for secondary and subtle variants.

  Colors have changed from gray to white.

• #215 e96601c Thanks @TylerJDev! - - Updated Hero to use the HTML landmark element <section> for improved semantics and accessibility.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #200 f8e273a Thanks @josepmartins! - Add label and test coverage to the Card component

  ⚠️ This update contains a breaking change.

  Before:

  <Card label="Read more">...</Card>

  after:

  <Card ctaText="Read more">...</Card>

• #205 d8974c1 Thanks @rezrah! - ### React

  Added new ActionMenu component

  Use ActionMenu to display a list of actions or selections that expand through a trigger button.

  <ActionMenu>
    <ActionMenu.Button>Open menu</ActionMenu.Button>
    <ActionMenu.Overlay>
      <ActionMenu.Item value="Copilot" selected>
        Copilot
      </ActionMenu.Item>
      <ActionMenu.Item value="Codespaces">Codespaces</ActionMenu.Item>
      <ActionMenu.Item value="CodeQL">CodeQL</ActionMenu.Item>
    </ActionMenu.Overlay>
  </ActionMenu>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #204 469af45 Thanks @TylerJDev! - Adds outline to Button variants (Primary, Secondary) when in High Contrast Mode (HCM)

  Before	After

• #217 cb892f8 Thanks @rezrah! - Avatar now correctly forwards native img attributes. This includes loading, decoding, and crossOrigin attributes.

@primer/[email protected]

Minor Changes

• #217 cb892f8 Thanks @rezrah! - New ActionMenu component-specific tokens have been added to the @primer/brand-primitives package.

    --brand-ActionMenu-color-border-rest
    --brand-ActionMenu-color-border-hover
    --brand-ActionMenu-color-border-active
    --brand-ActionMenu-color-item-hover
    --brand-ActionMenu-color-scrollbar-thumb-bg