@primer/react-brand@0.30.2

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/brand-primitives@0.30.2

@primer/brand-primitives@0.30.2

@primer/react-brand@0.30.1

Patch Changes

• #523 f6f4c66 Thanks @rezrah! - - Improved keyboard navigation for FAQ and accordion components.

  • Pressing the escape key will now return focus to the closest accordion toggle.

• #529 d00cf4e Thanks @alexbuiltit! - Added className forwarding to Hero.Description

• #533 143c4f8 Thanks @rezrah! - Add default inline link colors to Timeline.Item

• #532 17df500 Thanks @danielguillan! - Adds color mode support to the Testimonial component

• #524 365e01e Thanks @rezrah! - Added previously missing site title to SubdomainNavBar component menu on narrow viewports

• #517 6874019 Thanks @rezrah! - Added Label child support for River and Bento component

@primer/brand-primitives@0.30.1

@primer/brand-primitives@0.30.1

@primer/react-brand@0.30.0

Minor Changes

• #507 2309d7d Thanks @langermank! - Renames --brand-Image-ratio-custom to --brand-image-aspectRatio

Patch Changes

• #499 a3b02ad Thanks @rezrah! - Added onKeyDown event handler to ActionMenu to replicate onClick using Enter key

• #506 3b6eb7b Thanks @langermank! - Remove unused ActionMenu color tokens

  Tokens removed:
  --brand-ActionMenu-color-border-rest
  --brand-ActionMenu-color-border-hover
  --brand-ActionMenu-color-border-active

• #498 c3d7bdb Thanks @rezrah! - Added secondary action support to anchor nav.

  When two actions are present, the first action becomes a primary button variant.

  <AnchorNav>
    {/* ... */}
    <AnchorNav.Action href="#">Get started</AnchorNav.Action>
    <AnchorNav.SecondaryAction href="#">Compare plans</AnchorNav.SecondaryAction>
  </AnchorNav>

@primer/brand-primitives@0.30.0

Minor Changes

• #507 2309d7d Thanks @langermank! - Renames --brand-Image-ratio-custom to --brand-image-aspectRatio

Patch Changes

• #506 3b6eb7b Thanks @langermank! - Remove unused ActionMenu color tokens

  Tokens removed:
  --brand-ActionMenu-color-border-rest
  --brand-ActionMenu-color-border-hover
  --brand-ActionMenu-color-border-active

@primer/react-brand@0.29.1

Patch Changes

• #493 ba6e320 Thanks @rezrah! - Fixed text alignment on centered EyebrowBanner.

  • Headings now always start aligned
  • Forces removal of text-decoration on hover state

@primer/brand-primitives@0.29.1

@primer/brand-primitives@0.29.1

@primer/react-brand@0.29.0

Minor Changes

• #442 d2408f2 Thanks @langermank! - - Change base color scales to hex instead of hsl

  • Adds new tokens for VideoPlayer

• #467 a7e471b Thanks @joseph-lozano! - breaking InlineLink components no longer take a size prop, but will now inherit their size in all cases.

  // Before
  <Text size="200">
    This is a link with the <InlineLink size="200">same</InlineLink> size
  </Text>

  // After
  <Text size="200">
    This is a link with the <InlineLink>same</InlineLink> size
  </Text>

  If you want the Inline Link to have a different size than its parent, wrap it in a new <Text> component.

  // Before
  <Text size="200">
    This is a link with a <InlineLink size="400">different</InlineLink>Size
  </Text>

  // After
  <Text size="200">
    This is a link with a{' '}
    <Text as="span" size="400">
      <InlineLink>different</InlineLink>
    </Text>
    Size
  </Text>

  InlineLinks now work inside of Header components.

  <Header size="3">
    This is a <InlineLink>Header</InlineLink> link!
  </Header>

• #489 be9a635 Thanks @rezrah! - Updated dependency for @primer/octicons-react to 19.8.0

  Octicons should now be passed as JSX instead of Objects.

  - icon={RocketIcon}
  + icon={<RocketIcon />}

• #487 6cdeba7 Thanks @rezrah! - New eyebrow banner component now generally available

  <EyebrowBanner href="http://githubuniverse.com">
    <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
    <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
  </EyebrowBanner>

  🔗 Read the documentation for more examples

Patch Changes

• #490 b93531e Thanks @rezrah! - Type widening for FormControl children.

  FormControl now uses PropsWithChildren to include support for null and false values. This allows for more flexibility when using FormControl.* with conditional rendering.

  <FormControl>
    {/* `maybeValue can be truthy, but also null or false` */}
    {maybeValue && <FormControl.Validation>Message</FormControl.Validation>}
  </FormControl>

@primer/brand-primitives@0.29.0

Minor Changes

• #442 d2408f2 Thanks @langermank! - - Change base color scales to hex instead of hsl

  • Adds new tokens for VideoPlayer

• #487 6cdeba7 Thanks @rezrah! - New tokens available for the new eyebrow banner component:

  --brand-Eyebrowbanner-bgColor-rest
  --brand-Eyebrowbanner-borderColor-rest
  --brand-Eyebrowbanner-heading-fgColor
  --brand-Eyebrowbanner-subHeading-fgColor
  --brand-Eyebrowbanner-icon-background-default
  --brand-Eyebrowbanner-icon-background-blue
  --brand-Eyebrowbanner-icon-background-coral
  --brand-Eyebrowbanner-icon-background-green
  --brand-Eyebrowbanner-icon-background-gray
  --brand-Eyebrowbanner-icon-background-indigo
  --brand-Eyebrowbanner-icon-background-lemon
  --brand-Eyebrowbanner-icon-background-lime
  --brand-Eyebrowbanner-icon-background-orange
  --brand-Eyebrowbanner-icon-background-pink
  --brand-Eyebrowbanner-icon-background-purple
  --brand-Eyebrowbanner-icon-background-red
  --brand-Eyebrowbanner-icon-background-teal
  --brand-Eyebrowbanner-icon-background-yellow
  --brand-Eyebrowbanner-fgColor-default-start
  --brand-Eyebrowbanner-fgColor-default-middle
  --brand-Eyebrowbanner-fgColor-default-end
  --brand-Eyebrowbanner-fgColor-blue
  --brand-Eyebrowbanner-fgColor-blue-purple-start
  --brand-Eyebrowbanner-fgColor-blue-purple-end
  --brand-Eyebrowbanner-fgColor-coral
  --brand-Eyebrowbanner-fgColor-green
  --brand-Eyebrowbanner-fgColor-green-blue-start
  --brand-Eyebrowbanner-fgColor-green-blue-end
  --brand-Eyebrowbanner-fgColor-gray
  --brand-Eyebrowbanner-fgColor-indigo
  --brand-Eyebrowbanner-fgColor-lemon
  --brand-Eyebrowbanner-fgColor-lime
  --brand-Eyebrowbanner-fgColor-orange
  --brand-Eyebrowbanner-fgColor-pink
  --brand-Eyebrowbanner-fgColor-pink-blue-start
  --brand-Eyebrowbanner-fgColor-pink-blue-end
  --brand-Eyebrowbanner-fgColor-purple
  --brand-Eyebrowbanner-fgColor-purple-red-start
  --brand-Eyebrowbanner-fgColor-purple-red-end
  --brand-Eyebrowbanner-fgColor-red
  --brand-Eyebrowbanner-fgColor-red-orange-start
  --brand-Eyebrowbanner-fgColor-red-orange-end
  --brand-Eyebrowbanner-fgColor-teal
  --brand-Eyebrowbanner-fgColor-yellow

  🔗 Read the documentation for examples of this component