Skip to content

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

@changeset-bot
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
@github-actions
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% 🔺)

@langermank langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2024
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2024
@primer primer bot temporarily deployed to github-pages November 13, 2024 22:04 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-5277 November 13, 2024 22:05 Inactive
@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
@github-actions
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 the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2024
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 13, 2024
@langermank langermank marked this pull request as ready for review November 13, 2024 22:48
@langermank langermank requested review from a team as code owners November 13, 2024 22:48
@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 <[email protected]>

* use up-to-date color variable

Co-authored-by: Katie Langerman <[email protected]>

* Use `where` with attr selectors

Co-authored-by: Jon Rohan <[email protected]>

* 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 <[email protected]>
Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: langermank <[email protected]>
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.

3 participants