Name fix #686
Merged
Name fix #686
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: b762926 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 |
lukasoppermann
requested review from
mperrotti and
langermank
and removed request for
tobiasahlin and
siddharthkp
Variables changedNo variables changed |
Design Token Diff
|
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
lukasoppermann
added
skip changeset
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
lukasoppermann
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Merged
19 tasks
ktravers
added a commit
to primer/react
that referenced
this pull request
Nov 13, 2024
For the directory icon color, [previously, we were using](https://github.com/primer/react/blob/21adedbc95e39a1b62ca2e0c31e87ac81e11911b/packages/react/src/TreeView/TreeView.module.css#L211): ``` var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #CUSTOM_FALLBACK_FOR_EACH_MODE)) ``` `--treeViewItem-leadingVisual-bgColor-rest` was replaced by `--treeViewItem-leadingVisual-iconColor-rest` in primer/primitives#686. When that replacement was made, we didn't update the legacy theme in this repo (makes sense), so since that variable no longer existed, we always use the fallback hex code. With these changes, we're now using `--treeViewItem-leadingVisual-iconColor-rest`. That variable works for all modes except dark high contrast. I believe this is because whatever [hex code that variable represents in dark high contrast mode](https://github.com/primer/primitives/blob/9f1033462619f7a3e3a191dcfc0a50cf7708c79a/src/tokens/functional/color/dark/patterns-dark.json5#L2081) (#b7bdc8) is different than [this repo's custom legacy theme dark high contrast hex code](https://github.com/primer/react/blob/21adedbc95e39a1b62ca2e0c31e87ac81e11911b/packages/react/src/legacy-theme/ts/color-schemes.ts#L3535) (#f0f3f6). As a workaround, I've added this workaround for dark high contrast mode specifically. We should implement a more robust solution in the future, either updating `--treeViewItem-leadingVisual-iconColor-rest` to support the expected color for dark high contrast mode, or updating the expected color to match the current dark high contrast mode color.
github-merge-queue bot
pushed a commit
to primer/react
that referenced
this pull request
Nov 14, 2024
* replace sx with Primer CSS utility classes where possible As of https://github.com/primer/react/blob/fca4ec98f2e3ef5e5c3298320e3ab2050593709c/contributor-docs/adrs/adr-016-css.md, Primer has decided to move away from using styled system props and prefers CSS for styling over styled system props due to performance concerns with `sx` props. See linked ADR for full details. * add support for style prop to TreeView Root * Convert ul to css modules Per instructions: https://github.com/primer/react/blob/ac6ddcd4b15526dd6f5ad6072a4daa57087eb1e7/contributor-docs/migrating-to-css-modules.md * Reference CSS module classnames * update skeleton components to use css modules * add test for className support * add changeset * auto fix with 'npm run lint:css:fix' * fix syntax for multiple modules classes * update variable to prevent regression test failures * workaround for directory icon color For the directory icon color, [previously, we were using](https://github.com/primer/react/blob/21adedbc95e39a1b62ca2e0c31e87ac81e11911b/packages/react/src/TreeView/TreeView.module.css#L211): ``` var(--treeViewItem-leadingVisual-bgColor-rest, var(--color-tree-view-item-chevron-directory-fill, #CUSTOM_FALLBACK_FOR_EACH_MODE)) ``` `--treeViewItem-leadingVisual-bgColor-rest` was replaced by `--treeViewItem-leadingVisual-iconColor-rest` in primer/primitives#686. When that replacement was made, we didn't update the legacy theme in this repo (makes sense), so since that variable no longer existed, we always use the fallback hex code. With these changes, we're now using `--treeViewItem-leadingVisual-iconColor-rest`. That variable works for all modes except dark high contrast. I believe this is because whatever [hex code that variable represents in dark high contrast mode](https://github.com/primer/primitives/blob/9f1033462619f7a3e3a191dcfc0a50cf7708c79a/src/tokens/functional/color/dark/patterns-dark.json5#L2081) (#b7bdc8) is different than [this repo's custom legacy theme dark high contrast hex code](https://github.com/primer/react/blob/21adedbc95e39a1b62ca2e0c31e87ac81e11911b/packages/react/src/legacy-theme/ts/color-schemes.ts#L3535) (#f0f3f6). As a workaround, I've added this workaround for dark high contrast mode specifically. We should implement a more robust solution in the future, either updating `--treeViewItem-leadingVisual-iconColor-rest` to support the expected color for dark high contrast mode, or updating the expected color to match the current dark high contrast mode color. * use `where` with attribute selector Co-authored-by: Jon Rohan <yes@jonrohan.codes> * use up-to-date color variable Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> * Use `where` with attr selectors Co-authored-by: Jon Rohan <yes@jonrohan.codes> * drop PRIVATE_ prefix from css module classnames * Remove unnecessary workaround for dark high contrast mode Variable problem referenced in e97cf72 was resolved by #5277. * test(vrt): update snapshots --------- Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: langermank <langermank@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Renamed token:
treeViewItem-leadingVisual-bgColor-resttotreeViewItem-leadingVisual-iconColor-rest