@primer/[email protected]

Minor Changes

• #5253 729c0fa Thanks @hussam-i-am! - Deprecate width, minWidth and maxWidth props from TextInput

• #5169 a2efba0 Thanks @francinelucca! - fix(ActionList): do not truncate description by default

• #5254 ac6ddcd Thanks @hussam-i-am! - Convert UnstyledTextInput to use CSS Modules behing feature flag

• #5246 c4ecb73 Thanks @keithamus! - Migrate DialogV1 to CSS Modules

Patch Changes

• #5277 a9088e6 Thanks @langermank! - Fix TreeViewItem folder icon color in legacy fallback theme + update VRT

• #4745 3f508c7 Thanks @cihad! - UnderlineNav: Display loading counters only for items with the "counter" prop.

• #5283 d6ea909 Thanks @jonrohan! - Move VisuallyHidden component from team to staff flag

• #5292 d3959f3 Thanks @jonrohan! - Move Stack component from team to staff flag

• #5280 973130e Thanks @jonrohan! - Move Checkbox CSS module feature flag from staff to ga

@primer/[email protected]

Minor Changes

• #5221 11c455c Thanks @jonrohan! - Remove the CSS modules feature flag from Avatar

• #5243 bc9c696 Thanks @hussam-i-am! - Fix small TextInput to be the use the correct font size

• #5228 2da7336 Thanks @jonrohan! - feat(Tooltip): Convert Tooltip to CSS modules behind team flag

• #5122 e021a8f Thanks @TylerJDev! - TreeView: Adds prop truncate, keeps default behavior of truncation but allows for text to wrap when turned off.

• #5210 b1950f5 Thanks @francinelucca! - feat(AnchoredOverlay): allow overlay to reflow

Patch Changes

• #5236 2e5c601 Thanks @jonrohan! - Update Spinner component to correctly use the size prop when both sx and size are provided

• #5200 b28e6b2 Thanks @francinelucca! - fix(ButtonGroup): add toolbar interactions for role toolbar

@primer/[email protected]

Minor Changes

• #5204 209c9b0 Thanks @randall-krauskopf! - Migrate 'InlineMessage' component to use CSS modules

Patch Changes

• #5229 33c5086 Thanks @joshblack! - Update Blankslate description text to always be centered

• #4693 570d4b3 Thanks @renbaoshuo! - fix: hover background in ActionList.Item

• #5196 49cbff2 Thanks @francinelucca! - fix(Treevieew):do not add aria-describedby attribute when empty leading/trailing visual

• #5144 271d063 Thanks @jonrohan! - Move ButtonGroup css module feature flag to staff

@primer/[email protected]

Minor Changes

• #5168 b9749d4 Thanks @TylerJDev! - TreeView: Adds indication of no nodes in a tree item, allows for `aria-expanded even if the item is empty.

• #5202 293c574 Thanks @hussam-i-am! - Update SubNav component to use CSS modules behind the feature flag primer_react_css_modules_team

Patch Changes

• #5225 e732591 Thanks @jonrohan! - chore(Banner): Move Banner CSS module flag from staff to ga

• #5177 26b54d8 Thanks @lukasoppermann! - Allow primitives dep to be if version 9 OR 10

@primer/[email protected]

Permalink to storybook

Minor Changes

• #5156 8e58e4d Thanks @francinelucca! - feat(LabelGroup): render as list by default

• #5167 07b75e7 Thanks @jonrohan! - Convert Details to css module behind feature flag

• #5195 d349cfc Thanks @jonrohan! - * Convert SkeletonAvatar to CSS modules behind the feature flag

  • Convert SkeletonBox to CSS modules behind the feature flag
  • Convert SkeletonText to CSS modules behind the feature flag

• #5187 2ab7b9e Thanks @jonrohan! - Convert Radio to css modules behind feature flag

• #5129 e27decd Thanks @TylerJDev! - Overlay: Adds min-width to container to improve responsiveness

• #5040 8d9a357 Thanks @joshblack! - Update BranchName to use CSS Modules behind feature flag

• #5188 573ae51 Thanks @randall-krauskopf! - Migrated Spinner component to use support CSS modules

• #5193 ed3d8c1 Thanks @randall-krauskopf! - Migrated VisuallyHidden to CSS Modules

• #4878 73312d8 Thanks @TylerJDev! - Move aria-* attributes to ProgressBar.Item and marks ProgressBar.Item as `role="progressbar".

• #5194 719def7 Thanks @randall-krauskopf! - Migrate Select component to css modules

• #5192 cbeed21 Thanks @hussam-i-am! - Update Header component to use CSS modules behind the feature flag primer_react_css_modules_team

• #5015 1473c26 Thanks @francinelucca! - feat(Details): Add summary subcomponent

• #5197 ad84d4f Thanks @randall-krauskopf! - Convert Pagehead to CSS Modules

