From f959845921e73b6959d60ccb216b2457b13f38ef Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 31 Oct 2024 12:56:27 -0400 Subject: [PATCH 1/5] fix(ButtonGroup): add toolbar interactions for role toolbar --- e2e/components/ButtonGroup.test.ts | 28 +++++++++ .../ButtonGroup.features.stories.tsx | 8 +++ .../src/ButtonGroup/ButtonGroup.test.tsx | 58 +++++++++++++++++++ .../react/src/ButtonGroup/ButtonGroup.tsx | 26 +++++++-- 4 files changed, 116 insertions(+), 4 deletions(-) create mode 100644 packages/react/src/ButtonGroup/ButtonGroup.test.tsx diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index c3ca9822ff7..1a9eab686b9 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -86,4 +86,32 @@ test.describe('ButtonGroup', () => { }) } }) + + test.describe('As Toolbar', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--as-toolbar', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.As Toolbar.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-buttongroup-features--as-toolbar', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) }) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx index 091fe5c292c..211e09ad17e 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx @@ -73,3 +73,11 @@ export const DropdownSplit = () => { ) } + +export const AsToolbar = () => ( + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx new file mode 100644 index 00000000000..23892288363 --- /dev/null +++ b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx @@ -0,0 +1,58 @@ +import {Button} from '../Button' +import {render, screen, fireEvent} from '@testing-library/react' +import axe from 'axe-core' +import {FeatureFlags} from '../FeatureFlags' +import {behavesAsComponent} from '../utils/testing' +import type {ButtonGroupProps} from './ButtonGroup' +import ButtonGroup from './ButtonGroup' +import React from 'react' + +const TestButtonGroup = (props: ButtonGroupProps) => ( + + + + + +) + +describe('ButtonGroup', () => { + behavesAsComponent({ + Component: TestButtonGroup, + options: {skipSx: true, skipAs: true}, + }) + + it('should support `className` on the outermost element', () => { + const Element = () => + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(render().container.firstChild).toHaveClass('test-class-name') + expect(render().container.firstChild).toHaveClass('test-class-name') + }) + + it('renders a
', () => { + const container = render() + expect(container.getByTestId('button-group').tagName).toBe('DIV') + }) + + it('should have no axe violations', async () => { + const {container} = render() + const results = await axe.run(container) + expect(results).toHaveNoViolations() + }) + + it('should respect role prop', () => { + render() + expect(screen.getByRole('toolbar')).toBeInTheDocument() + }) +}) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index e3398885b3f..8373a76d81f 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -7,6 +7,9 @@ import classes from './ButtonGroup.module.css' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' import {useFeatureFlag} from '../FeatureFlags' +import {FocusKeys, useFocusZone, type FocusZoneHookSettings} from '../hooks/useFocusZone' +import {useProvidedRefOrCreate} from '../hooks' +import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' const StyledButtonGroup = toggleStyledComponent( 'primer_react_css_modules_team', @@ -73,24 +76,39 @@ const StyledButtonGroup = toggleStyledComponent( `, ) -export type ButtonGroupProps = ComponentProps +export type ButtonGroupProps = ComponentProps & { + /** + * Settings to apply to the Focus Zone on the ButtonGroup container component. This is only used when role="toolbar" is supplied. + */ + focusZoneSettings?: Partial +} const ButtonGroup = React.forwardRef(function ButtonGroup( - {children, className, ...rest}, + {children, className, role, focusZoneSettings, ...rest}, forwardRef, ) { const enabled = useFeatureFlag('primer_react_css_modules_team') + const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) + + useFocusZone({ + containerRef: buttonRef, + disabled: role !== 'toolbar', + bindKeys: FocusKeys.ArrowHorizontal, + ...focusZoneSettings, + }) + return ( {children} ) -}) +}) as PolymorphicForwardRefComponent<'div', ButtonGroupProps> ButtonGroup.displayName = 'ButtonGroup' From d90474681a6ae17dec9d171baf9e610d827043f9 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Thu, 31 Oct 2024 13:00:43 -0400 Subject: [PATCH 2/5] Create slow-news-love.md --- .changeset/slow-news-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-news-love.md diff --git a/.changeset/slow-news-love.md b/.changeset/slow-news-love.md new file mode 100644 index 00000000000..b133d700fed --- /dev/null +++ b/.changeset/slow-news-love.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(ButtonGroup): add toolbar interactions for role toolbar From 2309a2d5cb61663a8611f201edd4537337ef9e33 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 31 Oct 2024 13:10:27 -0400 Subject: [PATCH 3/5] fix(ButtonGroup): remove unusued import --- packages/react/src/ButtonGroup/ButtonGroup.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx index 23892288363..67b3b0b3b6f 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.test.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.test.tsx @@ -1,5 +1,5 @@ import {Button} from '../Button' -import {render, screen, fireEvent} from '@testing-library/react' +import {render, screen} from '@testing-library/react' import axe from 'axe-core' import {FeatureFlags} from '../FeatureFlags' import {behavesAsComponent} from '../utils/testing' From b51c79ad78c2ee8e5b1abd40045448aca8a831c1 Mon Sep 17 00:00:00 2001 From: francinelucca Date: Thu, 31 Oct 2024 17:30:21 +0000 Subject: [PATCH 4/5] test(vrt): update snapshots --- ...tonGroup-As-Toolbar-dark-colorblind-linux.png | Bin 0 -> 6842 bytes .../ButtonGroup-As-Toolbar-dark-dimmed-linux.png | Bin 0 -> 6887 bytes ...Group-As-Toolbar-dark-high-contrast-linux.png | Bin 0 -> 6871 bytes .../ButtonGroup-As-Toolbar-dark-linux.png | Bin 0 -> 6842 bytes ...tonGroup-As-Toolbar-dark-tritanopia-linux.png | Bin 0 -> 6842 bytes ...onGroup-As-Toolbar-light-colorblind-linux.png | Bin 0 -> 6954 bytes ...roup-As-Toolbar-light-high-contrast-linux.png | Bin 0 -> 7080 bytes .../ButtonGroup-As-Toolbar-light-linux.png | Bin 0 -> 6954 bytes ...onGroup-As-Toolbar-light-tritanopia-linux.png | Bin 0 -> 6954 bytes 9 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-linux.png create mode 100644 .playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-tritanopia-linux.png diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6153d33044c410cde7ee1db8d0191463b91a69c5 GIT binary patch literal 6842 zcmeI1dsGu=-p5B>wYwJV9x1K_!t3%{sl1XR3JQjFt1N3R*m!}3K%ydd2vU%cgn*V7 zYYdnAIOPX9- zC;M}F+w{ZTl~GY{!S%86@nIao6-Z)zj?EvQPXF@bHXp*yB=;-)J9q9hHEGCX@{5Eou~pakp?0)a>g388WL-ol*RwB>XF80+8C zM-repJl;O=(y?g7>k_$Kx(~*f8*L5=Nd67*5T1B>+(4&eV-sUb2fkD!#3n98NSGD4 z4Zv%t*I|_}PBlI}JnU6^O(+^}p`{kNJ8`xFSM^W3Q!rs+GY{aUKfkLBAwJvzEIR*j z(c>ooSfrj9-voU5QOb4z*!>(106(}Uu~D+jx9Tn1q2YGDh_xjO*J>F+AS}y|PZaS> zy_21aGG{!g=%?qqJMmgsEB1yT$@Cyw#bT?xR`2?5$F#n=;JbJpB#Tmx$IeU7b<@qLa-uVkO^UhNMFWSLdOu#6tu z=uaMQZf*g$Rwo0!CFA7CtO+gE*>mRQwM|=vLgC`k5Fujp*NZJ|f2A3uJ)a?CPR5pakbQ`e9SUwJ+y>A-R0H3hz^ zr#+PH%!!p*DpTL#N**v9sE3y(iK;HGUL1qY=%x^K@^f~*Dyn6nMU0gY)vyShgb_VZ z;*m1h8zIvk)?(ouWf_zGOsVO*ms4|NO7CPzN$;UUFwU}O8o_OQJae=xocFf{r?kVq5g$ zR&g;=**aSv>M870?nST`@15!L%rv?eg&&xoa<&>b8DzMzxG52|nMS*~YE%yvdnhS} zarks?zc`T-h_s7fr{Og>`Va;doX(1V<&5R5yF>Ws{J?uKQo`^S`yq)Pp3l5&Z88<*w-% zNeCIDps-NImCcEE!m?DX7^{Rxe~|fZ!K~s=ynu8qSHc(^Y=5!$+6+^Ku_|V+L`6jz zR1#}jEVA#`%1akYP)XYSHdyE4ydYEm{WkY-BLD6wzc{mXOjYgDw{T=KFMEZD`7E%r zokpX@O~0bK>LGBGajH+*te#^rx(MUm+!Z>}&#;>688Z-%R=4-q`YK!Af&)lqdu#x_ zjwEHwbh(nJZuzG3iz~=M{sye19Iqcu&Q{#ZZ|`ptW7+SXUWlX|(U(p0WT9QF@&r0- z_035hkC#Vtg~6=T4ElaD?a`wPgPsE0T|VtLxyJKU(=ff+nvo1nPDdKLBW*sestk>h zJ$>XI*We*IO!~$16hd3oXB}?3FAb=>8EV&CO)}iSY%-vU79Gu%-ah$ilkL&-eNMQH z$s2p~Xhut*xA(z=cK%DoDN42_0Yj4U0w~ZcFXneRI6$&ZZ}U_fgVdg~8Th#Z^hrmJ zNS3DE?~gotPB%jQ@UljPF}E_HZI9FYw@5BMySiVRF_j;c?4FQyL|uU2vuBURY=Dtz zU0oB(j*b}yBQ~+Vx;imux8KN)Q%CWG_}QKQL#!sv4qw&brI?)*>K7BBlB5qyTQd0? zjYc~NufkZf_TKWX>GkALf_F8aqWTpS6fimuFjuC1c}1|An$cAk=g-SCnq0|y4p~>Z zjkLx_n#R(%D)Utnq6a<2iR^*?z2)uk?`p-^QsHDjxKgzwjf*(v3}ZBZe`IG{?9es= z_o;S}>UfAC0|N_fhL@3pAStsNP1DTmVv97|8-489RDw18<7m}5>sYR>-{fMC48?(X z%$q2q92E1Uds)kJekEwn@W{xi+^h=SPgAz!{@S2@)`1I@!s=?*Q~yQi5CiP{a=?EN8mfg^QF_ zb$}%BL(1M^q0mo15~*muR#i@r^Dt84a5c$nP%uFa99@2WOl7I?Gys70O9GW zKhcAW%d-DKe)5F7KRlziAS9@aKtkFv154Y)Rq5>M!qOsP*OFLf!4A><2O@*09#hv5 z#_kqW^2#r0VgpAy=K78?4X z*$evn%%Z|Vd;g{PIoqKr&o4Abe}h;vrX*1Cqftc^gl-sgI0_lOHd{4&(}|dP=Itv@ ztDo75gJ!(%P8~dg1CuQXbZvfR@_0(0Q%GR>n-0&7K;j#pE9!U2IqoADsv_*&!x_iy zN?SH;YC9Nx6WnLYPf^mB-9fktHl};sewhf8{Wddrhb|BxIt8(bPn1i%$9H2^cXo z?o4DP1q%NM!V#9|hF*WmO&l$C;{5*aFy>J;yOW>Y8rMs%tu6ob(}F>ncK6xSr%xl1 zq37PE`bSR5W(0~~+0kZgTWiAdcw#fiSi$M4@USr97@JmBkLLJj`kD*eN*&~iqT%8H z1AF`xRueNp#{?) literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ec8b719dd01d0d2a515950575eb2c6fd3f15e08b GIT binary patch literal 6887 zcmeHMeOOXi9=@(KIkV<4yJ=*WHrvkH=BT4-l%G49Ijw6BnUWDQt)n(7I*NvfXyr^z zmRehW7P8rzC5WZ@1p<~SjTqz?C?J|f3J9nuCSD0%nExv><~cX?T`b& z_Pa+9e{mw`j%tEXS)NVeED|d5Z>hY^$1@*!JNQ6a<#(0W+7G8 zipSher2NkL!BJP{i^PC@>4Mjkgh(e%3oNEeMp%k1pRTWfA>Yl~n)f%C;l zfitX!4?EH9{*scVA_o;Erct3nVRB7InCIz^oG48#zpf+}4u?la$D${{ii#48wjbC9 zbR$oZahTiH)oyzYt*xyUT+)pMK4YRGn$j=hIk<_8E0omaWa)_53K;uRa8RvODE7Kh zL}G;QW&Yn`U<*V{%;@N7x}q2WQa3Ai=mNxr#)akKB)@SzbtjfAGWkm zezt)5iM^PATguAH)Gf29Z$=xUo#);Iy29QI+VmUHtGEBdg+H#WUlQS_hZdob?LH4? zw-kq?3ru=`AZ{ii7%wYB2r~OQL54xR7EOX_%3xI3;i#zLE3P$idAt4A{GOI-@S#h^@8Nq1Pf8A!lf_XX?rTx~8B!%($BPcM){ zZK0T{Y(d)FfvR^c-bD2gjpA8;m3F-HJy7~sKl%;yuMr-IRBQs z&N(=H$KUkShC|9#fStk?s?*zO@gGg3%{_pV<+1wy%8>R+^Ybn2{8`j6FF-l(5?9bO zH)x!1;U|HW0pO@%fn==R6Z53;b>TkZb@7Uy-u~!iC{ZVZ`0E9U#~%F)mhmDg0b4^K~od^&EFQm@Y)?# zGRN@p@0ZnhLETSfaowYIV%&0!#-$@CL;0Aq1BFET%M~fPA2HOT6q@nr8whc(5WV`W zQXNeRTD-!}|JtxTs?4Y-J(k9&vDOmXCEl_dVfoSay(nCSIDL|M*={0VWjQ)@HD3Lg zv*1aTzlb{KD8!D*>r0VOz8kz(8e}fU@)d|!yb0nONe&{8Jb+U;RGP=mjOV{$Xxfk% zjLO1VosNJ>eF(feB9Ta0aA0ld!-~>1i5cnR3(g^eZm90W&eA$B@Mt_GjiJ7KxnQv6 za@D@1`~_>5xd}%rKssvJuSQUsnk*wVgdoFQd`jn)X~rb;yQMcNt`P=vd}&~eeQ&iA z%L_{3X+5v`tFD2;yziJ3?%5)zn4NV9fk0rf!&6TS`TiOgN=k#LLHfh)BiA~>&nN6k zL#^$oHPfj$jW=hCgLkAx>#|x`rH>biSnzA3Qi&>V_z5C;};?QPIjwJ71C+#;**8cLm_o*S{!)Y}2m65b2?hc{f>F zFQrn+57f_p+8FNHwLsXpQKVSSRnqglJi364@80mT;RoYD@dgF9kbV=*#uEaiJLkVpaq?U4VqB z@v%sxct{dZU|z>9IdPoN%`KvhB1Hv>gwjlSjy`7> zJd+0Y6#Z4&h4)u?gz!nfzjvhgG%*jKfS-!dG*Ku>Y#>254@Kw7f9&DJ2v5LZFyi7> z8-C^Dm&SfwtNE=(I5svmG}Jtvcw3)$zoo9O4n&`jL-i=j?aP}qO4~WkJz>|jEiUx1 z=Nz>?;?yWG+4ow-_ub->0y(%_T0gzkWtJ}_|rcxXBHXdBEND3@p*f@_#BqvZ&#MRgF zNMuETuU3w0zK}#F=+e!JO*eLjEo&wV>PbP(7PHa(7N+jB0akCanC`RJLq76*bG@*r z_H24e!J@3fgPHY=8rwps*@j&@>Kd2Pn{XBC$H3`$~2)v^;-w z-cPH(LPQ*X6dp#z4?Vx)hG+{0xezAJ(fUieKjgTygLI~+y2j!0aC-!b_!8ua5k|ba zOUt`Sqc`s<;$`B^l%@%9nc&-DGi6VajdRX-LKKel`I+^<2|m?Jw3AIt-Kpq=Xt@2b zOU}Zrs7U&B^M|fAS^e)=54*Y$`H^El&U6`qYW`^=m@#|FDgQ}E-yMIPdM9puSp%|7 z0=GQSv>XL7O~0-wcrYB(|gd*zVu3Gt(D(n8Om%u4zTGB%M$7&*)n14 z&+rR3NzK~dmIj;O=$lMWpW3+O40wfkqMF}Su-~Z~2|v1M_mOOsB&whq3`cb55zfAQA|A zCnhHB?6T{Qml-u{wkJS|xi{L^XCxbkbB`UOKWw)K9^Ig7VI#B{Btkg$>g3+Cy>1g1 zEor071_nBGYRgSf<@U>#mJ+xkk$C?~902UESz!}c%*IA$#6c^d8(q|m!&m`R%%i_V zNB@V0{J&`PjXrBBFh4Wf(Qaps~|*3LkO?D?AR8C zLaGRI^zb}D)?b*#Y9cW#jM3piB9~J`W#AFva83DH-{7;q|9#nFujkBc;@&;Uddr>?8UJbW_?{<=F|_ia=U{Us$Q--T6wiru+4y4 zC)93jw05G#pC2n`Q<{o1$~|-K@o1&QmD%Gr@}tAsK)Ej+Gm)kk#OhQFIFD_wm^(eH z!N>ZF8UU!Z0-MXm(|+-Y3lwhK(yHJ>MN2Q5zd0Uc27Ki>>?H^1>=Vb!ybId@@FC(~ z)r0{b0Qi2p767(?KCuNj`X0s#0QM|?CTHg|v64skJ!%4oQ)BxnLA%Ma*Bn8+AbE(I zV$dYX+H|XPlo3RIVevNB`QM+%e+`}Z_9>1fn2Sy^MnF&lC7$a0Y=>^~aB&w2-yVj1 z*?e4&mUSt?M!h#h@FnKKy=9~e)3ppTL*a{W)LX#6aUDM3?hd2#jzQS1t+5n?W+zUI zre&-Sn)ex|Zs+HT&TWC0z6ER?7q$()IR8{TpZdB?ulAjq@hF0zGP&iPaH4U=kQd)R zR7iuzpaf{`5JS6rqjakg#LVd3hY}-lDPvWg|(CCLzeyQ64{>6nXR-sQm&UX zWE<<^*5MYvcD}jB)LV|yDu|=C_&$rS)t6*F_EqE=K7_IKVjWNWjo3gRyObq!XQ^tQ zqM3=T7^2(8*eu+ulBcy&wB%{u22O^wW02~{=1K{d21_$~@B&%tHW=u?hmwY2OqF6o zzNZH@FcvGd1U=kPds$PAjMnG6A$KJYU7{j0r~285;45wM#nMJ*a{pbulaH5#8Xons z5^*Wm8jlki9%J@ec|VxDE+8A`w`il%)CB>>ht{71T$fMtq~vkoUd4Srq@LPktgz2kl7O>6@ZYgxMelANl9s;a8^$YNQI1$CW3e z48O??&al0J9D8+^6JCOSyst{W6N;YPct#1xSXyy1DP07wbVZ;nG-YPiRa90+G?fV* zNf%c|Mol{zH(*6piRq^5S;Ho;X%DYGZYkr=B93{GS>sBncD6rTV zWipFv><#cnvt*uU)4aMAHyqt!Hm0U~k7rr17Ieq%-MfbfzFk;2>9tW<>0Id6K$48@ zw1*KiJ(Id-eG=n{dh{A1_)z@I^eKkI;)r-+->JgJg@6PUH^*)58J`zOo_@xn3j$3i z8t4($y%pwKUjtn!DuXpSXYU!ASibgDPY_Fy_(fijEdn!l9qtw#8ExJB%BgG-|J=&B zFe~!8t3}vuT#U!5@0s)*bBCgi0hAdqQ!D5&sa;tN>~FP|&YqJU>uHt~COIt0SGD|& zgw=8`H)(aY?d*XwYw}91DN>oNacN3=@c7;0#PMq9Y|zNlVZ^VLiXl#60kvT0@n21o z`D7yt>%K;-bnfSH(#D%P>TqPn;+?qw(v^NY;YH!d0asVU`aat$UGc>vC(Ee0Qsa%t zh?X!;0Qi1P8H6F3&C0Rm6>9?pTxk6beTLF#6ukdt07DLh9h5$QC*H#w-7dRRL+hTd zvLWyGNiBtf%V=;r#$-g+PZlXtgRRlr41MQZocy6Ok7&8zlQOzoz}vrne?$(9T9_1S z-OKJ}w?dc3>l+&zBU+rZBU+FPqZPttB1K0~H}+Q7vtnCf1JK<`FP{9MaKJA44-E~W zbU&Q-6E<`P$H#LYFA`w&b-uNAy4Stb*u;naIbu@EBXE&i3+*A@I_Do8GDwdIw&oPN zx)^4NV_c{pWhlJI*jMZdT@T6W&qc+gUKYu#D88A}hIT1wvNbg1cIY9L?wNo`<_%W| z6kVC_0Ni8^b5fzl6 zcz*Sew29U1ja+$U<`k8@(n(`RwGr0Y$m@=B0AM;Vddgiux#m~niai@ZJzSkJ8oX04 z!%0t$BZ9ki<5JN?^C@or$25|4X0Y|C`g%cP>m`15K)7$2r=impS%lNwcPgM#Ta$)X z?;6>Y(5Z^vQ-$;apkNmi4fdMj9`*rZuo_qInHWi>ju@+8m+swzpxP1{8K7!8Wd8o$ zH+@2+buX%^r&-umY6o?5&z>G-`njHMqf0gx7Z=+Sp-r`y+g4Y)=<84SQflcF>GNt< zg0L%$`!NLCM1vrSGIf7$v5DUa#F$iXy({FQ3(pp(tPE+Swph^o%dc zQu}W(WDofmxNqXD_`A3g?BrMtT=)8yeK}O$LztH~td2~GdB@DOvP&jxm8?za{cI2z z$r#+;Czc><>;xrzi15M8>MTc;u58#dvQ4jcZMQ`nOn%kFAfu>y_D^RXEDJ@#gVPO% z(IfQ3i)9$r+B(nSLuj(rM~hrfZy1?i`L%<33jf=ARgEcGAWMrTEEK3)B%GF*&Z%nA zM#AXNT9HY5`+krRrZE;l97|PaSWLeF!nrR+Vsm=8Bp30rvUbHT`ZEnP zE9mg0qorIW;$Zsnc2wVoN77I7-|&RIZvw7g${{%(wYwJV9x1K_!t3%{sl1XR3JQjFt1N3R*m!}3K%ydd2vU%cgn*V7 zYYdnAIOPX9- zC;M}F+w{ZTl~GY{!S%86@nIao6-Z)zj?EvQPXF@bHXp*yB=;-)J9q9hHEGCX@{5Eou~pakp?0)a>g388WL-ol*RwB>XF80+8C zM-repJl;O=(y?g7>k_$Kx(~*f8*L5=Nd67*5T1B>+(4&eV-sUb2fkD!#3n98NSGD4 z4Zv%t*I|_}PBlI}JnU6^O(+^}p`{kNJ8`xFSM^W3Q!rs+GY{aUKfkLBAwJvzEIR*j z(c>ooSfrj9-voU5QOb4z*!>(106(}Uu~D+jx9Tn1q2YGDh_xjO*J>F+AS}y|PZaS> zy_21aGG{!g=%?qqJMmgsEB1yT$@Cyw#bT?xR`2?5$F#n=;JbJpB#Tmx$IeU7b<@qLa-uVkO^UhNMFWSLdOu#6tu z=uaMQZf*g$Rwo0!CFA7CtO+gE*>mRQwM|=vLgC`k5Fujp*NZJ|f2A3uJ)a?CPR5pakbQ`e9SUwJ+y>A-R0H3hz^ zr#+PH%!!p*DpTL#N**v9sE3y(iK;HGUL1qY=%x^K@^f~*Dyn6nMU0gY)vyShgb_VZ z;*m1h8zIvk)?(ouWf_zGOsVO*ms4|NO7CPzN$;UUFwU}O8o_OQJae=xocFf{r?kVq5g$ zR&g;=**aSv>M870?nST`@15!L%rv?eg&&xoa<&>b8DzMzxG52|nMS*~YE%yvdnhS} zarks?zc`T-h_s7fr{Og>`Va;doX(1V<&5R5yF>Ws{J?uKQo`^S`yq)Pp3l5&Z88<*w-% zNeCIDps-NImCcEE!m?DX7^{Rxe~|fZ!K~s=ynu8qSHc(^Y=5!$+6+^Ku_|V+L`6jz zR1#}jEVA#`%1akYP)XYSHdyE4ydYEm{WkY-BLD6wzc{mXOjYgDw{T=KFMEZD`7E%r zokpX@O~0bK>LGBGajH+*te#^rx(MUm+!Z>}&#;>688Z-%R=4-q`YK!Af&)lqdu#x_ zjwEHwbh(nJZuzG3iz~=M{sye19Iqcu&Q{#ZZ|`ptW7+SXUWlX|(U(p0WT9QF@&r0- z_035hkC#Vtg~6=T4ElaD?a`wPgPsE0T|VtLxyJKU(=ff+nvo1nPDdKLBW*sestk>h zJ$>XI*We*IO!~$16hd3oXB}?3FAb=>8EV&CO)}iSY%-vU79Gu%-ah$ilkL&-eNMQH z$s2p~Xhut*xA(z=cK%DoDN42_0Yj4U0w~ZcFXneRI6$&ZZ}U_fgVdg~8Th#Z^hrmJ zNS3DE?~gotPB%jQ@UljPF}E_HZI9FYw@5BMySiVRF_j;c?4FQyL|uU2vuBURY=Dtz zU0oB(j*b}yBQ~+Vx;imux8KN)Q%CWG_}QKQL#!sv4qw&brI?)*>K7BBlB5qyTQd0? zjYc~NufkZf_TKWX>GkALf_F8aqWTpS6fimuFjuC1c}1|An$cAk=g-SCnq0|y4p~>Z zjkLx_n#R(%D)Utnq6a<2iR^*?z2)uk?`p-^QsHDjxKgzwjf*(v3}ZBZe`IG{?9es= z_o;S}>UfAC0|N_fhL@3pAStsNP1DTmVv97|8-489RDw18<7m}5>sYR>-{fMC48?(X z%$q2q92E1Uds)kJekEwn@W{xi+^h=SPgAz!{@S2@)`1I@!s=?*Q~yQi5CiP{a=?EN8mfg^QF_ zb$}%BL(1M^q0mo15~*muR#i@r^Dt84a5c$nP%uFa99@2WOl7I?Gys70O9GW zKhcAW%d-DKe)5F7KRlziAS9@aKtkFv154Y)Rq5>M!qOsP*OFLf!4A><2O@*09#hv5 z#_kqW^2#r0VgpAy=K78?4X z*$evn%%Z|Vd;g{PIoqKr&o4Abe}h;vrX*1Cqftc^gl-sgI0_lOHd{4&(}|dP=Itv@ ztDo75gJ!(%P8~dg1CuQXbZvfR@_0(0Q%GR>n-0&7K;j#pE9!U2IqoADsv_*&!x_iy zN?SH;YC9Nx6WnLYPf^mB-9fktHl};sewhf8{Wddrhb|BxIt8(bPn1i%$9H2^cXo z?o4DP1q%NM!V#9|hF*WmO&l$C;{5*aFy>J;yOW>Y8rMs%tu6ob(}F>ncK6xSr%xl1 zq37PE`bSR5W(0~~+0kZgTWiAdcw#fiSi$M4@USr97@JmBkLLJj`kD*eN*&~iqT%8H z1AF`xRueNp#{?) literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6153d33044c410cde7ee1db8d0191463b91a69c5 GIT binary patch literal 6842 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ac8d7c36981c0335d290f4460716f03e07e521 GIT binary patch literal 6954 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-As-Toolbar-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ac8d7c36981c0335d290f4460716f03e07e521 GIT binary patch literal 6954 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 SB>1xlxZvV;uEFUaKmQwmJ{ Date: Thu, 7 Nov 2024 22:22:40 -0500 Subject: [PATCH 5/5] fix(ButtonGroup): remove focusZoneSettings prop --- packages/react/src/ButtonGroup/ButtonGroup.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index c95e937cfa7..a65a813af19 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -7,7 +7,7 @@ import classes from './ButtonGroup.module.css' import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' import {clsx} from 'clsx' import {useFeatureFlag} from '../FeatureFlags' -import {FocusKeys, useFocusZone, type FocusZoneHookSettings} from '../hooks/useFocusZone' +import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' import {useProvidedRefOrCreate} from '../hooks' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' @@ -76,14 +76,10 @@ const StyledButtonGroup = toggleStyledComponent( `, ) -export type ButtonGroupProps = ComponentProps & { - /** - * Settings to apply to the Focus Zone on the ButtonGroup container component. This is only used when role="toolbar" is supplied. - */ - focusZoneSettings?: Partial -} +export type ButtonGroupProps = ComponentProps + const ButtonGroup = React.forwardRef(function ButtonGroup( - {children, className, role, focusZoneSettings, ...rest}, + {children, className, role, ...rest}, forwardRef, ) { const enabled = useFeatureFlag('primer_react_css_modules_staff') @@ -93,7 +89,7 @@ const ButtonGroup = React.forwardRef(function But containerRef: buttonRef, disabled: role !== 'toolbar', bindKeys: FocusKeys.ArrowHorizontal, - ...focusZoneSettings, + focusOutBehavior: 'wrap', }) return (