@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #945 13b84de Thanks @rezrah! - Removed global CSS overrides for reduced-motion user preferences with local, component equivalents.

  [!WARNING]
  Users who relied on this functionality should now implement their own override mechanisms at the component or page level.

• #926 b11c431 Thanks @joshfarrant! - - Updated the Pagination component to ensure consistent behaviour across all viewports by displaying a condensed pagination on narrow viewports.

  • ⚠️ Deprecated responsive object support in the showPages prop. The showPages prop now only accepts a boolean value which will hide/show the page numbers across all viewports.

      <Pagination
    -   showPages={{narrow: true, regular: true, wide: true}}
    +   showPages
      />
    
      // Or
    
      <Pagination
    -   showPages={{narrow: false, regular: false, wide: false}}
    +   showPages={false}
      />

Patch Changes

• #931 c309912 Thanks @joshfarrant! - Fixed a bug in Safari where an Icon component with hasBackground={true} would cut off the corners of the rendered SVG. To resolve this the Icon component now wraps the rendered SVG in a div.

• #927 91c10c5 Thanks @rezrah! - Improved typings to various components. This update should not affect the end-user API's.

• #945 13b84de Thanks @rezrah! - Fixed hover states for inline links in the Prose component. Links now behave identically to InlineLink component.

• #946 010578b Thanks @danielguillan! - Added a new small size option for Label

  🔗 See documentation for usage examples

• #943 16b0cc7 Thanks @danielguillan! - Sets the maximum widths for the heading and description of the Card component.

• #940 cca78a1 Thanks @joshfarrant! - Updated the Accordion component to support additional state handling methods. All changes are backwards compatible. Refer to Storybook for examples of these additional Accordion features.

• #942 5f31936 Thanks @danielguillan! - Update the default primary and secondary accent color tokens from pink and purple to green and yellow, respectively.

@primer/[email protected]

Patch Changes

• #942 5f31936 Thanks @danielguillan! - Update the default primary and secondary accent color tokens from pink and purple to green and yellow, respectively.

@primer/[email protected]

See documentation for this release

Patch Changes

• #934 645fa5d Thanks @joshfarrant! - Fixed a bug where Card components would need to be tapped twice in iOS Safari to trigger navigation

• #889 34e444e Thanks @danielguillan! - Added new green-blue-purple color option to Label component

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #901 d9a95b2 Thanks @rezrah! - Updated the following library depedencies: @oddbird/popover-polyfill, autoprefixer, css-loader, mini-css-extract-plugin, postcss, postcss-loader, postcss-preset-env, style-loader, typed-css-modules, typescript-plugin-css-modules, webpack-cli, fast-glob.

  These updates should not affect the library’s visuals or component APIs. In most cases, no additional action is required. Please note however, that the compiled output may be slightly different due to changes in the bundling process.

• #912 5966728 Thanks @joshfarrant! - Fixed a bug in the ActionMenu component where items with falsy values (eg "") would not trigger the onSelect callback when selected.

• #909 c5f2d40 Thanks @danielguillan! - Increased the gap between primary and secondary buttons in Hero, CTABanner and ButtonGroup components from 8px to 16px.

• #918 65f7a92 Thanks @rezrah! - Fix RiverStoryScroll scrolling bug when disabled={true}. Now renders children 1:1.

@primer/[email protected]

@primer/[email protected]

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