Primer React v37 Release

[joshblack]

We’re excited to announce the next major release of Primer React! 🥳 Starting in v37, you’ll see changes to how we style components using CSS Modules along with new components available from @primer/react.

As this change is rolled out, we'd love to hear from you and get feedback on these changes. Let us know in a comment below if you run into any bugs, if a change to a component you were using is unclear, or if you have any other feedback about this release.

New Components ✨

The following components have been promoted from @primer/react/experimental to @primer/react :

• Dialog
• Tooltip
• Stack

Breaking Changes ⚠️

The biggest change in Primer React in v37 is how we handle styling our components. Beginning in this release, we will begin using CSS Modules and move away from our current usage of styled-components. This changed is based off of the Styling with CSS ADR. In a future major release, we intend to completely remove our usage of styled-components in favor of CSS Modules.

As a result, when bringing Primer React into your project you will need a bundler setup to be aware of how to handle CSS when imported from a JavaScript context.

Package 📦

The npm package for @primer/react has previously supported importing arbitrary subpaths, for example:

import {ExampleImport} from '@primer/react/lib-esm/example/import';

Starting in v37, this pattern of wildcard imports is no longer supported. Instead, use one of the following named entrypoints:

• @primer/react
• @primer/react/experimental
• @primer/react/deprecated
• @primer/react/test-helpers

This change allows the Primer React library to explicitly define what parts of the library are public and are tested appropriately. If there is a component, hook, type, etc from @primer/react that you would like to use but it’s unavailable please reach out! We’re always happy to add new exports to these entrypoints if they’re helpful for you.

Deprecated Components

The following components have been deprecated and moved from @primer/react to @primer/react/deprecated:

Name	Migration Notes
Dialog	Use the latest Dialog component from @primer/react instead
Pagehead
Octicon	Use the corresponding octicon component from @primer/octicons-react with className instead
TabNav	Use the UnderlineNav component from @primer/react instead
Tooltip	Use the latest Tooltip component from @primer/react instead

Removed Components

The following components have been removed from Primer React and are no longer available:

Name	Migration Notes
Button	Use the Button component from @primer/react instead
ButtonClose	Use the IconButton component from @primer/react instead
ButtonDanger	Use the Button component from @primer/react instead
ButtonInvisible	Use the Button component from @primer/react instead
ButtonOutline	Use the Button component from @primer/react instead
ButtonPrimary	Use the Button component from @primer/react instead
ButtonTableList	Component was deprecated in v35 and has now been removed
FilterList	Component was deprecated in v36 and has now been removed
InlineAutocomplete	This component is now maintained internally at GitHub
MarkdownEditor	This component is now maintained internally at GitHub
MarkdownViewer	This component is now maintained internally at GitHub
SSRProvider	This component is no longer necessary and can be removed
TabPanels	Use the experimental UnderlinePanels component instead

Removed Helpers

The following utilities or helpers have been removed from Primer React:

Name	Migration Notes
useSSRSafeId	This helper is no longer necessary, use React.useId() instead

[Nurou]

Hi @joshblack. So Primer React will move toward exclusively using CSS modules internally. Are there (or will there be) any known issues with using other styling solutions alongside Primer React (once components have been migrated), such as Styled Components or even a utility-first framework (e.g. Tailwind)?

Thanks!

[joshblack]

Hi there, @Nurou! 👋 Great question, our goal is definitely that this should work alongside other styling techniques. I think the big issue on our radar at the moment is making sure that components support a className prop and that the selectors that we author have minimal specificity so that overrides don't break unexpectedly.

If there are any other issues that come up, please reach out! Also wanted to say thanks for asking the question, appreciate it a ton 🙏