Uh oh!
There was an error while loading. Please reload this page.
Update TreeView VRT snapshots - #5277
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: 836eab6 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 |
langermanktemporarily deployed
to
github-pages
November 13, 2024 21:51 — with 
GitHub Actions
Inactive
Contributor
size-limit report 📦
|
Contributor
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
langermank
marked this pull request as ready for review
November 13, 2024 22:48
jonrohan
approved these changes
Nov 13, 2024
19 tasks
github-merge-queueBot
pushed a commit
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>
This file contains hidden or 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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Closes #
Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
Merge checklist