@primer/[email protected]

Permalink to documentation

Minor Changes

• #5324 bd5f0d4 Thanks @hussam-i-am! - Convert SelectPanel to CSS modules behind feature flag

• #5336 59a6654 Thanks @hussam-i-am! - Convert SegmentedControl to use CSS modules behind feature flag

• #5339 dc2f083 Thanks @jonrohan! - Remove the CSS modules feature flag from ButtonGroup

• #5332 3fcfba8 Thanks @hussam-i-am! - Convert PageHeader to CSS modules behind feature flag

• #5326 1d79cc5 Thanks @hussam-i-am! - Convert KeybindingHint to CSS modules behind feature flag

• #5361 2fbdd3b Thanks @JelloBagel! - Convert BaseStyles to CSS modules behind team feature flag

• #5299 8673664 Thanks @jonrohan! - Update AvatarStack component to use CSS modules behind the feature flag primer_react_css_modules_team

• #5376 167c8d4 Thanks @hussam-i-am! - fix(useFormControlForwardedProps): do not pass through validationStatus

• #5337 7d9bb0c Thanks @jonrohan! - Remove the CSS modules feature flag from Checkbox

• #5282 d6fe52e Thanks @jonrohan! - Remove the CSS modules feature flag from Banner

• #5367 844e41f Thanks @langermank! - Convert ActionList.Heading to CSS Modules

• #5302 82bf850 Thanks @randall-krauskopf! - Convert Pagination component to use CSS modules

• #5271 05db651 Thanks @randall-krauskopf! - Update Token, IssueLabelToken, AvatarToken components to use CSS Modules

• #5342 39df71e Thanks @joshblack! - Update FormControl sub-components to use new styled components format for migration

• #5338 4c7056b Thanks @jonrohan! - Remove the CSS modules feature flag from Checkbox

• #5222 b5ff840 Thanks @jonrohan! - feat(ButtonBase): Remove css modules feature flag from ButtonBase

• #5375 ba0a6c0 Thanks @langermank! - Convert ActionList (wrapper) and ActionList.Divider to CSS Modules

Patch Changes

• #5343 70005b8 Thanks @jonrohan! - BugFix: Fix issue in ButtonGroup Overlay screenshots by updating the selector to use :is(button, a) and :first-of-type and :last-of-type pseudo-classes.

• #5402 6978865 Thanks @francinelucca! - fix(PageHeader): use display block insteaf of flex when FF off

• #5383 efc5c47 Thanks @jonrohan! - Move VisuallyHidden component css module feature flag to ga

• #5394 1a51288 Thanks @jonrohan! - Move Dialog component css module feature flag to staff

• #5397 3dd1e5e Thanks @jonrohan! - Move Textarea component css module feature flag to staff

• #5358 b08f770 Thanks @langermank! - ActionList UI bug fixes

• #5363 3e0fc7c Thanks @joshblack! - Update line-height value for Table to be a valid calc() expression

• #5377 6bf3e9e Thanks @jonrohan! - Move Radio component css module feature flag to ga

• #5345 e231b5f Thanks @francinelucca! - docs: fix *.docs.json story ids

• #5379 2ced9a3 Thanks @jonrohan! - Move Details component css module feature flag to ga

• #5385 2afdd5d Thanks @jonrohan! - Move Spinner component css module feature flag to ga

• #5391 f0a530b Thanks @jonrohan! - Move Popover component css module feature flag to staff

• #5396 64bb31b Thanks @jonrohan! - Move Textarea component css module feature flag to staff

• #5389 2129f9d Thanks @jonrohan! - Move Timeline component css module feature flag to staff

• #5395 a90da75 Thanks @jonrohan! - Move DialogV1 component css module feature flag to staff

• #5390 20957b4 Thanks @jonrohan! - Move ProgressBar component css module feature flag to staff

• #5392 184e292 Thanks @jonrohan! - Move CheckboxOrRadioGroup component css module feature flag to staff

• #5393 eec92da Thanks @jonrohan! - Move UnstyledTextInput component css module feature flag to staff

@primer/[email protected]

Minor Changes

• #5325 cdc4da1 Thanks @hussam-i-am! - Convert SelectPanel2 to CSS modules

• #5252 bb0cd90 Thanks @iansan5653! - Adds keybindingHint prop to TooltipV2 and IconButton, updates onEmphasis design variant for KeybindingHint, and adds size prop with small option to KeybindingHint.

• #5294 912a0d7 Thanks @randall-krauskopf! - Update Textarea component to use CSS module

• #5227 1cfbf63 Thanks @hussam-i-am! - Convert TextInput to CSS module behind feature flag

• #5150 e89edbc Thanks @jonrohan! - Convert Breadcrumbs to css module behind feature flag

• #5298 3935811 Thanks @hussam-i-am! - Convert Dialog v2 to CSS Modules behind feature flag

• #5267 ffc8f91 Thanks @ktravers! - Update TreeView component to use CSS Modules

• #5320 e9e4d1c Thanks @hussam-i-am! - Add forward ref to Popover

• #5306 84c3e62 Thanks @randall-krauskopf! - Convert PageLayout to CSS modules behind feature flags

• #5319 37c4e97 Thanks @hussam-i-am! - Do not pass through hoverColor prop into DOM element

• #5257 4aa40c9 Thanks @hussam-i-am! - Convert TextInput to use data attributes

• #5329 e7547e8 Thanks @francinelucca! - Update Timeline component to use CSS modules behind the feature flag primer_react_css_modules_team

• #5304 a3fc488 Thanks @TylerJDev! - Convert ProgressBar to CSS modules behind feature flag

• #5276 d91dc54 Thanks @hussam-i-am! - Migrate TextInputAction & TextInputInnerVisualSlot to CSS Modules behind feature flag

• #5300 65802fc Thanks @francinelucca! - Update Popover component to use CSS modules behind the feature flag primer_react_css_modules_team

Patch Changes

• #5285 057d868 Thanks @jonrohan! - Move Select component from team to staff flag

• #5279 aac10fa Thanks @jonrohan! - Move CounterLabel CSS module feature flag from staff to ga

• #5286 d4cb322 Thanks @jonrohan! - Move Spinner component from team to staff flag

• #5288 9d004d0 Thanks @jonrohan! - Move Radio component from team to staff flag

• #5291 8fd0035 Thanks @jonrohan! - Move Pagehead component from team to staff flag

• #5190 32c4fe1 Thanks @mperrotti! - Changes <label> wrapper of FormControl to put padding directly on the label so the entire row is clickable

• #5290 7c94916 Thanks @jonrohan! - Move Details component from team to staff flag

• #5284 8853f5f Thanks @jonrohan! - Move Header component from team to staff flag

• #5275 d1b7bce Thanks @jonrohan! - Convert CheckBoxOrRadioGroup to CSS modules behind feature flag

• #5287 41ae5aa Thanks @jonrohan! - Move BranchName component from team to staff flag

• #5289 cc876d9 Thanks @jonrohan! - Move Skeleton component from team to staff flag

• #5281 b8e138e Thanks @jonrohan! - chore(ButtonGroup): Move ButtonGroup CSS module feature flag from staff to ga

• #5333 f0603fd Thanks @mperrotti! - - Makes {Checkbox|Radio}Group <legend> bold and default font size

  • Makes Checkbox and Radio <label> default font weight

• #5209 556afbd Thanks @dusave! - Check certain refs for nullishness to address HMR issues in dotcom

@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