Skip to content
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

adds resolved color scheme to theme context #1679

Merged
merged 3 commits into from
Dec 2, 2021

Conversation

mattcosta7
Copy link
Collaborator

Describe your changes here.

Closes #1664

This just adds the 'colorscheme' that was selected in the theme provider to the context

Screenshots

No visual change

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@mattcosta7 mattcosta7 requested review from a team and jfuchs December 2, 2021 00:47
@changeset-bot
Copy link

changeset-bot bot commented Dec 2, 2021

🦋 Changeset detected

Latest commit: 2b96351

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/components Minor

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

src/ThemeProvider.tsx Outdated Show resolved Hide resolved
src/ThemeProvider.tsx Outdated Show resolved Hide resolved
@colebemis
Copy link
Contributor

Something strange is going on with the package-lock.json 🤔 Probably an npm version issue

@mattcosta7
Copy link
Collaborator Author

Something strange is going on with the package-lock.json 🤔 Probably an npm version issue

I saw that too - what version lock/npm are y'all running, I can try to switch

@colebemis
Copy link
Contributor

I'm running node 16, npm 8

@mattcosta7
Copy link
Collaborator Author

I'm running node 16, npm 8

ahh cool. the codespace I opened was 14 and 6. The nvmrc says 14.

I'll upgrade and see if that helps

src/ThemeProvider.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thanks for the PR, @mattcosta7 ❤️

@colebemis
Copy link
Contributor

Oh, would you mind adding a test for this in https://github.com/primer/react/blob/main/src/__tests__/ThemeProvider.test.tsx?

@mattcosta7
Copy link
Collaborator Author

Oh, would you mind adding a test for this in https://github.com/primer/react/blob/main/src/__tests__/ThemeProvider.test.tsx?

Sure thing, I didn't see one for resolvedColorMode, so I let it slide, but will add.

I think we should also probably read the outer scope, an pass down the resolvedColorScheme to children themes too, which I believe won't get that returned from applyColorSchemes

@colebemis
Copy link
Contributor

Sure thing, I didn't see one for resolvedColorMode, so I let it slide, but will add.

Just noticed that too. Oops 😅

I think we should also probably read the outer scope, an pass down the resolvedColorScheme to children themes too, which I believe won't get that returned from applyColorSchemes

Not sure I understand. Could you elaborate? I think the logic for nested themes still works with this change.

@mattcosta7
Copy link
Collaborator Author

mattcosta7 commented Dec 2, 2021

I think we should also probably read the outer scope, an pass down the resolvedColorScheme to children themes too, which I believe won't get that returned from applyColorSchemes

Not sure I understand. Could you elaborate? I think the logic for nested themes still works with this change.

Ahh nevermind on this. I misread the deepmerge when generating the 'resolvedTheme' and thought we wouldn't have the 'colorSchemes' object for them, but we do, so all good :-D

@mattcosta7
Copy link
Collaborator Author

mattcosta7 commented Dec 2, 2021

Oh, would you mind adding a test for this in https://github.com/primer/react/blob/main/src/__tests__/ThemeProvider.test.tsx?

Done. Added a handful of cases, let me know if there's another specific case that would be worth testing

return <Text data-testid="text">{resolvedColorScheme}</Text>
}

const schemeToApply = 'totally-invalid-colorscheme'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😆

@colebemis colebemis enabled auto-merge (squash) December 2, 2021 21:24
auto-merge was automatically disabled December 2, 2021 21:25

Head branch was pushed to by a user without write access

@colebemis colebemis merged commit 006cc80 into primer:main Dec 2, 2021
@primer-css primer-css mentioned this pull request Dec 2, 2021
pksjce pushed a commit that referenced this pull request Dec 20, 2021
* Add `resolvedColorScheme` property to the object returned by `useTheme()

* Add `resolvedColorScheme` property to the object returned by `useTheme()

* Update .changeset/red-bottles-prove.md

Co-authored-by: Cole Bemis <colebemis@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useTheme should know which colorscheme is currently applied
2 participants