• #5134 6713e72 Thanks @TylerJDev! - AvatarStack: Adds keyboard support to AvatarStack

• #5060 33396ea Thanks @jonrohan! - Remove CSS modules feature flag from Label component

• #5185 461ae57 Thanks @broccolinisoup! - SelectPanel: Allow using SelectPanel in FormControl

• #5148 002be35 Thanks @jonrohan! - Remove the CSS modules feature flag from the Link component

• #5106 851c857 Thanks @mperrotti! - Adds NavList.GroupHeading component that can be used instead of the ActionList.Group 'title' prop if you need to render something besides a string

Patch Changes

• #5213 a5d7fe3 Thanks @langermank! - Bug fix: ButtonBase sx base styles leaking into CSS modules feat flag

• #5214 916ed95 Thanks @jonrohan! - Convert Stack to CSS modules behind feature flag

• #5146 ad554da Thanks @jonrohan! - Move Checkbox css module feature flag to staff

• #5171 8138dee Thanks @alondahari! - catch TooltipV2 errors in old browsers as a temp fix for unnecessary Sentry reports

• #5140 73796d3 Thanks @francinelucca! - fix(SegmentedControl): set global focus styles

• #5201 29a9770 Thanks @joshblack! - Update the foreground color for FormControl.Caption to use the control tokens when disabled

• #5182 31d9a05 Thanks @francinelucca! - fix(DataTable): export datatable utility types

• #5027 9a30c63 Thanks @francinelucca! - fix(FormControl): allow required check boxes in CheckboxGroup

• #5147 e421f32 Thanks @jonrohan! - Move CounterLabel css modules feature flag to staff

@primer/[email protected]

Patch Changes

• #5162 a5feea7 Thanks @joshblack! - Update generated docs for draft components to use experimental instead

@primer/[email protected]

Permalink to storybook

In this release, we're beginning a transition of Primer React from styled-components to CSS Modules. In addition, we promoted several components that have been improved for accessibility and removed components that have been deprecated.

For more information about this release, check out our discussion post. If you run into any issues when migrating, or have any questions or feedback, we'd love to hear from you in that discussion!

Major Changes

• #4953 04e8c9c Thanks @iansan5653! - Delete deprecated draft components MarkdownEditor, MarkdownInput, and InlineAutocomplete

• #4800 482b4d6 Thanks @joshblack! - Update Primer React to emit _.css files that are imported by emitted _.js files for styling

• #4992 d1d911a Thanks @joshblack! - Move Octicon, Pagehead, Dialog (v1), and Tooltip (v1) to @primer/react/deprecated

• #4783 7c57f40 Thanks @joshblack! - Remove the SSRProvider component and useSSRSafeId hook

• #5075 de7dbde Thanks @joshblack! - Remove wildcard exports from @primer/react

• #4784 b518005 Thanks @joshblack! - Remove temporary folders for TypeScript resolution of sub-paths

• #4785 b74c47f Thanks @joshblack! - The drafts entrypoint has been removed from @primer/react. Use
  @primer/react/experimental instead.

• #4940 4d3b504 Thanks @langermank! - Refactor ButtonBase component to use CSS modules behine flag

• #4781 2d7307a Thanks @joshblack! - Remove the deprecated FilterList component from Primer React

• #4807 055c9a7 Thanks @langermank! - Remove deprecated Button component

Minor Changes

• #5097 2a3c473 Thanks @randall-krauskopf! - Added className prop to the AvatarStack component

• #5113 c28378e Thanks @randall-krauskopf! - Add className prop to FormControl.Label component

• #4814 1cda89c Thanks @langermank! - Add link variant to Button

• #4965 5426a9a Thanks @joshblack! - Update CounterLabel to use CSS Modules behind feature flag

• #5064 29f33ce Thanks @broccolinisoup! - Tooltip: Do not export all types publicly in the experimental bundle

• #4956 15cb90f Thanks @francinelucca! - fix(PageHeader): add role prop and aria-label in top-level element

• #4939 9936add Thanks @TylerJDev! - Adds aria-describedby for LeadingVisual and TrailingVisual in TextInput; adds new prop loaderText to convey loading state to screen readers

• #4804 fd2c705 Thanks @joshblack! - Remove experimental TabPanels component in preference of UnderlinePanels

• #4771 92e05f7 Thanks @TylerJDev! - Set openOnFocus default to false, making the menu closed initially rather than opening on focus of input

• #4798 0fa60a4 Thanks @joshblack! - Add the deprecated Dialog, Octicon, Pagehead, TabNav, and Tooltip components to @primer/react/deprecated

• #4951 c9009de Thanks @francinelucca! - fix(Pagination): Use anchor instead of button for disabled prev/next controls

• #4834 7ce1fda Thanks @langermank! - Add size and weight props to Text

