@primer/[email protected]

Minor Changes

• #143 3affeda Thanks @rezrah! - - Updating names and values for accent, accordion and button design tokens.

  - --brand-color-accent-fg
  + --brand-color-accent-primary

  - --brand-color-accent-emphasis
  + --brand-color-accent-secondary

  - --brand-color-accent-fg
  + --brand-color-accent-primary

  - --brand-color-accent-emphasis
  + --brand-color-accent-secondary

  - --brand-color-accent-subtle
  + --brand-color-accent-secondary

  - --brand-color-accent-muted
  + --brand-color-accent-primary

  - --brand-Accordion-toggle-color-start
  + --brand-Accordion-toggle-color-start

  - --brand-Accordion-toggle-color-end
  + --brand-Accordion-toggle-color-end

  - --brand-Accordion-toggle-color-start
  + --brand-Accordion-toggle-color-start

  - --brand-Accordion-toggle-color-end
  + --brand-Accordion-toggle-color-end

  - --brand-Button-background-base
  + --brand-Button-background-base

  - --brand-Button-shadow-default
  + --brand-Button-shadow-primary-default

  - --brand-Button-shadow-hover
  + --brand-Button-shadow-primary-hover

  - --brand-Button-background-base
  + --brand-Button-background-base

  - --brand-Button-shadow-default
  + --brand-Button-shadow-primary-default

  - --brand-Button-shadow-hover
  + --brand-Button-shadow-primary-hover

  • Button heights have been updated to match specifications in Figma.

Patch Changes

• #148 c9cf4bb Thanks @rezrah! - Add default typography values to Accordion.Content

• #142 5d4a4fa Thanks @rezrah! - Prevents background page scrolling in AnchorNav when the menu is open.

• #144 463ad37 Thanks @josepmartins! - - added left-aligned style in footnotes for ComparisonTable on narrow screens

  • added missing content in docs examples and props
  • fixed the Edit this page in GitHub link in docs

@primer/[email protected]

Minor Changes

• #143 3affeda Thanks @rezrah! - - Updating names and values for accent, accordion and button design tokens.

  - --brand-color-accent-fg
  + --brand-color-accent-primary

  - --brand-color-accent-emphasis
  + --brand-color-accent-secondary

  - --brand-color-accent-fg
  + --brand-color-accent-primary

  - --brand-color-accent-emphasis
  + --brand-color-accent-secondary

  - --brand-color-accent-subtle
  + --brand-color-accent-secondary

  - --brand-color-accent-muted
  + --brand-color-accent-primary

  - --brand-Accordion-toggle-color-start
  + --brand-Accordion-toggle-color-start

  - --brand-Accordion-toggle-color-end
  + --brand-Accordion-toggle-color-end

  - --brand-Accordion-toggle-color-start
  + --brand-Accordion-toggle-color-start

  - --brand-Accordion-toggle-color-end
  + --brand-Accordion-toggle-color-end

  - --brand-Button-background-base
  + --brand-Button-background-base

  - --brand-Button-shadow-default
  + --brand-Button-shadow-primary-default

  - --brand-Button-shadow-hover
  + --brand-Button-shadow-primary-hover

  - --brand-Button-background-base
  + --brand-Button-background-base

  - --brand-Button-shadow-default
  + --brand-Button-shadow-primary-default

  - --brand-Button-shadow-hover
  + --brand-Button-shadow-primary-hover

  • Button heights have been updated to match specifications in Figma.

@primer/[email protected]

Minor Changes

• #133 0b43c0e Thanks @rezrah! - New AnchorNav component available

  Use AnchorNav to provide a sticky navigation bar for quick scrolling to and highlighting of different sections of the document.

  <AnchorNav>
    <AnchorNav.Link href="#section-1">Section 1</AnchorNav.Link>
    <AnchorNav.Link href="#section-2">Section 2</AnchorNav.Link>
    <AnchorNav.Link href="#section-3">Section 3</AnchorNav.Link>
    <AnchorNav.Action href="/">Call to action</AnchorNav.Action>
  </AnchorNav>

  🔗 See the documentation for more details and usage examples.

