From a7d1e4f37cd8fd01c86250178ef6ae748d786e03 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 2 Jul 2024 09:26:10 -0400 Subject: [PATCH] Add TrailingAction support to NavList (#4697) * Update NavList to support TrailingAction * Update conditional in ActionList to allow NavList to set TrailingAction * add NavList.TrailingAction support * Update logic to not render for ActionMenu or SelectPanel Co-authored-by: Tyler Jones * Create tender-parrots-refuse.md * Fix syntax * Wrap example with PageLayout * Add subitem * Filter out TrailingAction * Add test coverage * Move back to minimize diff * Add bad storybook example * Update Story name * Update e2e tests * Update stories * test(vrt): update snapshots * update docs * Update packages/react/src/NavList/NavList.docs.json Co-authored-by: Tyler Jones * Fix description: * Move to DevOnly * Change to minor * Update snapshots --------- Co-authored-by: Tyler Jones Co-authored-by: khiga8 --- .changeset/tender-parrots-refuse.md | 5 ++ ...d-TrailingAction-dark-colorblind-linux.png | Bin 0 -> 7941 bytes ...v-and-TrailingAction-dark-dimmed-linux.png | Bin 0 -> 7933 bytes ...railingAction-dark-high-contrast-linux.png | Bin 0 -> 7895 bytes ...f-SubNav-and-TrailingAction-dark-linux.png | Bin 0 -> 7941 bytes ...d-TrailingAction-dark-tritanopia-linux.png | Bin 0 -> 7941 bytes ...-TrailingAction-light-colorblind-linux.png | Bin 0 -> 7889 bytes ...ailingAction-light-high-contrast-linux.png | Bin 0 -> 7886 bytes ...-SubNav-and-TrailingAction-light-linux.png | Bin 0 -> 7889 bytes ...-TrailingAction-light-tritanopia-linux.png | Bin 0 -> 7889 bytes ...h-TrailingAction-dark-colorblind-linux.png | Bin 0 -> 7036 bytes ...-With-TrailingAction-dark-dimmed-linux.png | Bin 0 -> 7029 bytes ...railingAction-dark-high-contrast-linux.png | Bin 0 -> 7008 bytes ...NavList-With-TrailingAction-dark-linux.png | Bin 0 -> 7036 bytes ...h-TrailingAction-dark-tritanopia-linux.png | Bin 0 -> 7036 bytes ...-TrailingAction-light-colorblind-linux.png | Bin 0 -> 7009 bytes ...ailingAction-light-high-contrast-linux.png | Bin 0 -> 7000 bytes ...avList-With-TrailingAction-light-linux.png | Bin 0 -> 7009 bytes ...-TrailingAction-light-tritanopia-linux.png | Bin 0 -> 7009 bytes e2e/components/NavList.test.ts | 63 ++++++++++++++++++ .../react/src/ActionList/ActionList.docs.json | 4 +- packages/react/src/ActionList/Item.tsx | 5 +- packages/react/src/ActionList/index.ts | 1 + .../react/src/NavList/NavList.dev.stories.tsx | 49 ++++++++++++++ packages/react/src/NavList/NavList.docs.json | 31 +++++++++ .../react/src/NavList/NavList.stories.tsx | 54 +++++++++++++++ packages/react/src/NavList/NavList.test.tsx | 54 +++++++++++++++ packages/react/src/NavList/NavList.tsx | 24 +++++-- .../__snapshots__/NavList.test.tsx.snap | 40 +++++------ script/generate-e2e-tests.js | 19 ++++++ 30 files changed, 320 insertions(+), 29 deletions(-) create mode 100644 .changeset/tender-parrots-refuse.md create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-linux.png create mode 100644 .playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-tritanopia-linux.png create mode 100644 e2e/components/NavList.test.ts create mode 100644 packages/react/src/NavList/NavList.dev.stories.tsx diff --git a/.changeset/tender-parrots-refuse.md b/.changeset/tender-parrots-refuse.md new file mode 100644 index 00000000000..27708eaade1 --- /dev/null +++ b/.changeset/tender-parrots-refuse.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Add TrailingAction support to NavList diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b77258c97098ced8afce714e45ea4dfdf00925d3 GIT binary patch literal 7941 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-dimmed-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a1e46bf74916e57cbc1f3c4c9900329777463716 GIT binary patch literal 7933 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..aea34cdbce5e20598d4647c51537ef4ccd3d1783 GIT binary patch literal 7895 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b77258c97098ced8afce714e45ea4dfdf00925d3 GIT binary patch literal 7941 zcmeH~`(KiI+Q%uInx-|kZD*Xx)U9^4ou-_&K@tb;U^%TCS)qv$mE$4sP${A)Vm0Q| zLD_24QjyG2^hVSM4}l@IHQC8Tl!+n2W-}~^r zFD|an`}%w@?Asge{@JR}U@(~bo*%;Y!(eVx&;k2&F?8jk-#2N{upo1P_zqa}%hg&K z%tyEXEuC)42;A{`C^E-`uOW8hA3LgqNwQpeW$&6i^q)@EEcqv&Q$~_$2mNi%==8 zgv7}^6m8E70%HSJGv!@;s-#xhkzF)JmBj?C;X1_?Z&%b0fMlfSxzv}F5*wqJjEoCl* z6&lKgr-f$*_oCX%HsWJ6kv9%`MphrD+NU_|mYe$#=*k#34`l1ht&TP%*w!bVeA^R? z!94esid&C`OR9oR4QL-~R&P~MZMU-|+L^s57 z(`k9C%wF)(DEc5qf@bFb@)&(%U*}$za(Ed1eVn_yyM&dY!t%3DcvUZL!_zXwnmlK0Cke~eA@>Az;ju2N@CcpQ_Uc`4~4Gx^T*jU?%K ze|#dRzP?^3VaHN$MU?BrjR&Bg$%eFu37&W(Ja6cm`-sJwEX7;2@ek2o_De_SB&jZ& zDY>zER9cax%q2Z}^8lVSHNFaw9m$}*ErJ(}{Dl4G$34Bg(b9_3y^no&cGfv_jS2~e z*a;4MyvUo0&M)@OJ|wW~*zt+(KMcH{jqI%ms$D$6CCAej!e9n$aWjh2q4&+Fy`L}> zo?cbSE(LrezugC_sB~Tb=sA!cOUesW!DQ@6vO(XS~Bh>!75 zT1V3YJ)tMs>auA?b2!dH&~n|O@uOn-Og3A;HyBgA+*?lh9rV|fuRUAv43tSi^FgA% z(<5}`zvKyY6gJV&O`VZSWJluZA@6fGPCs1-3Wc^_UH1WNOq^E-nZ*p^@2)ycfPeR0 z8@L_@6B)x6InF=6>>b}_QX;p9j`8(`w1|k3t?wVLqDnQooim15PdsH0yUBgH%hx%` zfVAL3o_M!D+5-mj8XuCnr8b(BSqG>;zPT^Ya5;!Z1zGmVHGkQfb4z4Fn(Fwxoqj73i@E6)ft+T> z>E14>JW+Ltcw1PD7BpPlm zt7O;J)p2?t@MNzse&#sAs>VJq3t(sZMK&$-LpO&|?NELq8!K5+>@!Qe4<%O>U>Ov7 zGI4rxlnnr59z?=WYc1g=gDm!^hwzhLRz>4oj}d?wpVd4{4{r9`yBeR2MzZ*1nl)`o zh?^a@kK7GtqT2uf5&*?k9?+=^dT5!TN2^%O4Im6Q$@~>pqY~X=hICX@be?d{%V0L3 zZDp#Uf#?Fe|AkxjeW`xA5p$Z zF@c?#;G!8p_NG;cq=~@LfFWg75aqBz&OO2HnHr|j?Ul!vOZDFNZ>~h$4TgemR z#@&}!WAsuEdpMnOB;XrLwIRbF15&#WHa_6z*! zkqF)8zG^>p&2`6SHCe9+f8hqZzj*C$VMu6Jr=%{TyaJV%4L8USGJUsntO_PKD+M!R z5E04Y?xq*0^!abxd>dMhWXIuh$3AcW@#$5FTQWP%8<{oqwPsm7PQTiK?#58X0YV4Ce>B3wVSMQ2kNrJ*3l z+7|51w~X@=L)Sy@4<d#$6Z{b zqD%Hl6D3#cBax+h-lVC1$(@9rIo-*2 zc@{JlIG$}Fy zkNU)}FOh9NcU|3li(L;9C$YD}u6Ofj;*t9}eT-APalwgyr|LgECq6j)2}yc0S$aM8 zaP&1lMpu8k4`uQJc52p)ahaM62Sdq83bIOY+^6G8u~FFRLz}pQd?#8%nij2-nL_i& zuaKV9?9^Q;*2wNHF%k#AS^&F+y1?Hd-0WYKb396@Rb%b;0RZ5ikhdYpAKuwB+!jLy zXaw@Inow6K08ri+c@jZD(tgxA3(ejZc@jE>uhY0H+VdATNuupbB%>~S3tT(F?X=nM zTPE;oXDa|K51AUBvo1PO%}($9@gDtL0FF>+bUYoZX~W<1MP!q*wtMTb9aN(^nWM6* zpCO1c9GN-;dSx`JgxLl;#oUXKWwgY1b!4Zc3{6<+-)n!?4b(+2zB?YK2$?BGCJnWM zop0UZRlc>()`!J0m|drv4gK4p{1Nnm>@}P% zJ2+ZeA{pXkVlWDlEL8R+nsu;z6Al0fLWi|wL-V~~Rw+lH&Ey5yul0ykxYK(`dN~IG zAm_T$?M1g?Xc6L%StqlP+xb@Hrzz^0Lr>y?LaUD@p6 zBmuR^*^5v%u%U&qSgcZp^u%W!!{xvK3pl#O)B*tIG}~#$mSe|%b3bF>Loj&b82_LB z(IRNpnmCfqo1@5Ypa}aIpqT&0e}vETX`fH~M>PcV1vg)C^9A=&y!X7+=A||-wRx%i pXLkPc^qHs6JbnI8(`P&s#t&<(*+ey$LwkMLo?Uyxns*#M``=&6GzI_w literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b77258c97098ced8afce714e45ea4dfdf00925d3 GIT binary patch literal 7941 zcmeH~`(KiI+Q%uInx-|kZD*Xx)U9^4ou-_&K@tb;U^%TCS)qv$mE$4sP${A)Vm0Q| zLD_24QjyG2^hVSM4}l@IHQC8Tl!+n2W-}~^r zFD|an`}%w@?Asge{@JR}U@(~bo*%;Y!(eVx&;k2&F?8jk-#2N{upo1P_zqa}%hg&K z%tyEXEuC)42;A{`C^E-`uOW8hA3LgqNwQpeW$&6i^q)@EEcqv&Q$~_$2mNi%==8 zgv7}^6m8E70%HSJGv!@;s-#xhkzF)JmBj?C;X1_?Z&%b0fMlfSxzv}F5*wqJjEoCl* z6&lKgr-f$*_oCX%HsWJ6kv9%`MphrD+NU_|mYe$#=*k#34`l1ht&TP%*w!bVeA^R? z!94esid&C`OR9oR4QL-~R&P~MZMU-|+L^s57 z(`k9C%wF)(DEc5qf@bFb@)&(%U*}$za(Ed1eVn_yyM&dY!t%3DcvUZL!_zXwnmlK0Cke~eA@>Az;ju2N@CcpQ_Uc`4~4Gx^T*jU?%K ze|#dRzP?^3VaHN$MU?BrjR&Bg$%eFu37&W(Ja6cm`-sJwEX7;2@ek2o_De_SB&jZ& zDY>zER9cax%q2Z}^8lVSHNFaw9m$}*ErJ(}{Dl4G$34Bg(b9_3y^no&cGfv_jS2~e z*a;4MyvUo0&M)@OJ|wW~*zt+(KMcH{jqI%ms$D$6CCAej!e9n$aWjh2q4&+Fy`L}> zo?cbSE(LrezugC_sB~Tb=sA!cOUesW!DQ@6vO(XS~Bh>!75 zT1V3YJ)tMs>auA?b2!dH&~n|O@uOn-Og3A;HyBgA+*?lh9rV|fuRUAv43tSi^FgA% z(<5}`zvKyY6gJV&O`VZSWJluZA@6fGPCs1-3Wc^_UH1WNOq^E-nZ*p^@2)ycfPeR0 z8@L_@6B)x6InF=6>>b}_QX;p9j`8(`w1|k3t?wVLqDnQooim15PdsH0yUBgH%hx%` zfVAL3o_M!D+5-mj8XuCnr8b(BSqG>;zPT^Ya5;!Z1zGmVHGkQfb4z4Fn(Fwxoqj73i@E6)ft+T> z>E14>JW+Ltcw1PD7BpPlm zt7O;J)p2?t@MNzse&#sAs>VJq3t(sZMK&$-LpO&|?NELq8!K5+>@!Qe4<%O>U>Ov7 zGI4rxlnnr59z?=WYc1g=gDm!^hwzhLRz>4oj}d?wpVd4{4{r9`yBeR2MzZ*1nl)`o zh?^a@kK7GtqT2uf5&*?k9?+=^dT5!TN2^%O4Im6Q$@~>pqY~X=hICX@be?d{%V0L3 zZDp#Uf#?Fe|AkxjeW`xA5p$Z zF@c?#;G!8p_NG;cq=~@LfFWg75aqBz&OO2HnHr|j?Ul!vOZDFNZ>~h$4TgemR z#@&}!WAsuEdpMnOB;XrLwIRbF15&#WHa_6z*! zkqF)8zG^>p&2`6SHCe9+f8hqZzj*C$VMu6Jr=%{TyaJV%4L8USGJUsntO_PKD+M!R z5E04Y?xq*0^!abxd>dMhWXIuh$3AcW@#$5FTQWP%8<{oqwPsm7PQTiK?#58X0YV4Ce>B3wVSMQ2kNrJ*3l z+7|51w~X@=L)Sy@4<d#$6Z{b zqD%Hl6D3#cBax+h-lVC1$(@9rIo-*2 zc@{JlIG$}Fy zkNU)}FOh9NcU|3li(L;9C$YD}u6Ofj;*t9}eT-APalwgyr|LgECq6j)2}yc0S$aM8 zaP&1lMpu8k4`uQJc52p)ahaM62Sdq83bIOY+^6G8u~FFRLz}pQd?#8%nij2-nL_i& zuaKV9?9^Q;*2wNHF%k#AS^&F+y1?Hd-0WYKb396@Rb%b;0RZ5ikhdYpAKuwB+!jLy zXaw@Inow6K08ri+c@jZD(tgxA3(ejZc@jE>uhY0H+VdATNuupbB%>~S3tT(F?X=nM zTPE;oXDa|K51AUBvo1PO%}($9@gDtL0FF>+bUYoZX~W<1MP!q*wtMTb9aN(^nWM6* zpCO1c9GN-;dSx`JgxLl;#oUXKWwgY1b!4Zc3{6<+-)n!?4b(+2zB?YK2$?BGCJnWM zop0UZRlc>()`!J0m|drv4gK4p{1Nnm>@}P% zJ2+ZeA{pXkVlWDlEL8R+nsu;z6Al0fLWi|wL-V~~Rw+lH&Ey5yul0ykxYK(`dN~IG zAm_T$?M1g?Xc6L%StqlP+xb@Hrzz^0Lr>y?LaUD@p6 zBmuR^*^5v%u%U&qSgcZp^u%W!!{xvK3pl#O)B*tIG}~#$mSe|%b3bF>Loj&b82_LB z(IRNpnmCfqo1@5Ypa}aIpqT&0e}vETX`fH~M>PcV1vg)C^9A=&y!X7+=A||-wRx%i pXLkPc^qHs6JbnI8(`P&s#t&<(*+ey$LwkMLo?Uyxns*#M``=&6GzI_w literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bf8ed147561c34eea04c441304e7fc48fd1b09b2 GIT binary patch literal 7889 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8d8b96a6ec1d44c1cadc88c51027e5c889f9c878 GIT binary patch literal 7886 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bf8ed147561c34eea04c441304e7fc48fd1b09b2 GIT binary patch literal 7889 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Bad-Example-of-SubNav-and-TrailingAction-light-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bf8ed147561c34eea04c441304e7fc48fd1b09b2 GIT binary patch literal 7889 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..add3ee54197ffef0914e7293b6cc60beb7ca0a89 GIT binary patch literal 7036 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 GEcd^mOWiO4 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..faff6487adb52f998d12d091220ea40703fe24f9 GIT binary patch literal 7008 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a3f72dace82104c6d417cd029e88ee266616f7e0 GIT binary patch literal 7000 zcmeI0{Z|uL8pnsFNG%1_>aqlZwrufqtIrPH?Hh z*Ri00h|E%zEW1IXrT4zjSzu>|x3kYAH-8zj)8;&4)IB`phuuGu|bn^Vy&a1ZuS|i($-}-{gPt00hB3a5y`vLxSz$7Fa?DnA(f4q2cRmyWqHi9Y=>O z0pQcO|9?AbN39{W4$E<~b|#|jXWv_iA3di^(D;S=7p55q>7%szsOMO-JP0_=P zmX!6rz&6+Hx#3=gEW^kzXDrvD)}LbJLmPQ?b(e06jb}$jPCv3!E}jH{%299W7=(?*7^S+X!EB8d`ArjPOowhOMi&CL-^UoJ^ZA6;&O-N=j_X7;e8W;*ti_yFXuyPG@d- zmZp<~3tt0(vhqqJ;1%zGqSqz+I9Te#qoC22ycb}6+Hq$*1M}hTna%a-CaZ{@b+|*1M*7GdwYI}Nm6vM1wJf5nO zg1j_&SV_hzkx{Am-LpK#OI?A-D!T+!a?yhGg&<>k`I`WM@(eIq6c-nhf4NH< z>$E1R)=IBjxq@D{%=XS%??WmLa%9cfgszpDA8Cs}Pf(v;TA!IgQN}u8O?#Lw+u^a00Ro%Q&`|KJz7jAO z((|5feFTz43f^<^q{-c2&PEhfDt9CQme{7g1)ge({`>w@okXQi11Hv~XOJIXYonN| zQrx&X2ffp`fOCW=#=jSndFEsp<5@e?#rnU4#5yug%93a2U?p2=S_K}Hbq*`M>&NjQ z;o|7&zxE+>#)o7ETiFy!v4|5rgSL(7x{a3!56)e1o=W=ER2vB(t)dh2ldo!QPy%@^ zH_p$`GhM9U?}Jxb;lgzJ61VNmt?LToRovK(Ti7RT30kZ10@Eg1XtS6YXei!973PSX zv0Gh}6calQDWen{RyH~XRVeIIM)}ZJ150dR^rFJ<2?9+#-twNVg5%Ho^pXpF_owZ! z%)sk^U9M$Bm}P>}TRSy={0;H@ z+Mb*Cn8it{RB_#{J3_{zvaJTu_(H>Kpf<^9NFi>3Y>WoHSnpRe71KEAS^GWf$aQ$$ zLFj`SF`>}2GOb*&bzJM)5G%{+|0l5tj29N8QXb~T3TNQ^|{2@6` zgpZ6qg~O~S@QI#FgWbu}I%J$)rro;q?T_$Mr0;Uj;QT)ln4p##KiIHYBO~_TKET=O zHdxp1S@wmxiAXFQWVF{zT_A;)__ONk5l&8&Q7^8cz{y86 z<3OMcG~7jQOinj~6p2Ah5DJCbp(hg}b|gpD3ws_9>FJ$Bj^i3haFv#!umDa6UkDIz z9lcy@;|kF=gaIcak)PhkVj?1nj<1ttUWxj()NQtiFD_eGoWSGv?PWwKjyG4iWB+0_ z7`FF{S`#P96D`kO+r|B!g0N{mWUVbrl4;(F*|}7~bUpMFZSP2S(d3=m_d%FPw6zW~ zPcK#a(INm~aW{{u0T{JDMIMb}v6ZO$#Y1PNPL(~r)|y%?FR9(>s^9d_J*S^MPj&K1Z17v| zWFrs=6MG(PCcv0;d~8h*4-YRmxcXhO?rDRpd~|52xfileF zS*5F&PP%1e<;?aJP{p;W?2sZ4BxwyoYElEGbZytDtaH$qB+@B$%~2 zPk(8!$Gkj8PaFZYzX%S!J6}}>xz9TspdI_&5_pJx_i}e#UES>uvbbVSY^*~mrsh;5 zf!Owh7L_P{PK!BfN z_;yzD*ugh8SnJKBGP=xJ5bMKdyk69Ga{0MUs{~^+yN&wG;2`ldPNx zR9;bXpv#gh{aq48s}Lcd-RxJcef?1>!C{nKBdI8|!0742E6zz4G z7pK)hQ~!YoRQAe{@ke0EJjSbpzFA$fx_{^?!)!RS;mn5nLk{%jR5PcVIn~Um_DcU6 nm?2|^j2SX!$owymG1?sMYk z#jRaHj+Ry=fl3ufaueP{FpvbKf(iu0kRT935lBoR7t9+FlI-PlKkSG7uwVMcGUv?9 znVECuK6jqy|GP7DzddpoyJeI6CIA4o9Q@+5C;(VzL^AN|pOBs_yZ4fi$|)lX`zgSc z?syIW9v%lj3q3|HpHtGWE69xQ1hYwNtj%sOwfsFL1)?qp_&Lug3=9$q zU!NcZYp^-XF!4djW%)j@PdGWGr@XxAA99mVL9rrQ6>pR>O47CzqY|8RCN3zH&#oU$ zIwoOQ42o$>1XF!I=7M)p5WY7%unptMhYpS zJV;a;q>6ghom1b~?F3x#VfTcbm+TBoRaN^e-AmG8BUhT_T!Nq@!)|lymnmTTjMp1R zT?&yImBiR547+4!gOaM<=*ZfO>r{jfW7-z)z|MrHLb8rHIrSW!Ieuxm_xU@4^c?`8 z8QhgGW)ZEyg{G2DJMEgfH}CA@FCD6romiP`q?Fs(RUVB+Wl1GBpQkt8vD3@cRU^E9oy7$IPmnL!k{dwE!)fy=5!f_SzQoWt+d48aK$K$ zw&SumI;?nmlqyGa(Va5ct!?v-Kf;cISZT^kJla2^X2F%qo9@AXKDf;VJu28-@N1a>TEb1eRf~vVfSE;I9;tI-%Af;vxx2b z)*&Y=jK|@ubFGmCl`Ot91kJIvAOZKLcS3w&@Wf_6O>>|gN}36d!{H*LlTwXsgk=-d zBlQ}+c+CmeuXs-bc4usM8(Lj;g7fSW%S2eV!T1@|Tx+xy7ST*BCWbEei%TPzLW*UX zIysb(yEMJE+`VBIF}G}KF%oe@r&qwwK>BXhbZ@ga{~r$xrol(w^C@#9u?=Qwy-;w6n3~G@3F}hZ*grO}7$9-OTtZk0v3DD6i}}tDJ9`mj?XV!?UQrCsCT+)5>~5M8e&WBLayk=J%5rP z!V}G2f_UWscafvB{9I84qHH~x35+@ zBi;Kip^(Na8)-=S>bn{Q;J?d&rXg39eSqKGOfkO&00ZwGSZ{m3N?K#^ZELYDT3te- z`laB&PP%V=OO5?Y;|;z=46|*j%p-*ui-CXY{*|pyJ;t>@6790EIXM=J6L1@`t1Q~H zOQTT8f^N@b?jI2F`9rl;{T!5%F2iKnPTM+-wI*4#q$b?Q%W?0pD+<&fkKW@yv~@I1C6*5k zM#0(YzyM>}uh6W^(Gc|ydf7Ul-7!?v=uEBB--Ye&P3m@cTJKdBYvgpX6M1m{q^U3v z=DHSn#Nu%4C@N^{aGnGiOjG4(m+#ED+iOqGbwd!u|7u~9m^ya$8r?P-!sOQaALe;f ze=K>f*pP;HEA#*zcc;FIU>bVIl5}Q-L9bN={nUvB=mqWv!J3M=mKrAYJY_B*u^$h? zgFMg*=UDYJJDryxVkPx6`F-*@gliVPk{u^FYkJY+n|8he>*Y9FxYVnXzwrYYj6PkCIv=7&#*k(Nx~W z-*z9LY#||ufmx40qb_Tg*WFc;2m<~fTfCQk54-k)NL>HH&Mj*`U-S7N=ajw{?Q7A# z7VR(pZQPp9*L1$7^EI8ny#E{42>1UJ&h9aDqNy%CWA#cI01h5F{2BMt#7qAMk;&Ii literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-TrailingAction-light-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8c80c2fb60ac51c62ee9a103eb91652f8d7df32e GIT binary patch literal 7009 zcmeI1ZB$c78pkhHm#RmxWm_spsJ7K@D^PbEI0XVyYEu^x1w#}F7j-Qq5D{rYNO(~> z#jRaHj+Ry=fl3ufaueP{FpvbKf(iu0kRT935lBoR7t9+FlI-PlKkSG7uwVMcGUv?9 znVECuK6jqy|GP7DzddpoyJeI6CIA4o9Q@+5C;(VzL^AN|pOBs_yZ4fi$|)lX`zgSc z?syIW9v%lj3q3|HpHtGWE69xQ1hYwNtj%sOwfsFL1)?qp_&Lug3=9$q zU!NcZYp^-XF!4djW%)j@PdGWGr@XxAA99mVL9rrQ6>pR>O47CzqY|8RCN3zH&#oU$ zIwoOQ42o$>1XF!I=7M)p5WY7%unptMhYpS zJV;a;q>6ghom1b~?F3x#VfTcbm+TBoRaN^e-AmG8BUhT_T!Nq@!)|lymnmTTjMp1R zT?&yImBiR547+4!gOaM<=*ZfO>r{jfW7-z)z|MrHLb8rHIrSW!Ieuxm_xU@4^c?`8 z8QhgGW)ZEyg{G2DJMEgfH}CA@FCD6romiP`q?Fs(RUVB+Wl1GBpQkt8vD3@cRU^E9oy7$IPmnL!k{dwE!)fy=5!f_SzQoWt+d48aK$K$ zw&SumI;?nmlqyGa(Va5ct!?v-Kf;cISZT^kJla2^X2F%qo9@AXKDf;VJu28-@N1a>TEb1eRf~vVfSE;I9;tI-%Af;vxx2b z)*&Y=jK|@ubFGmCl`Ot91kJIvAOZKLcS3w&@Wf_6O>>|gN}36d!{H*LlTwXsgk=-d zBlQ}+c+CmeuXs-bc4usM8(Lj;g7fSW%S2eV!T1@|Tx+xy7ST*BCWbEei%TPzLW*UX zIysb(yEMJE+`VBIF}G}KF%oe@r&qwwK>BXhbZ@ga{~r$xrol(w^C@#9u?=Qwy-;w6n3~G@3F}hZ*grO}7$9-OTtZk0v3DD6i}}tDJ9`mj?XV!?UQrCsCT+)5>~5M8e&WBLayk=J%5rP z!V}G2f_UWscafvB{9I84qHH~x35+@ zBi;Kip^(Na8)-=S>bn{Q;J?d&rXg39eSqKGOfkO&00ZwGSZ{m3N?K#^ZELYDT3te- z`laB&PP%V=OO5?Y;|;z=46|*j%p-*ui-CXY{*|pyJ;t>@6790EIXM=J6L1@`t1Q~H zOQTT8f^N@b?jI2F`9rl;{T!5%F2iKnPTM+-wI*4#q$b?Q%W?0pD+<&fkKW@yv~@I1C6*5k zM#0(YzyM>}uh6W^(Gc|ydf7Ul-7!?v=uEBB--Ye&P3m@cTJKdBYvgpX6M1m{q^U3v z=DHSn#Nu%4C@N^{aGnGiOjG4(m+#ED+iOqGbwd!u|7u~9m^ya$8r?P-!sOQaALe;f ze=K>f*pP;HEA#*zcc;FIU>bVIl5}Q-L9bN={nUvB=mqWv!J3M=mKrAYJY_B*u^$h? zgFMg*=UDYJJDryxVkPx6`F-*@gliVPk{u^FYkJY+n|8he>*Y9FxYVnXzwrYYj6PkCIv=7&#*k(Nx~W z-*z9LY#||ufmx40qb_Tg*WFc;2m<~fTfCQk54-k)NL>HH&Mj*`U-S7N=ajw{?Q7A# z7VR(pZQPp9*L1$7^EI8ny#E{42>1UJ&h9aDqNy%CWA#cI01h5F{2BMt#7qAMk;&Ii literal 0 HcmV?d00001 diff --git a/e2e/components/NavList.test.ts b/e2e/components/NavList.test.ts new file mode 100644 index 00000000000..79307b2dad1 --- /dev/null +++ b/e2e/components/NavList.test.ts @@ -0,0 +1,63 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +test.describe('NavList', () => { + test.describe('With TrailingAction', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-navlist--with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`NavList.With TrailingAction.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-navlist--with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('With Bad Example of SubNav and TrailingAction', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-navlist-devonly--with-bad-example-of-sub-nav-and-trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot( + `NavList.With Bad Example of SubNav and TrailingAction.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-navlist-devonly--with-bad-example-of-sub-nav-and-trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/packages/react/src/ActionList/ActionList.docs.json b/packages/react/src/ActionList/ActionList.docs.json index 74c0eb0bea0..f80485534bc 100644 --- a/packages/react/src/ActionList/ActionList.docs.json +++ b/packages/react/src/ActionList/ActionList.docs.json @@ -216,8 +216,8 @@ "description": "Octicon to pass into IconButton. When this is not set, TrailingAction renders as a `Button` instead of an `IconButton`." }, { - "name": "ref", - "type": "React.RefObject", + "name": "href", + "type": "string", "description": "href when the TrailingAction is rendered as a link." } ] diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index 0cf06a981c1..cd95ff830c9 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -127,9 +127,10 @@ export const Item = React.forwardRef( } const itemRole = role || inferredItemRole + const menuContext = container === 'ActionMenu' || container === 'SelectPanel' if (slots.trailingAction) { - invariant(!container, `ActionList.TrailingAction can not be used within a ${container}.`) + invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`) } /** Infer the proper selection attribute based on the item's role */ @@ -455,7 +456,7 @@ export const Item = React.forwardRef( {slots.blockDescription} - {!inactive && Boolean(slots.trailingAction) && !container && slots.trailingAction} + {!inactive && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction} ) diff --git a/packages/react/src/ActionList/index.ts b/packages/react/src/ActionList/index.ts index ad2d03c509d..e3ca7e4e333 100644 --- a/packages/react/src/ActionList/index.ts +++ b/packages/react/src/ActionList/index.ts @@ -16,6 +16,7 @@ export type {ActionListDividerProps} from './Divider' export type {ActionListDescriptionProps} from './Description' export type {ActionListLeadingVisualProps, ActionListTrailingVisualProps} from './Visuals' export type {ActionListHeadingProps} from './Heading' +export type {ActionListTrailingActionProps} from './TrailingAction' /** * Collection of list-related components. diff --git a/packages/react/src/NavList/NavList.dev.stories.tsx b/packages/react/src/NavList/NavList.dev.stories.tsx new file mode 100644 index 00000000000..f7d0fa9d4e2 --- /dev/null +++ b/packages/react/src/NavList/NavList.dev.stories.tsx @@ -0,0 +1,49 @@ +import type {Meta} from '@storybook/react' +import React from 'react' +import {PageLayout} from '../PageLayout' +import {NavList} from './NavList' +import {ArrowRightIcon, ArrowLeftIcon, BookIcon, FileDirectoryIcon} from '@primer/octicons-react' + +const meta: Meta = { + title: 'Components/NavList/DevOnly', + component: NavList, + parameters: { + layout: 'fullscreen', + }, +} + +export const WithBadExampleOfSubNavAndTrailingAction = () => { + return ( + + + + + + + + Item 1 + + + + Item 2 + + + + Item 3 + + + + Sub item 1 + + + + + + + + ) +} + +WithBadExampleOfSubNavAndTrailingAction.storyName = 'With SubNav and Trailing Action (Bad example, do not copy)' + +export default meta diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json index 98603aee482..efdff7a4d9d 100644 --- a/packages/react/src/NavList/NavList.docs.json +++ b/packages/react/src/NavList/NavList.docs.json @@ -136,6 +136,37 @@ "type": "React.RefObject" } ] + }, + { + "name": "NavList.TrailingAction", + "props": [ + { + "name": "as", + "type": "a | button", + "defaultValue": "button", + "required": false, + "description": "HTML element to render as." + }, + { + "name": "label", + "type": "string", + "defaultValue": "", + "required": true, + "description": "Acccessible name for the control." + }, + { + "name": "icon", + "type": "string", + "defaultValue": "", + "required": true, + "description": "Octicon to pass into IconButton. When this is not set, TrailingAction renders as a `Button` instead of an `IconButton`." + }, + { + "name": "href", + "type": "string", + "description": "href when the TrailingAction is rendered as a link." + } + ] } ] } diff --git a/packages/react/src/NavList/NavList.stories.tsx b/packages/react/src/NavList/NavList.stories.tsx index 400cf8ae3fa..7603d6082d5 100644 --- a/packages/react/src/NavList/NavList.stories.tsx +++ b/packages/react/src/NavList/NavList.stories.tsx @@ -2,6 +2,7 @@ import type {Meta, StoryFn} from '@storybook/react' import React from 'react' import {PageLayout} from '../PageLayout' import {NavList} from './NavList' +import {ArrowRightIcon, ArrowLeftIcon, BookIcon, FileDirectoryIcon} from '@primer/octicons-react' const meta: Meta = { title: 'Components/NavList', @@ -246,4 +247,57 @@ export const WithGroup = () => ( ) +export const WithTrailingAction = () => { + return ( + + + + + + + + Item 1 + + + + Item 2 + + + + + + ) +} + +export const WithTrailingActionInSubItem = () => { + return ( + + + + + + + + Item 1 + + + + Item 2 + + + + Item 3 + + + Sub item 1 + + + + + + + + ) +} + export default meta diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index e69aed47ba6..ffcca312d8a 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -2,6 +2,7 @@ import {render, fireEvent} from '@testing-library/react' import React from 'react' import {ThemeProvider, SSRProvider} from '..' import {NavList} from './NavList' +import {FeatureFlags} from '../FeatureFlags' type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} @@ -65,6 +66,20 @@ describe('NavList', () => { ) expect(container).toMatchSnapshot() }) + + it('supports TrailingAction', async () => { + const {getByRole} = render( + + + Item 1 + + + , + ) + + const trailingAction = getByRole('button', {name: 'Some trailing action'}) + expect(trailingAction).toBeInTheDocument() + }) }) describe('NavList.Item', () => { @@ -334,4 +349,43 @@ describe('NavList.Item with NavList.SubNav', () => { const currentLink = queryByRole('link', {name: 'Current'}) expect(currentLink).toBeVisible() }) + + describe('TrailingAction', () => { + function NavListWithSubNavAndTrailingAction() { + return ( + + + + Item + + + + Sub Item 1 + + + Sub Item 2 + + + + + ) + } + + it('does not render TrailingAction alongside SubNav', async () => { + const {queryByRole} = render() + + const trailingAction = queryByRole('button', {name: 'This should not be rendered'}) + expect(trailingAction).toBeNull() + }) + + it('supports TrailingAction within an Item inside SubNav', async () => { + const {getByRole, queryByRole} = render() + + const itemWithSubNav = getByRole('button', {name: 'Item'}) + fireEvent.click(itemWithSubNav) + + expect(queryByRole('link', {name: 'Sub Item 1'})).toBeVisible() + expect(queryByRole('button', {name: 'Trailing Action for Sub Item 1'})).toBeVisible() + }) + }) }) diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 908322fb475..2ba2fc0d2c0 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -2,7 +2,12 @@ import {ChevronDownIcon} from '@primer/octicons-react' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import React, {isValidElement} from 'react' import styled from 'styled-components' -import type {ActionListDividerProps, ActionListLeadingVisualProps, ActionListTrailingVisualProps} from '../ActionList' +import type { + ActionListTrailingActionProps, + ActionListDividerProps, + ActionListLeadingVisualProps, + ActionListTrailingVisualProps, +} from '../ActionList' import {ActionList} from '../ActionList' import {ActionListContainerContext} from '../ActionList/ActionListContainerContext' import Box from '../Box' @@ -65,9 +70,9 @@ const Item = React.forwardRef( // Get SubNav from children const subNav = React.Children.toArray(children).find(child => isValidElement(child) && child.type === SubNav) - // Get children without SubNav - const childrenWithoutSubNav = React.Children.toArray(children).filter(child => - isValidElement(child) ? child.type !== SubNav : true, + // Get children without SubNav or TrailingAction + const childrenWithoutSubNavOrTrailingAction = React.Children.toArray(children).filter(child => + isValidElement(child) ? child.type !== SubNav && child.type !== TrailingAction : true, ) if (!isValidElement(subNav) && defaultOpen) @@ -78,7 +83,7 @@ const Item = React.forwardRef( if (subNav && isValidElement(subNav)) { return ( - {childrenWithoutSubNav} + {childrenWithoutSubNavOrTrailingAction} ) } @@ -251,6 +256,14 @@ const Divider = ActionList.Divider Divider.displayName = 'NavList.Divider' +// NavList.TrailingAction + +export type NavListTrailingActionProps = ActionListTrailingActionProps + +const TrailingAction = ActionList.TrailingAction + +TrailingAction.displayName = 'NavList.TrailingAction' + // ---------------------------------------------------------------------------- // NavList.Group @@ -285,6 +298,7 @@ export const NavList = Object.assign(Root, { SubNav, LeadingVisual, TrailingVisual, + TrailingAction, Divider, Group, }) diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index dd18407f2ec..780e5632073 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -1250,15 +1250,15 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav class="c0" >