From c81898c93664d224d7a18722cd1abcdcf2d1a510 Mon Sep 17 00:00:00 2001 From: Aarya B C <60278134+ayy-bc@users.noreply.github.com> Date: Wed, 15 May 2024 05:55:10 -0700 Subject: [PATCH] Add `TreeView.LeadingAction` sub-component (#4546) * add grid area for drag handle when data-drag-and-drop is true * add test to verify dnd attribute * css updates * add docs * test(vrt): update snapshots * Sid/treeview leading action (#4569) * wip: leading action slot * clean up a little * change from prop to subcomponent * remove outdated test * spacer should come before leadingAction * merge snapshots from main * merge package-lock from main * add visual tests * use IconButton for leadingAction * add example of drag handle on hover * Create tame-nails-live.md * test(vrt): update snapshots * change LeadingActio type to React.FC and accept children * change LeadingAction of type React.FC * typo * add `variant="invisible"` to icon button in stories * add leadingActionId and aria-hidden to LeadingAction subcomponent * remove `leadingActionId` to describe the tree view item * remove unused leadingActionId * remove docs from changeset --------- Co-authored-by: ayy-bc Co-authored-by: Siddharth Kshetrapal Co-authored-by: siddharthkp --- .changeset/tame-nails-live.md | 5 ++ ...w-Leading-Action-dark-colorblind-linux.png | Bin 0 -> 9497 bytes ...eView-Leading-Action-dark-dimmed-linux.png | Bin 0 -> 9593 bytes ...eading-Action-dark-high-contrast-linux.png | Bin 0 -> 9467 bytes .../TreeView-Leading-Action-dark-linux.png | Bin 0 -> 9465 bytes ...w-Leading-Action-dark-tritanopia-linux.png | Bin 0 -> 9476 bytes ...-Leading-Action-light-colorblind-linux.png | Bin 0 -> 9497 bytes ...ading-Action-light-high-contrast-linux.png | Bin 0 -> 9528 bytes .../TreeView-Leading-Action-light-linux.png | Bin 0 -> 9517 bytes ...-Leading-Action-light-tritanopia-linux.png | Bin 0 -> 9475 bytes e2e/components/TreeView.test.ts | 33 ++++++++ .../react/src/TreeView/TreeView.docs.json | 10 +++ .../TreeView/TreeView.examples.stories.tsx | 76 ++++++++++++++++++ .../TreeView/TreeView.features.stories.tsx | 51 ++++++++++++ packages/react/src/TreeView/TreeView.tsx | 46 ++++++++++- 15 files changed, 217 insertions(+), 4 deletions(-) create mode 100644 .changeset/tame-nails-live.md create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-linux.png create mode 100644 .playwright/snapshots/components/TreeView.test.ts-snapshots/TreeView-Leading-Action-light-tritanopia-linux.png create mode 100644 packages/react/src/TreeView/TreeView.examples.stories.tsx diff --git a/.changeset/tame-nails-live.md b/.changeset/tame-nails-live.md new file mode 100644 index 00000000000..5c39b099be4 --- /dev/null +++ b/.changeset/tame-nails-live.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +TreeView: Add support for `TreeView.LeadingAction` 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 new file mode 100644 index 0000000000000000000000000000000000000000..7720ef27c8e16f0354e5ab90d4c1f95f74698af6 GIT binary patch literal 9497 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 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..5ecd5b32e16e1c90e574eb28a1ada9f47247cd19 GIT binary patch literal 9467 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 MANrTNFTcC^F9j*V2LJ#7 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..c695e47df2a1956d72ffd1916c94b0ed2c6565f8 GIT binary patch literal 9465 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 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..0aaca4b1b03d5fc2ef7848fbfbc2bc49bf77cb5a GIT binary patch literal 9476 zcmeHNYgkj)n#S=|jz^KFLysJafIU#D2Z7NjF@z8;RiuKcwUu($a!CP`C;?&!NvfQK z^#T#X{T3)KXpw7xKp=^TatkEL9YP3~kbvX@Bm_brnN4S=GtWFT&oh7QGe7*XlI$dV zecxK^d*64zYw!DCT=F#e(}#aDGBPspy71YTMn=2UKr{N|9^jh?M~z};e%jm=1W{rGXsl&;a*d(}ytR#etZbvT+lD|L#34Q-1Gj8plc0Q!oFYGch zDn5MH6gYZsZvyc8$%X#iMn-4O-n9k}{`AklXpFviTx<;d`R*TJz`+N0Z|ju)_#oEz zm3>`zLRAW(;crPgWm?;|=0f_h;KsvzN8&M#|MIq5b6Bvi^ZP&^1O4TOVqR77%aP(* zfkwMLMqf48>4PSqBjWL&DPc3|I;vf}vGwC1+@wQ_u#p>N8eC+-8{%!d#PBUjiwqjFR3FIxCYw;1zGR!Htj{J*lAqSX06G$?p|3Orkz2j zphz@2c5d44&WKq(l0Cl^vQp@v`o}(}KqyI6axX&Mm4*>)ih6e$AIfPVZ4L&K=TZW0 zTmsUZ@(Yk$T=_6vlbYJl&Wo)ADL!wJ*M}Ss8I-F2A8FD~gSHY3GiY>9-M0Lx{QJh2 z`X1{`!I8YdOK_O&`5U>#hNU_Ek?h2!fn(p)Tzl9HEamg8+H>p=l*vm~#P(ah3CaaZ zS==zUS!0gm%;3$=TW5;gahRRNNA(5PsvkGELCwg_L`lD5D~Fb zE1Y<8aZsi3IM7{B=kuPx&WFEx@Mo>!l&|znMb+o&1?#!|pU4J%Bns8nW^7ZyChF#Y z+~<4&t19+(jrcMz-*}#B0a}$iIFW_giP3s#PO1I;#vFxDn9@z9_&Wd-5KxUG37Bo$ z@%*HRBn^`>ZfLta=blLwtyjt*8~k)Tu0M_M!QTqlBX823=YzE`%~Y$a*&uoEQwVNT zz2D09SauNU92*>Z{>UTCd`jU-i2Wt~cSn3&k9ZBR6MPQ9x00IWBLOilU*2zCEc4UO zX0tP_Sqb8tQVMVADN;;D`fyXBiVdb}ds-*rE3=%03vmE^YT^VES_wu0{VVq>yCyzy zdig$tJOH!kCw!MK?y4PBwQU>Raqc($ByQUF2B~8-(LHGsmDpdcd_p;tsa4tVP>iX( z)YMcr_O-JSyn@`&)NO8q)J?x}x3>@k_KFd;;uiAJ}i(u$>4 z%)O4HMcL$*p}l6NC4B4ed$sZeeiK|L14V~$mR}eQ&r2#R9V@O@_N>lxsdiRYR*@JC z|9}uTCTjpfe$nY-*uVW_wl(i@p~er2#)n^aV$C&qL${I>uk{{n*4=Rc|Dd(AaJlAP z6otP@mtvw(Tp>=F2`cl}4%$~TYOf)sE}X%`Kmod7^2y1h*8}%JG1GU(<2qTR)`VNy z7lARIx3p8v@InJfN^`l*M?>Y=GfnoEFrAxafz1qwXZbe3PLz!7;w$Y&j;OJo>rrydNcwItu4tI zxjfyrID*PI90OofT#q8zY-af$oNvU7x_-E095K7=ib%a>+gV8c2rADMNP-HogYgm{ zJ{d-j5a!T%5PS2G7_Z={$nK0m1lJgT@;E0KWIxJh9$)7b6#^jGMlHCE$Z=C?G=5Rx z75K`18Tt7xtyVU^(<0GmQa}|z)n`V(1Gv23#c(FxgE?Pdx_#JCiN9g(uT}->9@4>M z9aRWQA$EY^)V=VLvU`rt?*o$(Z@ALq5UqSJKPu@F}sWv8t3b50f+!9r#OWF8%4)Y!df&Uhr&WD zyaGoFUr`ef8VgN!iVYGx4YGa!u%9yEQDYfHlW0ZDSpbk%u9`qTD3NFOB9n)LIjb=H=D zD@87VmJ-&x;!RAnBZCiBnf688D9$P1T;}6q#6XVNb57IS#P-p4r-wu4(*6%k$m4{tDR?nPax5UtRsze@I0YOBP7^R4SNCtP*n9JU77W!3%n<&_$zk_X-)28r z5@b}nt=vc@FR$##MR1_7h(o$|maP$EEkxBvk)}3VS=HoMxT;=rr>2|o4dOlPyfj-+ zHfo7%+n#K~4HxO-Nif_c#rC?PE1R=9EE~ggI-URnVU-1rs-JJ0co951C$1x1M=dZ9 z2Kfb99`I%Jd{+JLyadU!nItTNTbD?jnFTbY0^yz=axAE5(Kfz2XA0)>Uo?a>+v70! zda8&6(To)&^mNksImfj!DV%XmvV*`v`fqx&Qg&NhVyvq2(7OpxqdBxm?VJyr*LiP$ zZ`~<*?g{ct0EwTWMToPFQ@Xob4)j7OFxF*N5J4Dc0l)rfhpYvoXq`(ffD#j?h+QA$ z#%snc8akgm`=<7uXL5WDp#!(!7D2(Asf?4gA5EOFm~p>NVIi^SEu*q zfVcz#Y|kdXnz!t2P(3eHiOmp_Ek4=ZxuL$*#c*m={OBnXJ(LH4VQe!)*r*UGv|bXP z)~CZpU3ExbVhh%~64Y;UTLQ9J3Y6xae8?VX$fUW4zLnjG5dSQg%Z#&{if}vb>`aCX z@(S{>~0QI~d%gs@0=1#iI z3{tXQVIwLs6hOhosg|^L>&-hp%nk(%*QG*LfKR*MI>YImAb%AhhyTsYSS^^A0!j0p z1n0+dw{4(rY(2yETlcVnN=8{}sV&9%o5#5zq$DTQ5F>|B;OxU#X|GTEBp4ICsa~X7 zB7+SRw-v1?U0fm-YOZ5kN2dtNLMj6Gv1n5Q1`~upk;PUz(oKmT15+VyB=6{`@!Lx%=MIA+ly1Il?B*{KI^NjgF4y{_=H2 zU7~i?&dbx&b3!1Xd#qbc-7LawkJIJ{FeH%SwjM49bM$Kx=R*LsIDM_L*tFBq%qU%B zE5`HeX6!22ATQ64O)>U;)|*onYO2%DK0T@q9y_>-KiOrJazrJ22ktx{TyYDA??3Tm7J|}ie??J zkI8G`*N4R+kxt_T21Ap~<87&?Y*(W^JtN#lR}W6rlr)Ys?zcJa=Huhjtd-;sy465v zr{(Hcqo2 zT>&PPYtW`Mu3zsSL{+TL1H7kgG3{2*B#C03HxZP{Q>FO{5}Sj^dVrq+dhny8d;O#Z zRGdxBg-g)2A#ccbed3!z8qeYizjxs0i&%jpL;QdXo=irETE#B6MOqIP>~r3n-2*3# zo;9AwUCc&nfTc8wO-XhKio_&Del>t$$Djxu%r@6}Fh}l*aQzFD##+lJVyKfP?8H6A z5U~Ej2Z!*YQaph@vg2A@ii!;^fXK0)vUG&P<#e&ioisjHs3ghCnGM zCe7-nQdNUJt?xG`58?m2VAOdktu2HtNLMIS)z#yx8gr=&Y72)h6KM{k6-gta$mc3L@*)WUyH>OT$8HC?i}HLWG= zO--BM;CSx6kjOrwGv}Z(RHxxBOu_1cJUrNI>e=vjek7!>v!9Z1* zE2O$GKi=)I>;5CpfYrPs082tN*17AZ3;7W4Rq+paN*RlL^;g@2{vT}*B4zC3xlNaO z2ZUSxoK0e4QVt^B+?OG(w)y69HB1}Wu^!zs-fqnK-&{}E0#Va_YLwSifL{;SusA)w z0Lb@`;h!JOwFHvI@v^jEwkH3?Dh-v_fC`r$wG068!j3GrHJ69`vDr6Q@{0_^_B5_@ zmJ?t7eoL6Q(mMa7G_ssl^uFzswpck{;ain^3nk%`PkRzK+97Kh6y&-P$A^<B zz?uRkOMGz!-K3ZRAHw}iF}27EkDdSl#mCqxI;x^|Ih%e+rQ)n|u-1fxQb~)3xpac` z;_r{faiU3lr`3+lXw^OTI3btOK~a>;ezo78V-xy@n>T-{NVk&`C7?wShwL8^fL(4g zF2{&S%?mH~4NSUyLQT!hkVwupqdOiY>HwVNR6Ko(t7_ePkhq=~J@EQ<8nVcXw7jj9 z{zOGgJvjyV@|v}A38PX_>dT)L*2&^9boh;OcL>ld4~4Ww`H(gT>SVQh$tASJ+533B zmYW+d8QRg(s_>7Q@kl=w?Hx zCsF*Qmu9$$Zdn_Njg1wrytnTJR?>S2D+{TDNmn|}!xRP0Ugx3($=kb^JCvgH|TtKx@K*kb8C$zE+8P_YNdbX zJU83k%hlC&U}~z!im6<-mwr?K-DUR}ahe5Nu0$0a2> zT#fL)Qf-ndstxligVo)XFRjT(%aMu@eNO~m1Xz$3CDQ@vox56&@K+`!@pvgZyX$Lj zhVhAQcX#|?mJ{(PSii)P%szDHU37HJZ;IOKeB#&6tDp65uvvBd1O}fGAG;$uy@8YI zBWsEyr;DE=J2Z=hI^TMFKj3o#lcp#B_yz+hgj=a$X^_-iGhQ{!XA7&z> zqI&wkq5{dCKJClM@^S*j+TujmcWmtNFl2t{3V3mXEYs_h{3?(5J}D0l-?>r^Cdf0f ze5f;4%Ih1*4xW%L0p-#k*Qg~f(9i*y&hVAMjx|)zj@qcV{zGiI2)FEV!Bx~i!T-%c ziEdglQyRptK8DQyLpvLf7k$aWl000Q-cV)}%DwP{utZj#^C7(l~sZ~N*U#NI*d9mL*2>>b1W|G63c zRynz?xgBa`^oP2gX90fao9u6OT<^y6dp)fT!sy@AT_g?`G;M4~I literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..1225ebc74f60e87034d38c4f48ee910e5046bb1e GIT binary patch literal 9497 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 QWD)d5=;xh(`R3BU1BcA+0{{R3 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..9f8888445bf675d898958150c99c4bdee4ad6cf6 GIT binary patch literal 9517 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 literal 0 HcmV?d00001 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 new file mode 100644 index 0000000000000000000000000000000000000000..e5428c1f3a9d1f77fe89b5d7a117dd8ff0fb30f2 GIT binary patch literal 9475 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 E1mqpYv;Y7A literal 0 HcmV?d00001 diff --git a/e2e/components/TreeView.test.ts b/e2e/components/TreeView.test.ts index 1f665117e85..62d3d4ab11b 100644 --- a/e2e/components/TreeView.test.ts +++ b/e2e/components/TreeView.test.ts @@ -138,4 +138,37 @@ test.describe('TreeView', () => { }) } }) + + test.describe('Leading Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-treeview-features--leading-action', + globals: { + colorScheme: theme, + }, + }) + + expect(await page.screenshot()).toMatchSnapshot(`TreeView.Leading Action.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-treeview-features--leading-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) }) diff --git a/packages/react/src/TreeView/TreeView.docs.json b/packages/react/src/TreeView/TreeView.docs.json index 5f820b0b02a..fb8d83893ef 100644 --- a/packages/react/src/TreeView/TreeView.docs.json +++ b/packages/react/src/TreeView/TreeView.docs.json @@ -105,6 +105,16 @@ } ] }, + { + "name": "TreeView.LeadingAction", + "props": [ + { + "name": "children", + "required": true, + "type": "React.ReactNode" + } + ] + }, { "name": "TreeView.DirectoryIcon", "props": [] diff --git a/packages/react/src/TreeView/TreeView.examples.stories.tsx b/packages/react/src/TreeView/TreeView.examples.stories.tsx new file mode 100644 index 00000000000..47e2b1f291d --- /dev/null +++ b/packages/react/src/TreeView/TreeView.examples.stories.tsx @@ -0,0 +1,76 @@ +import {GrabberIcon} from '@primer/octicons-react' +import type {Meta, Story} from '@storybook/react' +import React from 'react' +import Box from '../Box' +import {TreeView} from './TreeView' +import {IconButton} from '../Button' + +const meta: Meta = { + title: 'Components/TreeView/Examples', + component: TreeView, + decorators: [ + Story => { + return ( + // Prevent TreeView from expanding to the full width of the screen + + + + ) + }, + ], +} + +export const DraggableListItem: Story = () => { + return ( + + + Item 1 + + Item 2 + + sub task 1 + sub task 2 + + + Item 3 + + + ) +} + +const ControlledDraggableItem: React.FC<{id: string; children: React.ReactNode}> = ({id, children}) => { + const [expanded, setExpanded] = React.useState(false) + + return ( + <> + + + { + setExpanded(false) + // other drag logic to follow + }} + /> + + {children} + + + ) +} + +export default meta diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx index 9470ad91730..73d02f13d75 100644 --- a/packages/react/src/TreeView/TreeView.features.stories.tsx +++ b/packages/react/src/TreeView/TreeView.features.stories.tsx @@ -4,7 +4,10 @@ import { DiffRemovedIcon, DiffRenamedIcon, FileIcon, + GrabberIcon, KebabHorizontalIcon, + IssueClosedIcon, + IssueOpenedIcon, } from '@primer/octicons-react' import type {Meta, Story} from '@storybook/react' import React from 'react' @@ -989,4 +992,52 @@ export const WithoutIndentation: Story = () => ( ) +export const LeadingAction: Story = () => { + return ( + + + + + + + + + Item 1 + + + + + + + + + Item 2 + + + + + + sub task 1 + + + + + + sub task 2 + + + + + + + + + + + Item 3 + + + ) +} + export default meta diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx index 212bb9bf49c..53e86b916f5 100644 --- a/packages/react/src/TreeView/TreeView.tsx +++ b/packages/react/src/TreeView/TreeView.tsx @@ -97,6 +97,9 @@ const UlBox = styled.ul` outline-offset: -2; } } + &[data-has-leading-action] { + --has-leading-action: 1; + } } .PRIVATE_TreeView-item-container { @@ -104,8 +107,10 @@ const UlBox = styled.ul` --toggle-width: 1rem; /* 16px */ position: relative; display: grid; - grid-template-columns: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2)) var(--toggle-width) 1fr; - grid-template-areas: 'spacer toggle content'; + --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem); + --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2)); + 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')}; @@ -138,7 +143,7 @@ const UlBox = styled.ul` } &[data-omit-spacer='true'] .PRIVATE_TreeView-item-container { - grid-template-columns: 0 0 1fr; + grid-template-columns: 0 0 0 1fr; } .PRIVATE_TreeView-item[aria-current='true'] > .PRIVATE_TreeView-item-container { @@ -202,6 +207,12 @@ const UlBox = styled.ul` color: ${get('colors.fg.muted')}; } + .PRIVATE_TreeView-item-leading-action { + display: flex; + color: ${get('colors.fg.muted')}; + grid-area: leadingAction; + } + .PRIVATE_TreeView-item-level-line { width: 100%; height: 100%; @@ -354,11 +365,16 @@ const Item = React.forwardRef( }, ref, ) => { - const [slots, rest] = useSlots(children, {leadingVisual: LeadingVisual, trailingVisual: TrailingVisual}) + const [slots, rest] = useSlots(children, { + leadingAction: LeadingAction, + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, + }) const {expandedStateCache} = React.useContext(RootContext) const labelId = useId() const leadingVisualId = useId() const trailingVisualId = useId() + const [isExpanded, setIsExpanded] = useControllableState({ name: itemId, // If the item was previously mounted, it's expanded state might be cached. @@ -449,6 +465,7 @@ const Item = React.forwardRef( aria-expanded={isSubTreeEmpty ? undefined : isExpanded} aria-current={isCurrentItem ? 'true' : undefined} aria-selected={isFocused ? 'true' : 'false'} + data-has-leading-action={slots.leadingAction ? true : undefined} onKeyDown={handleKeyDown} onFocus={event => { // Scroll the first child into view when the item receives focus @@ -488,6 +505,7 @@ const Item = React.forwardRef(
+ {slots.leadingAction} {hasSubTree ? ( // This lint rule is disabled due to the guidelines in the `TreeView` api docs. // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle @@ -829,6 +847,25 @@ const TrailingVisual: React.FC = props => { TrailingVisual.displayName = 'TreeView.TrailingVisual' +// ---------------------------------------------------------------------------- +// TreeView.LeadingAction + +const LeadingAction: React.FC = props => { + const {isExpanded} = React.useContext(ItemContext) + const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children + return ( + <> +
+ {props.label} +
+
+ {children} +
+ + ) +} + +LeadingAction.displayName = 'TreeView.LeadingAction' // ---------------------------------------------------------------------------- // TreeView.DirectoryIcon @@ -898,6 +935,7 @@ ErrorDialog.displayName = 'TreeView.ErrorDialog' export const TreeView = Object.assign(Root, { Item, SubTree, + LeadingAction, LeadingVisual, TrailingVisual, DirectoryIcon,