-
Notifications
You must be signed in to change notification settings - Fork 598
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove default theme prop #1094
Conversation
🦋 Changeset detectedLatest commit: da668d4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-components/4NgEKUST5Qrq7GejYkuoTswBiY3d |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to my naive eyes!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left a couple comments, but nothing blocking. One other general question I have is whether or not we should set up BaseStyles
to render a ThemeProvider
and take a theme
prop? We might be able to pass the Primer theme into the ThemeProvider
if the user doesn't pass in a theme prop, and handle the color modes switching there too? Not sure if that's an approach that's already been considered, might be missing something.
const {borderColor} = getBorderColor(props) | ||
const {borderWidth} = getBorderWidth(props) | ||
const theme = React.useContext(ThemeContext) | ||
const propsWithTheme = {...props, theme: props.theme ?? theme} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain why this is necessary? If the theme doesn't exist in props
why would ThemeContext
still work?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since Caret is not a styled component, we need to explicitly get the theme from context and use it as a fallback when evaluating the system props in the lines below (i.e. getBg()
).
@@ -157,7 +156,7 @@ const PaginationContainer = styled.nav` | |||
` | |||
|
|||
export type PaginationProps = { | |||
theme: object | |||
theme?: object |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it still necessary to directly pass theme
down to Box
below on line 192? Shouldn't Box
get theme
as a prop if it's wrapped by a theme provider?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we still support the theme
prop in all components, we still want the theme
prop to override the theme from the ThemeProvider. In this PR, we're just making sure that we're not accidentally overriding the ThemeProvider out of the box.
I'm open to removing the theme prop entirely and make people use a ThemeProvider to change the theme but that's a much bigger change that's out of scope for this PR.
Co-authored-by: emplums <emplums@github.com>
I'd rather not make that change in this PR since we'll be revisiting the ThemeProvider/BaseStyles API as part of milestone 2 next week. But I agree that our ThemeProvider API should use the Primer theme by default and provide an easy way to select a color mode. I'm also hesitant to combine BaseStyles (as it's currently implemented) and ThemeProvider because BaseStyles renders a |
BaseStyles was tricky to deal with because it doesn't expose the ability to have any control over the styling of As @emplums pointed out at the time, I think we are probably using |
That's fair @colebemis just wanted to make sure we were still thinking about it! |
Ah, thanks for the context, @jclem! That's helpful to know. |
Problem
We currently set the default
theme
prop of every component to our Primer theme. We did this to allow consumers to use components in their app without needing to wrap everything in a ThemeProvider. However, setting the defaulttheme
prop of components can sometimes override the theme provided by theThemeProvider
and cause unexpected theming issues which will prevent us from implementing color modes.Solution
This PR removes the default
theme
prop from every component.Consumers will now need to wrap their app in a
ThemeProvider
component and use the Primer theme:TODO
theme
prop from every component