v36.2.0

Permalink to documentation

Minor Changes

• #3900 2f9b5869 Thanks @broccolinisoup! - ActionList: Add ActionList.GroupHeading component to label the group lists and update labelling semantics for accessibility

• #3143 cc0c16e9 Thanks @green6erry! - Adjusts position of children within PageLayout.Pane to live above adjustable resize form.

Patch Changes

• #3935 89702725 Thanks @broccolinisoup! - Dialog: Add sx back to dialog footer

• #3918 e8d0c15f Thanks @dylanatsmith! - Update the spacing for buttons in the footer of a Dialog.

• #3893 a4006e2f Thanks @stkao05! - Fix MarkdownEditor fullHeight support

• #3895 9daea96b Thanks @cs25-esc! - AvatarStack: Both disableExpand and rightAlign can be passed together now

• #3667 791c9838 Thanks @six7! - Changes visual appearance of MarkdownEditor

• #3910 988b297d Thanks @broccolinisoup! - Tooltip (draft): Do not expose the tooltip text to AT when it is not visible

• #3924 e512c049 Thanks @thyeggman! - Fix issue in DataTable so that sort order is determined after column headers are created

• #3916 c2f81b3c Thanks @strackoverflow! - Fix inconsistent border treatment when there is one avatar in an AvatarStack

• #3925 6b362b2a Thanks @broccolinisoup! - Tooltip2: make the text prop required

v36.1.0

Minor Changes

• #3843 4ea8bcf7 Thanks @thyeggman! - Vertically align cell contents in DataTable

Patch Changes

• #3866 22fa0928 Thanks @strackoverflow! - DataTable: fix incorrect pagination steps when defaultPageIndex is provided

• #3888 3e20ab1f Thanks @strackoverflow! - Select: Add support for sx prop

• #3870 2c24d6a8 Thanks @siddharthkp! - ActionList: Checkbox inside a disabled item should have not-allowed cusor

v36.0.0

Permalink to documentation

We're excited to announce the next major release of Primer React! 🥳 Starting in v36, you'll see changes to @primer/react that make it even easier to build consistent, accessible experiences that feel right at home at GitHub.

New components ✨

The following components have been moved from @primer/react/drafts to @primer/react:

• TreeView
• NavList
• SegmentedControl
• SplitPageLayout

Breaking changes ⚠️

The v36 release of @primer/react introduces several breaking changes to components and changes to the package itself. To understand how to migrate between v35 and v36 of @primer/react, review the sections below to understand how your project may be impacted by these changes.

Components

The following list of components have breaking changes to their API or availability in @primer/react. For a list of deprecated components that have been removed, visit the Removed components section below.

• AvatarToken
• Button
• Checkbox
• FilterList
• FilterSearch
• FormControl
• Radio
• Textarea
• TextInputWithTokens
• UnderlineNav

AvatarToken

The size prop for AvatarToken has been updated in v36 to only accept "large" and "xlarge".

v35	v36
<AvatarToken size="small"> <AvatarToken size="medium"> <AvatarToken size="large"> <AvatarToken size="xlarge"> <AvatarToken size="extralarge">	<AvatarToken size="large"> <AvatarToken size="xlarge">

Button

The API for the Button component has been updated to match the specification for this component and align with other implementations like in Primer View Components.

• The leadingIcon prop has been renamed to leadingVisual

  v35	v36
  <Button leadingIcon={TrashIcon}>Delete</Button>	<Button leadingVisual={TrashIcon}>Delete</Button>

• The trailingIcon prop has been renamed to trailingVisual

  v35	v36
  <Button trailingIcon={EyeIcon}>Delete</Button>	<Button trailingVisual={EyeIcon}>Delete</Button>

• The Button.Counter component has been removed, use the count prop instead

  v35	v36
  <Button> Watch <Button.Counter>5</Button.Counter> </Button>	<Button count={5}>Watch</Button>

• The outline variant has been removed, instead use variant="invisible"

  v35	v36
  <Button variant="outline">Example</Button>	<Button variant="invisible">Example</Button>

Checkbox

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

FilterList

