@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

@primer/[email protected]

Permalink to storybook

Major Changes

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

Patch Changes

• #5036 6671a20 Thanks @langermank! - ActionList.Group: Fix styles for description

• #5033 0b83fe9 Thanks @siddharthkp! - SelectPanel: Fix font weight from active styles for modern ActionList (behind feature flag primer_react_select_panel_with_modern_action_list)

@primer/[email protected]

Permalink to storybook

Major Changes

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

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

Minor Changes

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

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

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

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

• #5007 c909285 Thanks @lukasoppermann! - ProgressBar: Add bg prop to ProgressBar.Item

• #4960 21c3fce Thanks @joshblack! - Add support for experimental IssueLabel component

• #5002 9bd5c89 Thanks @jonrohan! - chore(AvatarPair): Convert AvatarPair to CSS modules

Patch Changes

• #5026 3302440 Thanks @siddharthkp! - Banner: Fix alignment of secondary action without primary action

• #5018 8e4beae Thanks @jonrohan! - Remove the CSS modules feature flag from Heading

• #5023 1691e46 Thanks @jonrohan! - Move Button component feature flag from primer_react_css_modules_team to primer_react_css_modules_staff

• #5020 31f03fb Thanks @jonrohan! - Move Text component feature flag from primer_react_css_modules_staff to primer_react_css_modules_ga

• #5001 597d285 Thanks @jonrohan! - Migrate ButtonGroup component to use CSS modules behind the primer_react_css_modules_team feature flag

• #5022 4395d16 Thanks @jonrohan! - Move Label component feature flag from primer_react_css_modules_staff to primer_react_css_modules_ga

• #4969 0cd6151 Thanks @TylerJDev! - Add initial loading state to live region announcement in TreeView

• #5024 45f3597 Thanks @jonrohan! - Move Avatar component feature flag from primer_react_css_modules_team to primer_react_css_modules_staff

• #5011 7a5205d Thanks @langermank! - Bug fix: Button aria-expanded state (CSS Modules)

@primer/[email protected]

Permalink to storybook

Major Changes

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

Minor Changes

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

Patch Changes

• #5000 b8f6888 Thanks @jonrohan! - Text component CSS module feature flag changed to primer_react_css_modules_staff

• #4975 0b89fc0 Thanks @jonrohan! - Change the Link component feature flag from primer_react_css_modules_staff to primer_react_css_modules_ga

• #4981 c8fe1c6 Thanks @jonrohan! - Removes the feature flag from the Blankslate component to always render with CSS modules.

• #4986 d6471aa Thanks @francinelucca! - fix(Dialog): track mousedown event to prevent accidental closing

• #4967 98d3d13 Thanks @TylerJDev! - Utilizes [disabled] selector instead of :disabled in TooltipV2 to address a false positive

• #4977 1adea12 Thanks @siddharthkp! - SelectPanel: Add role=combobox to filter input (behind feature flag primer_react_select_panel_with_modern_action_list)

• #4971 ff56b04 Thanks @jonrohan! - Changed Heading feature flag from primer_react_css_modules_staff to primer_react_css_modules_ga

• #4989 dc80aa6 Thanks @camertron! - Allow color to be customized for medium-sized IconButtons

• #4968 da0f48b Thanks @siddharthkp! - SelectPanel: Add announcements for screen readers (behind feature flag primer_react_select_panel_with_modern_action_list)

• #4970 44a3dc9 Thanks @joshblack! - Update tab in UnderlinePanels to set explicit type

• #5000 b8f6888 Thanks @jonrohan! - Label component CSS module feature flag changed to primer_react_css_modules_staff

• #4995 8a1ee22 Thanks @lukasoppermann! - ProgressBar: Adding default gap between sections for progressbars with more than one section

• #4966 c097e96 Thanks @siddharthkp! - SelectPanel: Fix focus and selection styles for Windows high contrast themes (behind feature flag primer_react_select_panel_with_modern_action_list)

• #4997 dc2d1f3 Thanks @TylerJDev! - Popover: Add note on deprecation of caret in v38

• #4987 b82286d Thanks @langermank! - Bump stylelint + fixes