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

Update TreeView VRT snapshots #5277

Merged
merged 5 commits into from
Nov 13, 2024
Merged

Update TreeView VRT snapshots #5277

merged 5 commits into from
Nov 13, 2024

Conversation

langermank
Copy link
Contributor

Closes #

Changelog

New

Changed

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Copy link

changeset-bot bot commented Nov 13, 2024

🦋 Changeset detected

Latest commit: 836eab6

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

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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

@langermank langermank added the skip changeset This change does not need a changelog label Nov 13, 2024
@github-actions github-actions bot temporarily deployed to storybook-preview-5277 November 13, 2024 21:51 Inactive
Copy link
Contributor

github-actions bot commented Nov 13, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 98.68 KB (-0.11% 🔽)
packages/react/dist/browser.umd.js 99.05 KB (+0.06% 🔺)

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 13, 2024
Copy link
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 langermank removed the skip changeset This change does not need a changelog label Nov 13, 2024
@langermank langermank added this pull request to the merge queue Nov 13, 2024
Merged via the queue into main with commit a9088e6 Nov 13, 2024
49 checks passed
@langermank langermank deleted the reset-treeview-snaps branch November 13, 2024 22:59
@primer primer bot mentioned this pull request Nov 13, 2024
@ktravers ktravers mentioned this pull request Nov 14, 2024
19 tasks
ktravers added a commit that referenced this pull request Nov 14, 2024
Variable problem referenced in e97cf72
was resolved by #5277.
github-merge-queue bot 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants