@primer/[email protected]

🔗 Permalink to v0.46.0. documentation

Minor Changes

• #884 bbdf7f2f Thanks @rezrah! - Anti-aliasing is now applied automatically to all Text instances except under these conditions:

  • When explicitly disabled via hasAntiAliasing={false}
  • When font weight is light or extralight AND size is '100' or '200'
  • When size is 100 (regardless of weight)

• #893 d3c1ee2a Thanks @rezrah! - Updated secondary Button variant borders from subtle to default color for improved contrast.

• #890 4692aeea Thanks @joshfarrant! - Enabled keyboard navigation in the IDE component and made the contents navigable by screen readers.

  ⚠️ Breaking changes

  The alternativeText prop on the IDE component has been removed in favour of more granular descriptive text.

  Before
  <IDE alternativeText="A user asks how to concatenate arrays in JavaScript, Copilot demonstrates using the concat method, and the user confirms it worked."> <IDE.Chat /> </IDE>
  After
  <IDE> <IDE.Chat alternativeText="A user asks how to concatenate arrays in JavaScript, Copilot demonstrates using the concat method, and the user confirms it worked." /> </IDE>

  Before
  <IDE alternativeText="TypeScript sentiment analysis function with D3.js visualization."> <IDE.Editor files={[ { name: 'index.js', }, ]} /> </IDE>
  After
  <IDE> <IDE.Editor files={[ { name: 'index.js', alternativeText: 'TypeScript sentiment analysis function with D3.js visualization.', // ... }, ]} /> </IDE>

  🔗 See the documentation for example usage, and more information on accessibility in the IDE component

Patch Changes

• #887 8a49db27 Thanks @joshfarrant! - Link component improvements.

  • Fixed a bug in the Link component where the underline wouldn't take the full width when arrowDirection='none'.
  • Prop options are also now exported from the package root, specifically:
    • LinkSizes
    • LinkArrowDirections

• #879 4f92311f Thanks @rezrah! - Added toggleColor prop to FAQ.Question and Accordion.Heading

  <FAQ>
    <FAQ.Item>
      <FAQ.Question toggleColor="green-blue">...</FAQ.Question>
      <FAQ.Answer>...</FAQ.Answer>
    </FAQ.Item>
  </FAQ>

  <Accordion>
    <Accordion.Heading toggleColor="green-blue">...</Accordion.Heading>
    <Accordion.Content>...</Accordion.Content>
  </Accordion>

  🔗 See the documentation for examples and color options

• #894 aecc8d8f Thanks @rezrah! - Improvements to duotone text in River component. Now supports <b> elements using a semi-bold font weight.

  🔗 See documentation for usage examples

• #892 e85c7316 Thanks @rezrah! - Upgraded dev dependencies for @types/node and eslint-plugin-github

• #883 965a7865 Thanks @rezrah! - Visual spacing updates to RiverBreakout

  • Reduced vertical gap between the main text and link.
  • Applied a maximum width to the main text.

• #872 872bdcf0 Thanks @joshfarrant! - VideoPlayer tooltips now show when the associated control receives focus.

@primer/[email protected]

Minor Changes

• #893 d3c1ee2a Thanks @rezrah! - Updated secondary Button variant borders from subtle to default color for improved contrast.

Patch Changes

• #883 965a7865 Thanks @rezrah! - Added new token for river breakout vertical spacing:

  --brand-River-spacing-innerY
  

• #879 4f92311f Thanks @rezrah! - Added new accordion toggle color variables

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

@primer/[email protected]

Patch Changes

• #880 bfe40610 Thanks @rezrah! - Increased border radius of Card from large (16px) to xlarge (24px)

• #878 d9183796 Thanks @rezrah! - Added leadingComponent slot to SectionIntro for inserting arbitrary visuals and JSX above the heading.

  <SectionIntro leadingComponent={() => <img src="leading-visual.png" alt="description of your leading visual" />}>
    <SectionIntro.Heading>...</SectionIntro.Heading>
    <SectionIntro.Description>...</SectionIntro.Description>
    <SectionIntro.Link>...</SectionIntro.Link>
  </SectionIntro>

  🔗 See Storybook example

• #880 bfe40610 Thanks @rezrah! - Added hasBorder prop to Pillar for alternative presentation

  🔗 See Storybook for an example

• #703 621d8ee2 Thanks @joshfarrant! - VideoPlayer accessibility improvements

  • Improved contrast of play overlay focus styles.
  • Improved contrast of controls and title.
  • The title bar now hides while the video is playing.
  • The controls bar now hides when the cursor or keyboard focus leaves the video player, or after a few seconds of inactivity, and reappears when the cursor or keyboard focus returns.

• #862 eba0c530 Thanks @danielguillan! - Added image support to Pillar component

  Usage example:

  <Pillar>
    <Pillar.Image src="/path/to/your/image.jpg" alt="Required alternative text" />
    <Pillar.Heading>Code search & code view</Pillar.Heading>
    <Pillar.Description>
      Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
    </Pillar.Description>
  </Pillar>

  🔗 See Storybook for an example

@primer/[email protected]

Patch Changes

• #703 621d8ee2 Thanks @joshfarrant! - Updated VideoPlayer title, controls, and progress bar colors

@primer/[email protected]

🔗 See documentation for 0.45.0

Minor Changes

• #860 2502f658 Thanks @rezrah! - Decreased the default heading size in River component. Use size="4" to restore the previous text size, if needed.

• #863 00ef0694 Thanks @rezrah! - Added a new FrostedGlassVFX component for applying a frosted glass-effect texture to nested components.

  ⚠️ This is an experimental component, and not tested for compatibility with other Primer Brand components.

  When using this component, ensure there is sufficient contrast between the foreground text and the background imagery, as the frosted glass effect can significantly reduce legibility.

  Usage example:

  <FrostedGlassVFX>
    <Testimonial variant="default">
      <Testimonial.Quote>
        GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first
        line of code we&apos;re writing.
      </Testimonial.Quote>
      <Testimonial.Name />
      <Testimonial.Avatar />
    </Testimonial>
  </FrostedGlassVFX>

  🔗 See Storybook for an example

Patch Changes

• #859 cd18615f Thanks @rezrah! - AnchorNav component updates:

  • AnchorNav.Action and AnchorNav.SecondaryAction now appear visually smaller by default. Use size="medium" if the previous, larger buttons are needed.
  • AnchorNav.Action and AnchorNav.SecondaryAction each support a variant prop, allowing primary Button visuals to be optionally applied.

• #866 8223135d Thanks @rezrah! - Fixed delayed appearance of heading separator in SubNav.

• #865 0401cc5c Thanks @joshfarrant! - Style improvements to the SubNav component.

  • Fixed a bug in SubNav.Link elements with aria-current, which caused inconsistent appearance across viewports.

• #863 00ef0694 Thanks @rezrah! - Added new Testimonial variants.

  Use variant="default" or variant="subtle" for an alternative visual appearance. The current design will be referred to as minimal going forward.

  🔗 See the documentation for usage examples

• #867 4bac3868 Thanks @rezrah! - Hero.Description updated to support variant="muted"

• #868 c0aa598d Thanks @rezrah! - SubNav.Link now supports variant="default" to help increase contrast and legibility on non-standard backgrounds.

@primer/[email protected]

Patch Changes

• #863 00ef0694 Thanks @rezrah! - Added new design tokens for Testimonial and FrostedGlassVFX components

  :root {
    --brand-Testimonial-borderMask-default
    --brand-Testimonial-borderMask-subtle
    --brand-FrostedGlassVFX-bgColor
    --brand-FrostedGlassVFX-boxShadow
    --brand-FrostedGlassVFX-borderMask
    --brand-FrostedGlassVFX-blurIntensity-high
    --brand-FrostedGlassVFX-blurIntensity-medium
    --brand-FrostedGlassVFX-blurIntensity-low
  }
  

@primer/[email protected]

Patch Changes

• #854 fa277afd Thanks @rezrah! - SubNav accessibility improvements:

  • Removed focus-trapping in the menu overlay on narrow viewports
  • Added hover state to the SubNav.Heading
  • Added aria-current visual indicator parity on narrow viewports

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

🔗 See documentation for v0.44.0

Minor Changes

• #831 8c3448d0 Thanks @joshfarrant! - Reduced the text size in FormControl.Hint and FormControl.Validation components to match their counterparts in CheckboxGroup and RadioGroup for improved consistency and visual design accuracy.

• #844 00275979 Thanks @joshfarrant! - New Icon component is generally available.

  Example:
  

  🔗 Read the documentation for more usage examples

• #830 1f9eb72b Thanks @joshfarrant! - New CheckboxGroup and RadioGroup components to group Checkbox and Radio components are now available.

  CheckboxGroup

  <CheckboxGroup>
    <CheckboxGroup.Label>Choose your favorite features</CheckboxGroup.Label>
    <FormControl>
      <FormControl.Label>Actions notifications</FormControl.Label>
      <Checkbox value="actions" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Packages</FormControl.Label>
      <Checkbox value="packages" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Codespaces</FormControl.Label>
      <Checkbox value="codespaces" />
    </FormControl>
  </CheckboxGroup>

  🔗 Read the documentation for more CheckboxGroup examples

  RadioGroup:

  <RadioGroup>
    <RadioGroup.Label>Choose your primary workspace</RadioGroup.Label>
    <FormControl>
      <FormControl.Label>Codespaces</FormControl.Label>
      <Radio name="workspace" value="codespaces" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Local environment</FormControl.Label>
      <Radio name="workspace" value="local" />
    </FormControl>
    <FormControl>
      <FormControl.Label>Pen and paper</FormControl.Label>
      <Radio name="workspace" value="remote" />
    </FormControl>
  </RadioGroup>

  🔗 Read the documentation for more RadioGroup examples

• #824 6e398ba7 Thanks @rezrah! - Updates to SubNav component

  • New anchor-based navigation pattern available:

    Use variant="anchor" on SubNav.SubMenu to apply anchor navigation as an alternative to the default dropdown-based submenu.

    <SubNav>
      <SubNav.Heading href="#">Heading</SubNav.Heading>
      <SubNav.Link href="#" aria-current="page">
        Link with anchor navigation
        <SubNav.SubMenu variant="anchor">
          <SubNav.Link href="#">Anchor link one</SubNav.Link>
          <SubNav.Link href="#">Anchor link two</SubNav.Link>
          <SubNav.Link href="#">Anchor link three</SubNav.Link>
          <SubNav.Link href="#">Anchor link four</SubNav.Link>
        </SubNav.SubMenu>
      </SubNav.Link>
      <SubNav.Link href="#">Link</SubNav.Link>
      <SubNav.Link href="#">Link</SubNav.Link>
    </SubNav>

  • Overlay now closes when user clicks outside of it

  • Dropdown submenus now appear with white and black background and foreground colors respectively, irrespective of color mode.

  • Various other visual updates to improve brand-alignment. These include adjustments to text size, weight, color and iconography.

Patch Changes

• #842 26f79f62 Thanks @joshfarrant! - Allow AnchorNav links to wrap to the next line in the expanded list on narrow viewports.

• #843 7473042c Thanks @joshfarrant! - Added a small (200ms) delay to the closing of the Tooltip to make it easier for users to move their cursor to the contents of the Tooltip.

• #847 c3ca91c8 Thanks @stamat! - Improved accessibility of Button and Link components on Windows-based high contrast themes. Outlines are now visible only when focused, and border underlines will appear correctly.

• #841 78e82c16 Thanks @joshfarrant! - Improved accessibility in AnchorNav through clearer navigation menu labelling for screen reader users on narrow viewports.

• #833 0f8bfa65 Thanks @rezrah! - selected breadcrumb items now use non-interactive elements for improved keyboard navigation and correct semantics.

• #838 bf785d6b Thanks @joshfarrant! - Updated the accessible label of the SubNav's open/close toggle button to include the name of the current page.

• #828 652e7ff0 Thanks @joshfarrant! - Fixed bug where TextInput, TextArea, and Select components would expand to the width of a the validation message on the parent FormControl.

@primer/[email protected]

@primer/[email protected]