• #5010 8385c33 Thanks @joshblack! - Promote Dialog, Tooltip, and Stack from @primer/react/experimental to @primer/react

• #4962 1977a68 Thanks @joshblack! - Update Checkbox component to use CSS Modules behind feature flag

• #5102 2742ee5 Thanks @randall-krauskopf! - Add classname prop support to ActionList.Description component

• #4976 f448b1b Thanks @joshblack! - Add certain wildcard exports to named entry points

• #4819 0112347 Thanks @joshblack! - Update Heading component to use CSS Modules behind feature flag

• #4913 6c9121e Thanks @joshblack! - Update Banner to use CSS Modules behind feature flag

• #4893 1b098ed Thanks @jonrohan! - Refactor Label to use CSS modules behind the primer_react_css_modules_team feature flag

• #4884 46dc2f3 Thanks @langermank! - Bump primer/primitives v9

• #5099 cb21a38 Thanks @joshblack! - Add ButtonBase to @primer/react/experimental to help with wildcard import interop

• #4994 be58fff Thanks @camertron! - [SegmentedControl, Autocomplete] Support passing React.ReactElements for icons.

• #4750 414c140 Thanks @iansan5653! - Add KeybindingHint component for indicating an available keyboard shortcut

• #5074 e4965ed Thanks @joshblack! - Add the `useFeatureFlag...

@primer/[email protected]

Minor Changes

• #5097 2a3c473 Thanks @randall-krauskopf! - Added className prop to the AvatarStack component

• #5113 c28378e Thanks @randall-krauskopf! - Add className prop to FormControl.Label component

• #5102 2742ee5 Thanks @randall-krauskopf! - Add classname prop support to ActionList.Description component

• #5099 cb21a38 Thanks @joshblack! - Add ButtonBase to @primer/react/experimental to help with wildcard import interop

• #4994 be58fff Thanks @camertron! - [SegmentedControl, Autocomplete] Support passing React.ReactElements for icons.

• #5100 b0d858a Thanks @francinelucca! - fix(ProgressBar): add aria-valuetext attribute

• #5115 e94f0a1 Thanks @randall-krauskopf! - Add 'className' prop to Dialog component

• #5130 661e94c Thanks @randall-krauskopf! - Add className prop support to Textarea component

Patch Changes

• #5126 f574372 Thanks @langermank! - Add support for aria-disabled in Button

• #5128 adf8c4f Thanks @stephaniegiang! - Update confirmation dialog body to default color. Removing the muted color override.

• #5041 4da550e Thanks @francinelucca! - fix(TooltipV2): always add aria-hidden

• #5132 623a411 Thanks @langermank! - Bug fix: ActionList Group className prop

• #5111 802568a Thanks @joshblack! - Update CSS styles for CounterLabel to allow overrides for color, background color

@primer/[email protected]

Minor Changes

• #5064 29f33ce Thanks @broccolinisoup! - Tooltip: Do not export all types publicly in the experimental bundle

• #5010 8385c33 Thanks @joshblack! - Promote Dialog, Tooltip, and Stack from @primer/react/experimental to @primer/react

• #5074 e4965ed Thanks @joshblack! - Add the useFeatureFlag hook to @primer/react/experimental

Patch Changes

• #5059 682e787 Thanks @gwwar! - Fixes negative and invalid pages in data table pagination on re-render.

• #5078 3b7bf41 Thanks @jonrohan! - Set the min-width of IconButton to unset to resolve layout issues.

• #5062 0f5d5e0 Thanks @jonrohan! - Move CSS modules feature flag from staff to ga for Avatar component

• #5082 212714c Thanks @langermank! - Add focus styles to Pagination component

• #5077 6490b27 Thanks @jonrohan! - Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles

• #5055 73135c1 Thanks @francinelucca! - fix(Banner): rewrite PrimaryAction & SecondaryAction types

• #5068 5f7bd0b Thanks @jonrohan! - fix for toggleStyledComponent utility, When the feature flag is enabled and sx prop is passed in use, Box

• #5091 4218bef Thanks @jonrohan! - Bug fix for IconButton to respect the style prop width when the feature flag is on.

• #5073 472967a Thanks @siddharthkp! - SelectPanel: Fix items not being selected when defined within scope (track selection by item.id)

• #5066 702ba5c Thanks @jonrohan! - Use the IconButton for the close button on Dialog

• #5079 a2e5671 Thanks @jonrohan! - Correctly pass styled system typography and common props to the Box component in the Text component when the CSS modules feature flag is enabled.

@primer/[email protected]

Permalink to storybook

Minor Changes

• #5021 cff067a Thanks @joshblack! - Add ResponsiveValue type to @primer/react entrypoint

Patch Changes

• #5053 2703d0c Thanks @siddharthkp! - Banner: Fix margin for inline actions