Skip to content

feat(TreeView): add count prop to TreeView.SubTree - #2455

Merged
joshblack merged 10 commits into
mainfrom
treeview-item-count-prop
Oct 20, 2022
Merged

feat(TreeView): add count prop to TreeView.SubTree#2455
joshblack merged 10 commits into
mainfrom
treeview-item-count-prop

Conversation

@joshblack

Copy link
Copy Markdown
Member

Add the count prop to TreeView.SubTree to display a skeleton loading state with the provided count of items.

Shoutout to @mperrotti for the shimmer styles! 🥳

Screenshots

Screen.Recording.2022-10-19.at.2.28.39.PM.mov

Merge checklist

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

Co-authored-by: Mike Perrotti <mperrotti@users.noreply.github.com>
@joshblack
joshblack requested review from a team and josepmartinsOctober 19, 2022 19:29
@changeset-bot

changeset-botBot commented Oct 19, 2022

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 27c902e

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 Oct 19, 2022

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js77.99 KB (0%)
dist/browser.umd.js78.64 KB (0%)

@joshblack
joshblack temporarily deployed to github-pages October 19, 2022 19:36 Inactive
@joshblack
joshblack temporarily deployed to github-pages October 19, 2022 19:44 Inactive
Comment threadsrc/TreeView/TreeView.stories.tsx Outdated
Comment threaddocs/content/TreeView.mdx Outdated
Comment threadsrc/TreeView/TreeView.tsx Outdated
column-gap: 0.5rem;
height: 2rem;

@media (prefers-reduced-motion: no-preference) {

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.

❤️

@colebemiscolebemis left a comment

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.

Looks great! 🎉

I left a few comments, mostly about documentation and the storybook. The comment about merging the sx prop is the only functional change we might need to make.

Comment thread.changeset/tender-turtles-serve.md Outdated
joshblackand others added 2 commits October 19, 2022 16:42
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
@joshblack
joshblack temporarily deployed to github-pages October 19, 2022 21:50 Inactive
Comment threadsrc/TreeView/TreeView.tsx
>
{Array.from({length: count}).map((_, i) => {
return <SkeletonItem aria-hidden={true} key={i} />
})}

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.

I have a hunch that these skeleton items are overflowing the parent item since the parent item has a hardcoded height. We might need to adjust the height with the sx prop to ensure the skeleton items don't overlap with items below.

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

Just pushed up a fix that tackled this with minHeight instead of height, let me know if that would work or if we should use the sx prop instead!

@joshblack
joshblack temporarily deployed to github-pages October 20, 2022 14:40 Inactive
@joshblack
joshblack temporarily deployed to github-pages October 20, 2022 14:50 Inactive
Comment threadsrc/TreeView/TreeView.tsx Outdated

@colebemiscolebemis left a comment

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.

Looks good to merge after the coarse pointer height issue is fixed 👍

Comment threadsrc/TreeView/TreeView.stories.tsx Outdated
joshblackand others added 2 commits October 20, 2022 14:52
@joshblack
joshblack enabled auto-merge (squash) October 20, 2022 19:54
@joshblack
joshblack temporarily deployed to github-pages October 20, 2022 19:59 Inactive
@joshblack
joshblack merged commit 77c0259 into mainOct 20, 2022
@joshblack
joshblack deleted the treeview-item-count-prop branch October 20, 2022 20:11
@primer-cssprimer-css mentioned this pull request Oct 20, 2022
josepmartins pushed a commit that referenced this pull request Oct 21, 2022
* feat(TreeView): add count prop to TreeView.SubTree
Co-authored-by: Mike Perrotti <mperrotti@users.noreply.github.com>
* chore: add changeset
* refactor(TreeView): update px units to rem
* Update docs/content/TreeView.mdx
Co-authored-by: Cole Bemis <colebemis@github.com>
* Update .changeset/tender-turtles-serve.md
Co-authored-by: Cole Bemis <colebemis@github.com>
* refactor(TreeView): update stories and merge sx prop
* refactor: update height for items and adjust height for coarse pointers
* Update src/TreeView/TreeView.stories.tsx
Co-authored-by: Cole Bemis <colebemis@github.com>
* fix: update coarse pointer styles
Co-authored-by: Mike Perrotti <mperrotti@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@joshblack@colebemis