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

TreeView: Add nesting indicator lines #2350

Merged
merged 53 commits into from
Sep 21, 2022
Merged

TreeView: Add nesting indicator lines #2350

merged 53 commits into from
Sep 21, 2022

Conversation

colebemis
Copy link
Contributor

@colebemis colebemis commented Sep 19, 2022

Summary

Adds lines to indicate the depth of items in a TreeView:

👉 Try it out

Before After
CleanShot 2022-09-19 at 16 55 02 CleanShot 2022-09-19 at 16 55 20
  • On devices without :hover support, the nesting indicator lines appear at all times.
  • On devices with :hover support, the nesting indicator lines fade in when the user mouses over the entire component, or when there's focus inside the component. This makes sure the component remains simple when not in use.
CleanShot.2022-09-19.at.16.56.18.mp4

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Sep 19, 2022

🦋 Changeset detected

Latest commit: 61a2d83

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 19, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 75.78 KB (0%)
dist/browser.umd.js 76.41 KB (0%)

@colebemis colebemis marked this pull request as ready for review September 19, 2022 23:57
@colebemis colebemis requested review from a team and mperrotti September 19, 2022 23:57
@colebemis colebemis changed the base branch from main to treeview-arrow-keys September 19, 2022 23:57
@colebemis colebemis temporarily deployed to github-pages September 19, 2022 23:59 Inactive
@colebemis
Copy link
Contributor Author

This PR is ready for review but let's not merge until we merge #2331

@colebemis colebemis temporarily deployed to github-pages September 20, 2022 00:15 Inactive
Base automatically changed from treeview-arrow-keys to main September 20, 2022 16:15
@colebemis colebemis temporarily deployed to github-pages September 20, 2022 17:10 Inactive
// fade in when the user mouses over the entire component,
// or when there's focus inside the component. This makes
// sure the component remains simple when not in use.
'@media (hover: hover)': {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

Copy link
Member

@joshblack joshblack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So cool, love the usage of grid 🔥

The setup with @media (hover: hover) is slick, love how it easily it falls back on iOS Safari and enhances on Chrome/FF/Safari

@colebemis colebemis temporarily deployed to github-pages September 20, 2022 18:28 Inactive
@colebemis colebemis temporarily deployed to github-pages September 20, 2022 18:54 Inactive
Comment on lines +428 to +432
// On devices with :hover support, the nesting indicator lines
// fade in when the user mouses over the entire component,
// or when there's focus inside the component. This makes
// sure the component remains simple when not in use.
'@media (hover: hover)': {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

src/TreeView/TreeView.tsx Outdated Show resolved Hide resolved
@colebemis colebemis enabled auto-merge (squash) September 21, 2022 03:21
@colebemis colebemis temporarily deployed to github-pages September 21, 2022 03:29 Inactive
@colebemis colebemis merged commit 61a93e2 into main Sep 21, 2022
@colebemis colebemis deleted the treeview-nested-lines branch September 21, 2022 03:30
@primer-css primer-css mentioned this pull request Sep 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants