@primer/[email protected]

🔗 Permalink to v0.47.0. documentation

Minor Changes

• #896 ce6c8b6 Thanks @rezrah! - Updated minimum, compatible version of react and react-dom to v18

Patch Changes

• #896 ce6c8b6 Thanks @rezrah! - Updated leadingVisual prop in Label to accept Icon children from the @primer/octicons-react package.

• #896 ce6c8b6 Thanks @rezrah! - Replaced usage of @reach/auto-id with native useId in react@v18

• #896 ce6c8b6 Thanks @rezrah! - Add peerDependenciesMeta configuration, preventing unnecessary peer dependency warnings

• #899 bc24d7a Thanks @joshfarrant! - Added a scroll margin to Footnote.Item to prevent it from being hidden behind fixed navigation during automatic scrolling.

• #897 1c47b76 Thanks @joshfarrant! - IDE component accessibility improvements

  • Added 1px border to identify active tab and start/end of Copilot suggestion. The colours of these borders can be customised via the --brand-IDE-default-editor-tab-borderColor and --brand-IDE-autoSuggest-borderColor CSS variables.
  • Added horizontal scrolling to IDE component when viewed on small viewports

@primer/[email protected]

@primer/[email protected]

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