diff --git a/.changeset/rich-pans-press.md b/.changeset/rich-pans-press.md new file mode 100644 index 00000000000..15ab412aa26 --- /dev/null +++ b/.changeset/rich-pans-press.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +TreeView: Always align expand/collapse chevron icon, leading visual, and trailing visual to top of item diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png index ed6f16df207..12ae1ab1f97 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png index ef42d025bd5..81054b17e8c 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png index c5062ec59ae..1c7a86a9322 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png index dedbc822f62..dc81c874410 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png index ed6f16df207..12ae1ab1f97 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png index 08d8ef916f5..2b309d634e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png index 8af3a348812..3144d63bad8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png index 9f91e25873a..4a6a6bdd442 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png index 08d8ef916f5..2b309d634e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png index 7ca932492eb..a9945c7c97a 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png index 59a37b63042..93984a22924 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png index e3ed04d0efb..670514a8f52 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png index b4c57664484..087d3050920 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png index 7ca932492eb..a9945c7c97a 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png index a5ae1bfd8d8..54ebef0641e 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png index ef36f92c843..d2755f7b7f1 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Empty-Directories-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png index 03e3ba3ce8c..0ddff78f691 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png index f602939aec3..894a7f69c06 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png index 231e8f689f9..b087f858cbf 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png index ba7b1f165e8..cb584be7e9f 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png index b73b01b5cc6..b93a601acdc 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png index a4dd033689c..bbc93d13a8b 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png index 01022ab1e7e..8fce680c221 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png index 909abe8f4cb..0946c66e7e2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png index 58d265e8b5a..b806f4525c7 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-Changed-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png index c5ffd924341..6a7610277a2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png index a887d62a0b1..274c0dabde8 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png index f8e8601b827..263fa1dfd03 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png index bd3badf0037..0b3c5d491ce 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png index c5ffd924341..6a7610277a2 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png index 089f7a48b8b..9fb921a3328 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png index 5791a678f0e..9c680127141 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Files-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png index 7720ef27c8e..0cd4881456d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png index 6a6ace273e0..6826d686203 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png index 5ecd5b32e16..4957de17f9d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png index c695e47df2a..f25f67fd3ce 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png index 0aaca4b1b03..80f4f0ad69b 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png index 1225ebc74f6..c308d50dbe3 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png index 5b08dd9d293..9c2e939e65d 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png index 9f8888445bf..a9cc60d52b3 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png index e5428c1f3a9..febee9c17e5 100644 Binary files a/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png differ diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx index 73d02f13d75..639fd6602e7 100644 --- a/packages/react/src/TreeView/TreeView.features.stories.tsx +++ b/packages/react/src/TreeView/TreeView.features.stories.tsx @@ -1040,4 +1040,88 @@ export const LeadingAction: Story = () => { ) } +export const MultilineItems: Story = () => ( + + + + + + + + this is a very long directory name that we have intentionally allowed to wrap over multiple lines to + demonstrate alignment + + + + + + + Avatar.tsx + + + + + + + + + + + + this is a medium directory name that we wrap over 2 lines to demonstrate alignment + + + + + + + + + + Avatar.tsx + + + + + + + + + + + this is a very long directory name that we have intentionally NOT allowed to wrap over multiple lines to + demonstrate alignment + + + + + + Avatar.tsx + + + + + + + + + + + short name + + + + + + Avatar.tsx + + + + + + + + +) + export default meta diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index 53e86b916f5..06aa13321c6 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -67,6 +67,9 @@ export type TreeViewProps = { className?: string } +/* Size of toggle icon in pixels. */ +const TOGGLE_ICON_SIZE = 12 + const UlBox = styled.ul` list-style: none; padding: 0; @@ -105,6 +108,7 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-container { --level: 1; /* default level */ --toggle-width: 1rem; /* 16px */ + --min-item-height: 2rem; /* 32px */ position: relative; display: grid; --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem); @@ -112,7 +116,6 @@ const UlBox = styled.ul` grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr; grid-template-areas: 'spacer leadingAction toggle content'; width: 100%; - min-height: 2rem; /* 32px */ font-size: ${get('fontSizes.1')}; color: ${get('colors.fg.default')}; border-radius: ${get('radii.2')}; @@ -129,7 +132,7 @@ const UlBox = styled.ul` @media (pointer: coarse) { --toggle-width: 1.5rem; /* 24px */ - min-height: 2.75rem; /* 44px */ + --min-item-height: 2.75rem; /* 44px */ } &:has(.PRIVATE_TreeView-item-skeleton):hover { @@ -169,8 +172,11 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-toggle { grid-area: toggle; display: flex; - align-items: center; justify-content: center; + align-items: flex-start; + /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap + across more lines. */ + padding-top: calc(var(--min-item-height) / 2 - ${TOGGLE_ICON_SIZE}px / 2); height: 100%; color: ${get('colors.fg.muted')}; } @@ -187,10 +193,13 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-content { grid-area: content; display: flex; - align-items: center; height: 100%; padding: 0 ${get('space.2')}; gap: ${get('space.2')}; + line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285)); + /* The dynamic top and bottom padding to maintain the minimum item height for single line items */ + padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2); + padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2); } .PRIVATE_TreeView-item-content-text { @@ -204,7 +213,11 @@ const UlBox = styled.ul` .PRIVATE_TreeView-item-visual { display: flex; + align-items: center; color: ${get('colors.fg.muted')}; + /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap + across more lines. */ + height: var(--custom-line-height, 1.3rem); } .PRIVATE_TreeView-item-leading-action { @@ -524,7 +537,11 @@ const Item = React.forwardRef( } }} > - {isExpanded ? : } + {isExpanded ? ( + + ) : ( + + )} ) : null}