Skip to content

TreeView: Add nesting indicator lines - #2350

Merged
colebemis merged 53 commits into
mainfrom
treeview-nested-lines
Sep 21, 2022
Merged

TreeView: Add nesting indicator lines#2350
colebemis merged 53 commits into
mainfrom
treeview-nested-lines

Conversation

@colebemis

@colebemiscolebemis commented Sep 19, 2022

Copy link
Copy Markdown
Contributor

Summary

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

👉 Try it out

BeforeAfter
CleanShot 2022-09-19 at 16 55 02CleanShot 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

changeset-botBot commented Sep 19, 2022

Copy link
Copy Markdown

🦋 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
NameType
@primer/reactPatch

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

github-actionsBot commented Sep 19, 2022

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js75.78 KB (0%)
dist/browser.umd.js76.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 mperrottiSeptember 19, 2022 23:57
@colebemis
colebemis changed the base branch from main to treeview-arrow-keysSeptember 19, 2022 23:57
@colebemis
colebemis temporarily deployed to github-pages September 19, 2022 23:59 Inactive
@colebemis

Copy link
Copy Markdown
ContributorAuthor

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 mainSeptember 20, 2022 16:15
@colebemis
colebemis temporarily deployed to github-pages September 20, 2022 17:10 Inactive
Comment threadsrc/TreeView/TreeView.tsx Outdated
// 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
Copy Markdown
Member

Choose a reason for hiding this comment

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

🔥

@joshblackjoshblack left a comment

Copy link
Copy Markdown
Member

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
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

❤️

Comment threadsrc/TreeView/TreeView.tsx Outdated
@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 mainSep 21, 2022
@colebemis
colebemis deleted the treeview-nested-lines branch September 21, 2022 03:30
@primer-cssprimer-css mentioned this pull request Sep 21, 2022
Sign up for freeto 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.

3 participants

@colebemis@mperrotti@joshblack