The FilterList component has been deprecated in v36 in favor of the ActionList component. To continue using this component, update your imports for FilterList to import from the deprecated entrypoint.

v35	v36
import { FilterList } from '@primer/react';	import { FilterList } from '@primer/react/deprecated';

FilterSearch

The FilterSearch component has been deprecated in v36. A new filter component is currently in progress but is not yet available. Until a new component is ready, use a combination of Button, TextInput, and ActionList to reproduce this component. To continue using this component, update your imports for FilterSearch to import from the deprecated entrypoint.

v35	v36
import { FilterSearch } from '@primer/react';	import { FilterSearch } from '@primer/react/deprecated';

FormControl

The variant prop for the FormControl.Validation component has been updated to no longer support the 'warning' value. Instead, only 'error' and 'success' are supported.

Radio

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

Textarea

The validationStatus prop has been updated and no longer supports the 'warning' value. Instead, only 'error' and 'success' are supported.

TextInputWithTokens

The size prop has been updated to no longer accept the extralarge value. Use xlarge instead.

v35	v36
<TextInputWithTokens size="extralarge">	<TextInputWithTokens size="xlarge">

UnderlineNav

The implementation for UnderlineNav has been updated in v36. Certain props for UnderlineNav have been removed and the UnderlineNav.Link component has been replaced by UnderlineNav.Item.

Component	v35	v36
UnderlineNav	actions	This prop has been removed
	align	This prop has been removed
	full	This prop has been removed
UnderlineNav.Link		Use the UnderlineNav.Item component
UnderlineNav.Link	selected	Use the aria-current prop

v35	v36
<UnderlineNav aria-label="Main"> <UnderlineNav.Link href="#home" selected> Home </UnderlineNav.Link> <UnderlineNav.Link href="#documentation"> Documentation </UnderlineNav.Link> <UnderlineNav.Link href="#support"> Support </UnderlineNav.Link> </UnderlineNav>	<UnderlineNav aria-label="Main"> <UnderlineNav.Item href="#home" aria-current="page"> Home </UnderlineNav.Item> <UnderlineNav.Item href="#documentation"> Documentation </UnderlineNav.Item> <UnderlineNav.Item href="#support"> Support </UnderlineNav.Item> </UnderlineNav>

To continue using the implementation for UnderlineNav from v35, import the component from @primer/react/deprecated.

v35	v36
import { UnderlineNav } from '@primer/react';	import { UnderlineNav } from '@primer/react/deprecated';

Removed components

The following deprecated components have been removed from @primer/react/deprecated and are no longer be available.

Name	Migration
BorderBox	Use the Box component, <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>
ChoiceFieldset	Use the CheckboxGroup or RadioGroup component
Item	Use CheckboxGroup or RadioGroup component
ChoiceInputField	Use the FormControl component
Flex	Use the Box component, <Flex> → <Box display="flex">
Grid	Use the Box component, <Grid> → <Box display="grid">
Position	Use the Box component, <Position> → <Box>
Absolute	Use the [Box](https://...

v35.32.2

Permalink to documentation

Patch Changes

• #3861 85d9e515 Thanks @langermank! - Use button CSS vars for border-color to support a feature flag

• #3862 8cd6007e Thanks @TylerJDev! - Adds aria-disabled to inactive pagination buttons.

v35.32.1

Permalink to documentation

Patch Changes

• #3839 d463d547 Thanks @joshblack! - Restore Link underline preference to original behavior

• #3836 038a7899 Thanks @xiaolou86! - docs: fix typo

v35.32.0

Permalink to documentation

Minor Changes

• #3720 521b02f4 Thanks @mperrotti! - Updates link styles to support underline link preferences.

• #3813 1fcfc478 Thanks @joshblack! - Add support for a ref on the inner in ToggleSwitch

Patch Changes

• #3815 794a477c Thanks @pksjce! - Update hover styles for ActionList item

• #3691 f4648b19 Thanks @joshblack! - Update ActionList to place id on item with an ARIA role

• #3809 6b18eaec Thanks @gr2m! - export SelectPanel from @primer/react/drafts

• #3683 a84a1498 Thanks @broccolinisoup! - Button: Allow leadingIcon, trailingIcon, trailingAction to be overridable with sx

• #3784 6f4fe7d2 Thanks @radglob! - Revert "Add aria-selected value to ActionList.Item."

v35.31.0

Permalink to documentation

Minor Changes

• #3394 9cd50f70 Thanks @broccolinisoup! - Tooltip: Release Tooltip v2 as a draft/experimental

• #3749 b4fe331e Thanks @thyeggman! - Add suport for sparse sorting to DataTable

• #3581 cc12464d Thanks @broccolinisoup! - ActionList: Add ActionList.Heading component

v35.30.0

Permalink to documentation

Minor Changes

• #3714 88340269 Thanks @iansan5653! - Add support for controlling which side ActionMenu renders on (via a side prop on ActionMenu.Overlay)

• #3715 1f889281 Thanks @joshblack! - Add support for leadingVisual and trailingVisual props to Button

• #3739 b90e5476 Thanks @joshblack! - Add the Column type and createColumnHelper function to easily define columns for DataTable

• #3719 500e529d Thanks @joshblack! - The UnderlineNav, FilterList, and FilteredSearch components will be deprecated in v36 and have been moved to the deprecated entrypoint. To use the new UnderlineNav, migrate to the component available in drafts.

• #3732 8928acc3 Thanks @joshblack! - Add default type="button" to IconButton component

Patch Changes

• #3661 25693b08 Thanks @joshblack! - Update the children prop for Button to be optional

• #3737 a93eca21 Thanks @joshblack! - Restore default main landmark in PageLayout.Content

• #3722 0baa5a7f Thanks @mattcosta7! - use isomorphic layout effects only

v35.29.0

Permalink to documentation

Minor Changes

• #3692 4046e058 Thanks @broccolinisoup! - Octicons: Upgrade react-octicons to v19.7.0

• #3647 e480a4a4 Thanks @paxos! - Adds onSelectSuggestion callback to InlineAutocomplete

• #3607 c0e22fc1 Thanks @langermank! - Update ActionList checkbox styles to form checkbox styles (impacts ActionMenu and SelectPanel)

• #3632 3a8b841c Thanks @iansan5653! - Allow consumers to make components that are compatible with FormControl by reading forwarded props in from the useFormControlForwardedProps hook

Patch Changes

• #3675 ade10e64 Thanks @radglob! - PageLayout.Content no longer renders as main by default. Instead, developers may add a main landmark within Pagelayout.Content themselves.

• #3709 edc0168e Thanks @mperrotti! - Fixes a bug where children of AvatarStack would still show a transition when the component re-renders with a different number of children. Fixes #3688

• #3698 d759fd32 Thanks @gracepark! - Adds the defaultOpen prop to NavList.Item

• #3662 2ca670a8 Thanks @joshblack! - Update type exports to prevent missing export warnings

• #3654 556d826a Thanks @langermank! - Use control CSS var with fallback for form component border-color

• #3689 5d992715 Thanks @jdrush89! - Fix dialog bug where escape would move focus when dialog was closed

v35.28.0

Permalink to documentation

Minor Changes

• #3563 3bb6dc8c Thanks @radglob! - Add option to specify custom widths for PageLayout.Pane via the width prop.

Patch Changes

• #3619 d4ae582b Thanks @gr2m! - Include border*Color properties in sx to support named Primer colors

• #3561 94e8d38f Thanks @joshblack! - Update @react-aria/ssr dependency to ^3.5.0 to address server-side rendering mismatch when using React StrictMode

• #3613 dbcd4072 Thanks @langermank! - [Bug] Remove flex from Button labels

• #3579 66482a72 Thanks @radglob! - Add aria-selected value to ActionList.Item.

• #3614 709024ff Thanks @iansan5653! - Automatically reposition InlineAutocomplete suggestions depending on available space

• #3609 f487a8d6 Thanks @iansan5653! - Expose useSlots from drafts/hooks

• #3611 ace603d8 Thanks @siddharthkp! - NavList: Fix when subNav opens automatically and shows current indicator