• #128 1f14be6 Thanks @JoshBowdenConcepts! - New CTABanner component available

  <CTABanner>
    <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
    <CTABanner.Description>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
      felis nam pulvinar risus elementum.
    </CTABanner.Description>
    <CTABanner.ButtonGroup>
      <Button>Primary Action</Button>
      <Button>Secondary Action</Button>
    </CTABanner.ButtonGroup>
  </CTABanner>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #135 32555dd Thanks @JoshBowdenConcepts! - Stack component: Added className prop forwarding to the Stack root

@primer/[email protected]

Minor Changes

• #133 0b43c0e Thanks @rezrah! - New AnchorNav component available

  Use AnchorNav to provide a sticky navigation bar for quick scrolling to and highlighting of different sections of the document.

  <AnchorNav>
    <AnchorNav.Link href="#section-1">Section 1</AnchorNav.Link>
    <AnchorNav.Link href="#section-2">Section 2</AnchorNav.Link>
    <AnchorNav.Link href="#section-3">Section 3</AnchorNav.Link>
    <AnchorNav.Action href="/">Call to action</AnchorNav.Action>
  </AnchorNav>

  🔗 See the documentation for more details and usage examples.

@primer/[email protected]

Patch Changes

• #127 c16551f Thanks @rezrah! - Improvements to Button appearance

  • added an inactive / disabled visual appearance to the Button, which it previously didn't have

  • added new design tokens to replace functional tokens and enable app-side customisation

  • updated focus styles from previously bespoke grey to the global focus tokens

@primer/[email protected]

Patch Changes

• #127 c16551f Thanks @rezrah! - Improvements to Button appearance

  • added an inactive / disabled visual appearance to the Button, which it previously didn't have

  • added new design tokens to replace functional tokens and enable app-side customisation

  • updated focus styles from previously bespoke grey to the global focus tokens

@primer/[email protected]

Patch Changes

• #124 bc08980 Thanks @rezrah! - Fix: SubdomainNavBar and Radio component bugs in safari (iOS)

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #117 68d649f Thanks @rezrah! - Fix conflict with id and name attributes for form components

  The previous API for FormControl relied on the id prop to automatically assign the necessary name attribute for input tags. This had previously overridden the explicit name prop, which is not the desired behavior. This release fixes that by forwarding the name prop if it is provided, and falling back to the id prop if it is not.

  <FormControl>
    <FormControl.Label>Name</FormControl.Label>
    <TextInput name="name" />
  </FormControl>

  The above will now render as

  <section id="FormControl--custom-id">
    <label for="custom-id">Name</label>
    <input type="text" name="custom-name" id="custom-id" />
  </section>

• #117 68d649f Thanks @rezrah! - New Radio component available

  Use radios when a user needs to select one option from a list

  import {Radio} from '@primer/react-brand'

  <>
    <Radio name="radio-group" value="radio one" />
    <Radio name="radio-group" value="radio two" />
  </>

  🔗 See the documentation for more details and usage examples.

• #117 68d649f Thanks @rezrah! - New Textarea component available

  Use Textarea for multi-line text input form fields

  import {Textarea} from '@primer/react-brand'

  <Textarea>Enter multiline text here</Textarea>

  🔗 See the documentation for more details and usage examples.

Patch Changes

• #121 7d7c9c3 Thanks @rezrah! - Fixed conditional rendering bug in SubdomainNavBar

  Previously, SubdomainNavBar links would not appear correctly onscreen following a rerender.

  This bug has been fixed to ensure that conditional rendering - using showLinks below as an example - works as expected.

  <SubdomainNavBar title="Subdomain">
    {showLinks &&
      ['Collections', 'Topics', 'Articles', 'Events', 'Video'].map(link => {
        return (
          <SubdomainNavBar.Link key={link} href={`#${link}`}>
            {link}
          </SubdomainNavBar.Link>
        )
      })}
  </SubdomainNavBar>

@primer/[email protected]

@primer/[email protected]