-
Notifications
You must be signed in to change notification settings - Fork 599
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
Update TreeView
VRT snapshots
#5277
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 |
size-limit report 📦
|
…into reset-treeview-snaps
👋 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! |
* 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>
Closes #
Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
Merge checklist