@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 hook to @primer/react/experimental

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

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

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

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

• #4824 b85d505 Thanks @iansan5653! - Adds new className prop to FormControl component

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

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

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

• #4852 1cb1470 Thanks @joshblack! - Add support for sourcemaps for emitted CSS files

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

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

• #4810 c0425ff Thanks @joshblack! - Update Blankslate component to use CSS Modules behind a feature flag

• #4838 7a3b55d Thanks @joshblack! - Add support for custom icons when a Banner is variant="upsell"

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

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

  SelectPanel: Label listbox by the title of the panel

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

Patch Changes

• #5036 6671a20 Thanks @langermank! - ActionListGroup description style bug fix

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

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

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

• #4806 84d1604 Thanks @langermank! - Add variant prop to Heading for small, medium and large styles

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

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

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

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

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

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

• #4876 9dd95a8 Thanks @TylerJDev! - ActionList: Add more guards for ActionList.Item before utilizing button semantics (behind feature flag primer_react_action_list_item_as_button)

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

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

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

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

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

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

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

• #4774 11e7aef Thanks @langermank! - - Adjust checkbox and radio border color values for high contrast themes

  • Add default border to SegmentedControl
  • Add inset box-shadow to StatusLabel to prep for new border-color in dark high contrast

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

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

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

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

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

• #4766 e74e581 Thanks @broccolinisoup! - chore(deps): Update eslint-plugin-primer-react to latest

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

• #4795 ca6b4b1 Thanks @siddharthkp! - ActionList: Enable focusZone for roles listbox and menu

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

• #4666 04eac62 Thanks @TylerJDev! - ActionList: Adds aria-labelledby to ActionList.TrailingVisual, making it part of the accessible name of ActionList.Item

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

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

• #4768 b7c90ea Thanks @siddharthkp! - Header: Add overflow when there are a lot of items

• #4816 f9bc73c Thanks @siddharthkp! - FilteredActionList: export FilteredActionList from '@primer/react/experimental'

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

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

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

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

• #5086 96ce586 Thanks @jonrohan! - Move Button CSS module feature flag from staff to ga

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

• #4828 1a674f7 Thanks @jonrohan! - Refactor Link component to use CSS modules using the feature flag primer_react_css_modules

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

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

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

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

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

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

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

• #4841 f3b08df Thanks @TylerJDev! - Remove aria-busy from ProgressBar component

• #4857 16c31e6 Thanks @jonrohan! - fix(Blankslate): Don't use Box to render heading when flag is 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

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

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

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

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

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

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

• #5145 ccf7cbe Thanks @jonrohan! - Move Banner css modules feature flag from team to staff

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

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

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

• #5137 bd1f1c2 Thanks @jonrohan! - Make sure all components accept className as a prop on outermost component element.

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

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

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

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

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

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

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

• #4855 873249a Thanks @mattcosta7! - avoid useeffect when syncing theme config

• #4803 527f9a9 Thanks @aprendendofelipe! - Bumps @github/relative-time-element to v4.4.2