@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

@primer/[email protected]

Permalink to storybook

Major Changes

• #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

Minor Changes

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

• #4885 373ce95 Thanks @jonrohan! - Refactor Avatar component to use CSS modules behind feature flag

• #4906 dbf82f4 Thanks @siddharthkp! - SelectPanel: Support PageDown and PageUp for keyboard navigation

  SelectPanel: Label listbox by the title of the panel

Patch Changes

• #4910 c2e4d5e Thanks @TylerJDev! - Changes the accessible name of the "toggle" button in LabelGroup to contain the visual label

• #4941 80fe025 Thanks @langermank! - Bug fix: Button loading spinner color

• #4957 6874b89 Thanks @langermank! - Add missing wide CSS + className to Stack

• #4648 c6931d2 Thanks @siddharthkp! - ActionMenu: Make sure event handlers on ActionMenu.Button and ActionMenu.Anchor are called

• #4972 082b4e7 Thanks @joshblack! - Update issue where FormControl.Caption was rendering incorrectly when CSS Modules flags were enabled

• #4794 5f996c6 Thanks @broccolinisoup! - SelectPanel: Update SelectPanel to use modern ActionList behind a feature flag primer_react_select_panel_with_modern_action_list

• #4954 af7f589 Thanks @joshblack! - Banner: Update alignment of actions when it is dismissible and has a hidden title

• #4943 c282642 Thanks @langermank! - Button bug fixes: invisible variant icon colors missing variables + icon button disabled state

@primer/[email protected]

Permalink to storybook

Minor Changes

• #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

• #4923 1dded73 Thanks @jonrohan! - Move the Blankslate css modules feature flag to primer_react_css_modules_ga

• #4779 551aff3 Thanks @TylerJDev! - Adds dependencies to Dialog focus trap to ensure focus trap is reset when content within changes

• #4874 4c69b38 Thanks @jonrohan! - Refactor Text to CSS modules behind primer_react_css_modules_team feature flag

Patch Changes

• #4916 7a24a01 Thanks @jonrohan! - Moving Link CSS modules to staff feature flag

• #4911 9846375 Thanks @TylerJDev! - Include current selected menu item in accessible name when using an aria-label in SegmentedControl

• #4915 69922d1 Thanks @jonrohan! - Move Heading component to staff feature flag

• #4891 ae00350 Thanks @langermank! - StackItem responsive grow bug fix

• #4928 caf4bcf Thanks @langermank! - Bug fix: invisible Button variant missing background color when disabled

• #4865 ce2c674 Thanks @camertron! - Update Label font weight to match Rails component

• #4895 0208e9e Thanks @langermank! - Bump primer/primitives v9.0.3

@primer/[email protected]

Permalink to documentation

Patch Changes

• #4870 3ca513c824fc50b49a88320ec98dd3f1a15d25b9 Thanks @jonrohan! - Add :where() selector to classes that land on nodes that have a sx prop.

• #4811 5ee8704ff5b85ec2b848dcfc10c3a8ae40a3a892 Thanks @siddharthkp! - Octicon: Add aria-label to the Icon instead of it's container

• #4858 6c69bffb288caf8006cc3316afe86396d9987e49 Thanks @jonrohan! - Refactor Link, Blankslate, Heading to use :where css

• #4866 587603bcd750e558f443b071deb3dac90d004a90 Thanks @langermank! - Add className to Blankslate

• #4831 0d7a02a062d19b8909124b0756a41bec6455a39e Thanks @siddharthkp! - TextInput: Update trailing action styles for hover state