From 4dc93c67354fcbcd31c82e9f9f5cc27745305d7a Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 14:52:04 +0100 Subject: [PATCH 01/43] =?UTF-8?q?chore(SplitButton):=20=F0=9F=A4=96=20exte?= =?UTF-8?q?nd=20stories=20with=20types,=20disabled=20states=20and=20intera?= =?UTF-8?q?ctive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.stories.tsx | 46 ++++ tests/buttons/splitbutton.spec.ts | 216 ++++++++++++++++++ 2 files changed, 262 insertions(+) create mode 100644 tests/buttons/splitbutton.spec.ts diff --git a/src/components/SplitButton/SplitButton.stories.tsx b/src/components/SplitButton/SplitButton.stories.tsx index a8ac1457a..3eb954579 100644 --- a/src/components/SplitButton/SplitButton.stories.tsx +++ b/src/components/SplitButton/SplitButton.stories.tsx @@ -61,3 +61,49 @@ export const Playground: Story = { menu: menuItems, }, }; + +// Button Types +export const Primary: Story = { + args: { + type: 'primary', + children: 'Primary Split Button', + menu: menuItems, + }, +}; + +export const Secondary: Story = { + args: { + type: 'secondary', + children: 'Secondary Split Button', + menu: menuItems, + }, +}; + +// Disabled States +export const PrimaryDisabled: Story = { + args: { + type: 'primary', + children: 'Disabled Primary', + menu: menuItems, + disabled: true, + }, +}; + +export const SecondaryDisabled: Story = { + args: { + type: 'secondary', + children: 'Disabled Secondary', + menu: menuItems, + disabled: true, + }, +}; + +// Interactive +export const Interactive: Story = { + args: { + type: 'primary', + children: 'Interactive Split Button', + menu: menuItems, + onClick: () => console.log('clicked'), + }, +}; diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts new file mode 100644 index 000000000..705bf185b --- /dev/null +++ b/tests/buttons/splitbutton.spec.ts @@ -0,0 +1,216 @@ +import { test as it, expect } from '@playwright/test'; +import { getStoryUrl } from '../utils'; + +const { describe, use } = it; + +describe('SplitButton Visual Regression', () => { + describe('Light Theme (Storybook Global)', () => { + describe('Button Types', () => { + it('primary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('splitbutton-primary-light.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('splitbutton-secondary-light.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Disabled States', () => { + it('primary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('splitbutton-primary-disabled-light.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot( + 'splitbutton-secondary-disabled-light.png', + { + maxDiffPixels: 100, + } + ); + }); + }); + + describe('Interactive States', () => { + it('hover state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.hover(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('splitbutton-primary-hover-light.png', { + maxDiffPixels: 100, + }); + }); + + it('focus state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.focus(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('splitbutton-primary-focus-light.png', { + maxDiffPixels: 100, + }); + }); + }); + }); + + describe('Dark Theme (System prefers-color-scheme)', () => { + use({ colorScheme: 'dark' }); + + describe('Button Types', () => { + it('primary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('splitbutton-primary-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary button matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toHaveScreenshot('splitbutton-secondary-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Disabled States', () => { + it('primary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('splitbutton-primary-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('secondary disabled matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary-disabled'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeDisabled(); + await expect(button).toHaveScreenshot('splitbutton-secondary-disabled-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + + describe('Interactive States', () => { + it('hover state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.hover(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('splitbutton-primary-hover-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('focus state - primary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await button.focus(); + await page.waitForTimeout(100); + await expect(button).toHaveScreenshot('splitbutton-primary-focus-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + }); + + describe('Events and Accessibility', () => { + it('click event fires correctly', async ({ page }) => { + const consoleMessages: string[] = []; + page.on('console', msg => consoleMessages.push(msg.text())); + + await page.goto(getStoryUrl('buttons-splitbutton--interactive', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + await expect(button).toBeEnabled(); + + await button.click(); + + // Verify console log was triggered + expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); + }); + + it('disabled button prevents click', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeDisabled(); + }); + + it('keyboard navigation works', async ({ page }) => { + const consoleMessages: string[] = []; + page.on('console', msg => consoleMessages.push(msg.text())); + + await page.goto(getStoryUrl('buttons-splitbutton--interactive', 'light'), { + waitUntil: 'networkidle', + }); + const button = page.getByRole('button').first(); + await expect(button).toBeVisible({ timeout: 10000 }); + + await page.keyboard.press('Tab'); + await expect(button).toBeFocused(); + await page.keyboard.press('Enter'); + + // Verify console log was triggered + expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); + }); + }); +}); From 8fc9e1f16019957d339ac1e0d4543af9e18989e6 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 14:54:19 +0100 Subject: [PATCH 02/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20gener?= =?UTF-8?q?ated=20baseline=20snapshots=20for=20visual=20regression?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../splitbutton-primary-dark-chromium-linux.png | Bin 0 -> 2032 bytes ...tton-primary-disabled-dark-chromium-linux.png | Bin 0 -> 1664 bytes ...ton-primary-disabled-light-chromium-linux.png | Bin 0 -> 1608 bytes ...tbutton-primary-focus-dark-chromium-linux.png | Bin 0 -> 2053 bytes ...button-primary-focus-light-chromium-linux.png | Bin 0 -> 1924 bytes ...tbutton-primary-hover-dark-chromium-linux.png | Bin 0 -> 2023 bytes ...button-primary-hover-light-chromium-linux.png | Bin 0 -> 2088 bytes .../splitbutton-primary-light-chromium-linux.png | Bin 0 -> 2054 bytes ...splitbutton-secondary-dark-chromium-linux.png | Bin 0 -> 2030 bytes ...on-secondary-disabled-dark-chromium-linux.png | Bin 0 -> 1937 bytes ...n-secondary-disabled-light-chromium-linux.png | Bin 0 -> 1846 bytes ...plitbutton-secondary-light-chromium-linux.png | Bin 0 -> 2020 bytes 12 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-hover-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-hover-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-light-chromium-linux.png diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..9d85be3649fb3c3c5433303cca8b5e3f1542c08a GIT binary patch literal 2032 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 KMNUMnLSTYrd?kwj literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..277859c20fb020d7679e16fef88a6de221800170 GIT binary patch literal 1608 zcmV-O2DkZ%P)n02$>lt+o$3F7bHCh7b2ejhF|~xj95R$5rHF{QxdoG& zTI*?QJ7$LOmn5*feeZp{-+S3iP@1Nm=N%s(V~jz8dkjQ)IyyQ61@1ji6h)xGJOGVG zBT!%-fIxvcK|$5rprC4QP*62DD5#nn6jaR(Zch~s&Gw7I-s>vMs+`vpBe0$8c zt4fP&TD8m~oW_yo40r!_y^U5~W+0?!j%5>ux>rF?aN%|oxQ^Z5iNRJwra$%d-i9z6 zRS?pgAn^IalA_4^_Kv>i@J*RUyxQc!J;jCFf+&gXPP=cpu~cS0CFQ<`a2K@-@nubL z`nDHK3i2j;Ma7=c*KPmk6l5Z)RyB!1APsFpHy!`@bW~b?sMTsJPmRss(CM{@&W99b znp)9h_Of$HU>Szx`bQ~TCKfeqEW6~ot`FVd7*G!+g}K?WGoon(qBy}I_c;+o;M(u8 z@T4WXJ9!8~n8i}Au)b;en3XCul@3hZaNZ|yMbzqbg~eBflZ*Dm;F|X6Wd9x8*s2TT z8ew&|4OqFcq)%`+yBskjXGxe$B`NWZ{xC#R{kLbE6)v^=eLKR5ySLMKfmq#q_WLgy z9U48|OV7vS)A#?HAuU%oh(sm!Zl~|WpH7lEdtKcFoLbwc$V}qw?&L#Aaq4zndw|!- zbrJf;!O_`G$V%flC43<`p56ALP;0>^mXgWd3$MfxGGeAw;AAr0GTl|$lD($>i?6_t+x;mEZEN^LgPyx7YUPgbt& z$0F<6A$nAA)Wj^uWV-G4o8*7|O(W0N^>-=#m?QHMui?UKxiL1KMALz>k}C5=A{AA% zI)R`n0{K8|iqo`t6yzBdRdr2~Jk%IcT9QS>0ay zFOy+7PLvdB>|Ejvb=wW&B#BQ>M=Rr1NMd6}Zd}SqNnvT=Mr4;>P!$K^$%n%ie+;JP zU5=6jg(;-@iC990=a~ifYB$eL4qpCwF#fQx{HR)2vkovL79t8=r7&a>LU{fr!(

j+Vn8eOv^7eoZapsto;4iW`@090^Yd1N z^ST{9q)AOz6qZUHT@Ps!3hvDN7s zHwcGtC9{U%1Th_Fd+MS--v)OoGbzdiTX}E=^4HG6!_qv6Gk*D%?yS%;q*G8Sy-fvf}JHmhGittszZ+ zLBZj$(>6%Ot!g|BY&XJ4q?br)6W_93TBIU(Xu2mC0tZT|zqiv36p6#0sUJfAi7;)D z6b(`gy8WK6DLjQkOE-K<+uT$cQD)6IW?+Ke|0#Yf#S%?$Xgc);*3mz(qJ$E1-=7Puh;HIGSPt<&#Q{# z+V22TF8shXy_C~LX69z5pz7Nr@$_!jgS=9!$+I(62;lsn*j00bf~vUzER{;2z&rpl z3SPlP)eD zj-m<>A#9L?2;oFT@9-j`cX$!eJG_YK9bQEA4lh=(w>Vy3@&6B8Urm2Ql41Dx$dP##VWqPr}WvBQCSYtegIHJ#(@?h3e1_B&9%XYA_1%zx~Cp5a~a5Q+t@Vvco z3@=VUUW^8vn4>irKd-+0rH5BjD-nEd&EmweeeXLVL!-y;9jP65^BQa=vwVAOK>kKB z6$XY_J^;KUQdAU-TF~0x;lpgN;m$t>gQSh-gVEBGtn0c{-{sfkZ7;Pbnc7=*ju8(; zO?y(x^HrjIsO}$kT3Wvx^leHuCzqEcQkt1CJ8Mw=+zZ83ie7uq1ixUdzPl~8 zLm-d(^Iz#w+Gl_JYIUm^VoS>C(!XTAkf}&6%DD6~y{y>cfVb|_7@DEgX_n{_6|>MF zstz@U*m2?d`;L3mvpZ}r5qiK?SKf3C1m=9$eR*8Jhpzd1`fft_=xkpX4_3=MpKm|g zIrQP*h6Ey+!ev03UZK!isDqZNV#oVHNL0vmc?qUesa2`VqI@+00bY{Oa%`w; zQeA%L8D6@~4-UhBYV1Gh5;$=xR6b}>1SYbt!8yifX;4w@c8sBP3boM1GTpAUb0k|= z>pu6}FRGBJALJzN-jgufZBvr@>0jmq%Qw6vMQ~rK`Ohe8)Z$?EhyhQ1cX9pf{-~|C zXVn;37vjKZQ#&xdm{OV*+-`Oz0xGWm+c}Xvy?upDm!FuMC4E-q7UM0)h8Z?MqpN#j z*QEFSt*WWG(lT5(Q*y{KEM$QuL*Yz2gg^mhGjC}Waz!u<27shr^XK+ff#XGnnFLh8 z2NoHGDuX$?u6Fo_SECm=hg+^MiVo>wEEO+(4c|L3=5(<3#@=8#`TGPSI2}wPl`{bx zLS2RmT;>IFO|OIR*J}ZR6`YOks!D+TiKM~W5!n$BP??BX|Dj5Xl(+PZ3)6Z7IflU* z9|ryAACz(^cm#USZ57IKLWQI2O$zr02T#6piy>l7#)JZ$f^*!e=?&czr?u3@K1c6F z96QV)nDwCv48}*Bi=(q?<&jFZ&5aZ5eEJsKpR3n^#*iu>tZ>_V2%4PNM+B=Obnmag z#<51JrngF`qU#r1V)C|^QE1Cw-nq|$8#1Ef6mt*vBI09A6u8kmYnC9Dd5PK*O-N4iNW1+WFmsDPO>)iQkW#^@OYMa%( zg=LoPEahfBGH6E=4I#^Bs493l9oBl98gHJs5Qx*M^_k>xi*_a_DxjfII*;|e^*etY zrO7>^bD;@6r1fCk`<%*v0(8Ir|llJ#ch~IbIeVxIbmL$ke}i zZ3IDnT%4%qhL$k6xJ6EvQ01bl>dkA?c@ojZzwjz)(0~nO(^c0mz>@_(QeEL<^6A$t ztGuRNa54@{o~-vJ0j_t<)&7N3h~As6jQl(88hE1g_KwuNalH-3T3;ly<2RsA3`3s4 zcphOLMBaag7ZJU~3mMP*K!mVC*8a%|h!8exzU>AvYK3$W9~HG3MEI`rH2?qr|NnNU j$PfSk00v1!K~w_(wEaKbInvg300000NkvXXu0mjfyNUC% literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f9090751336b190c56c36b7b71143135891407ab GIT binary patch literal 1924 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 SZ`iW{0000JJkP)|uO#p+^ zWbF@L=K9XL=bm%Vxo7U!$DTibJ~%MsXTDikSpiwT?;OoJa`elm-WM-kfGion(IfxO zfe?Z$nZdDGEC#Y<497s0Od{*=%p&XW%p&XW%p&XW%p&XW%pwQu7p&mY!{A^4zV`pk z)0xrc(jq02+z}y5N1sx6s|pn0HKWKk+HOsGzIw*|@rmO`WlHU~fZ&E(PpMHWq1dC& z+l=t%nbG=F`51Wf*}uQzNaA0dt(R?A8rmE*uQJ+hc9@AIo5Cp1amyiIc)h1N3UyWg zM2A7i`#$d-p+cy(VdQRuZdaEl*w7itubT4xq5b5}j^8lCu$RXzjRVbw+*gc}EO7TB z4xcphxyUauv`+xQN6ph**WG%vo}`@Y)}tH2KXSznUNcIyxrB^9vR&v4#+FbK- zxn7f}LM47-rt>%B3=icryGh{RCcpkc*^fi5XB&Ndd|-quzdcbS4W0S5E4YVDTI0(s4iseVh+5QwtC@^Ot-FE3CrwCHzz z?r;Sn@TFLco|lTvnmi1KXlHN#G!xnH;z}={Z<(kH&&2?Yh*JCtRcVX`5;NY~;_!d> zpN(E9R%lZ54;nADdSG$m#F$MRn!R%NqJu-V)n|VC-p{V~*oqPV@cHszUY-e&6-~9; zwG6x=aBR-Kz+-BoIyW&cq0y0$r2<<6N?<*6ELPI}aLQhx&EKBJQB|?k0OlG$EV<-h zF;h!_lZi-?ga7rc!CUHi*B6m64aWw%TUV5K5&IKdwSU{`DI-1d8DW zFIQ1%khe(@)9MH@@PJK~(O`s`ZDVHph?Ax=v)Od+W)HY<{@&{9fjq~rDFS(x<$<11 zq984Q%k|n!-}F*^-nd#{R@&49#q(VZNFP}a4tSaq*5?}tNm`OnAxr$~fa|7!P>=wI zVW_;m!G1{3-!G>siF}w{K5&I{?1!gsH-AL%3?1;e7X{38sg_9D5r!A$x#}}U4Z$mQ zd1BBRh`d52`k3JIVU(lq5E@cqKD*Y~H8ks?gZ$1Wf_#wT5Yl8Ye~=qxC^o6&R%mR$ zdq#~~Hg@IJ>;a{PJaUV?=Lv`iQDiJLVBv8emnbg)rm+q5s9iLRXew$?NP!mr z4l7oSMkNF%a3X>TVfhIp84NGb>VcfkRYZ}_WYhrmGnR*GYrIymBu_& zWK#>=-V)wk~nWan05zAAp!_HwW$YB_w1NR>Ke9gJcps@ezp2L`*FE?bLL+;ofG#X?C#Z zY@%r2GuxhwGn2RLeTjn5Xw>?0Ey_8)%h~T?rNP_eZ~6SLuE(yGg09~Fc;?Kqf8N4; zp5*{!-+yNoS$}61ISR#V|2jgJ{~tNUKhc6L8N<;hPkz6$vLc@bW`9DK3H%QL0RR8( kuA%P$000I_L_t&o0G2ij>_q1~tN;K207*qoM6N<$f^AsucK`qY literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0a276663bd8f6bd63c94af6af5ab0588293f7f2c GIT binary patch literal 2030 zcmVAjT1BuwsC^S!8T6NIM~Js8VB1rLE~VXD?~4l3_q8vJl)yd+p0ZG1vwWWei;B0 zsyweJ+$8bNv27!ue7X8|-cSFY3FPbB#SnYWs7N;Q=wN@p^>26UaXvP}ya!9(IXwgo z$%dASDW40jFUG$Ub>NPz7Gs`YENC_o9eP}9~@Wj}})J#%@ zlyEPX@KI;E! zyU%OId4GFT2QJp1Sbb#4w`;`*!OrseAlF)E&8@x|o6Fap@9rP$)Rsc-qawG}#m?UT z&eLMdN55H@SXm&Ef3mfUcl*71{_AFoma4>jvA(yz_3y~{>pS%a9;)4j87uBQ$2kRD z%*Iv@irh+7ws-gUwjQk}{OpMx=%Z$xe~d2F)+6jyN?6<3e;i>iuonP8fPUhwOb6P7 ztZY3^2_vZ!3SFL5r!IQ%sx9mXjiHvyDk)?hRpx_k=9s?##V0b;9HFe-jV_jSmp74K z;IZL=^2C;69#UJm8;&n4#Fvrux839d)7A*CvF=Z`#hb&!V_BUE#csP@)=49n%Ea72 z&EhULkb6vEuC_b(#?o_cu#p_~{(WLuXT}oK?sjZmdu(6@d?e`Jo$>Hla7gdr^EG2llgX@2)&tCT?)mN|_`17Csnp92VOi0ET z@-wDVRgEs&jJXj$q0o@Rr@QFEt2XK3_GGHro5NaQIy4r^e-%RqsY) zLUxeP4RJK7ARo^lG1_V(sxV)iZCZ_BH9WjYBBSARn00$|>>vds%_@AQ6=tTI!y=KW z2mGEvN`jD}-B_LajdC&_bhWWjdI+V3WLd!->G4@WKb#hZC{c$*5A;*Q@|Mv0f%N}G zvm3aR%bX8;@Tz2(wz}voJs~JBhj0Ali|c`C;Tgf*PN&E4)<{w;O$~-BFIv}udd5Rt zbJ4CpQg~fMRco&xLlp}pJWu2axv48UqL_i!%0{LE&1MloxDH8@08o^R(2ts!`ZEYWDrzYv#2`CcVG!ZT}G+`IWhIeA|) z4&SPy{lr+wy2HGHj`H(uc&iD*G`~ppRxWp&hO(rT%Bn%~Ur*DWTkCRF3*F*58oIo+ zxtUeq#ckAj+E32Xe{>Kgs*-Bt^J4<*+Eh=~yZFrZ>eY*5d#53}x!Ue_UU-wm0k8&% znhOvC!q}9W;K=|uTbP!dptz&60m<_I5qvm1C8t>$82S%J_p1Yf(7-vR-2_mBEOoW@ z$qq3{j!#WSlgl^*!tQ=Ta1-w}4DS;>lp*6Ygbf=TT&1~zqY(}=5^(vC?ffFPnN* z)B=%)Dh=SSz4(OJOvomVPJC?kjjB@gH%$#K-(a2CZ zs&Z+zAgO>Go92)b-so~iHmxY21}GZhd4ru!4kR_`_FxnGT{P$6eH@|2RftT4bBf@< z6M@SzqWB=bB${exg(oGZeXrWZetI(1#i?;)deYC&rGr-XQRMHYR@NGaOhZae#=$}& zkqKHgUzDRWi;b6#V{&6N8=e())TlpmBuDyseCiwV>?aCSTM17Rxc5jVNWN4H%OZ1& zvkDNDzD<@FBB4wrL_m3|AiW56eI-E#4q4>&7$qwX?AQo!(4d#9STeXkA~kO6n__f) zv0+SyDZ%HWm6AVqr&2p8jQ%a!;gP4GIb;@$p`o!mL$z_ ztY_Q}w5+JvyK6c$_~3#DP(zXQyc;Qn_?<=~aInpXnw}gkf%Eq?4z_WE#=$mD&^XxU zN?+ecgoA?}uKeMXPx|_PM>sfKnEwF)0RR8!S?3x6000I_L_t&o0E_to)@!K;XaE2J M07*qoM6N<$f|_>aL;wH) literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e2824aaa6dae3eaf64911c2a0d5ab2efa0b604f2 GIT binary patch literal 1937 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 literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7eef09d7c3ce3466bfe150edaace94cebaa516e8 GIT binary patch literal 2020 zcmVNkl!~T=;xYzPR>Zvj{_lZ{%h*g=IR?16IN?{XUcCY? zE>3X!7#GL5LF3{WH)vcO;|7h3W89!|af}-@E{?ecCc)@Pr5HO;V7F(Pl}x3ngC7Z_ zU1smlY1sg89OpJ_QjD4tYMRjzh2T8D+rDO1M!Uq!e1QI;|M5|aLcZR43zocbCI}j% zz58$>@>KJ2$$WYl?~3sc!|BG47B_E&8`%gW7)kg^9|9X{nY%+LN5?b-Va$`=+Wvm+ zlXMvC6dyiFN!k^vFDkrtinoCC@}#$_Wf_Y-+l>+Sv*gfymf1{+vZ7NY0)8Rf&_;xe z6pHqNp6^6Y1 z0d|MxQ?=8iuD5Gx!IFFNIfhSFu9f#vJ)bWK%pET}LojRQL1UO^jzZbq*eNG23ssO$H@hzVa;ovRl0$=Qw@{z$KVMqLJX*#I`Sjg~e= z%>NUFcm8#>pQcVKv8B|D%Sy^`=Q7gEt>Cmj^87#QeuTK@KR%;#SSZR!;68zlxZ-zz zI`Fv6UnnFNp00WDU}!ZS=SkEyyCS2p@=nCpOX{>AVjoqG z)F3IBCBSBL8QS&-LsOKbqL6ic<8?U!*p!*me?-UWu2xG9Pf;~h*VTpsa0(xK1M$%z z+H$#hUT*b|h$<_?qJW?%+P4OV5D4fU-6|Q12A>UqF*4}$oGr`RM&$(0E-=AAhYGE3 zFVpugMA4yRU|%pqnnwp#@iJ6NR1hjeqGQ`=1EDy94Z03^nxK3@Yj!7VM9&)GPj~Z= zSx}Afn@2ahrf_KEW}sq3dft)mcF~1S!d9*$VD(5Rz{3B9Y{w2 z!4T9xGTK!koND0=%kVrgt%;kN=H+9&6ia5e#iojN4w{}|^vdS;oQ=L4=7Ea_oHoLM z4w4>~{kSSe1H^0BI19)(;MHqzoN0_^fx+j5A5?K``J3Sjc#t2#y)4|21GL_C2dmwjeSEbqx( z(BJ&9b)TvomTMBmph|tOR8!26T?R^qNf0em02WF55hpf+UWlqMHUvXi4&mm}#~BHx zi^0pMf+4FEbX7&`VBoAkzJ{qb8%MxnwdC!_LA6>3R);kW5Qrw=z3fH_StTJ=EL0T} zp)OT;K>|DXs#BboC)mdqo|~T)Q4X&+cP1r?J+8qTQ^fBVd=!<=VB2`6Gte#C~@vphrFwA z?paSbSfLf(f7ZXJ7$56V2m8p3KQD&fba(Uf;T` Date: Tue, 14 Apr 2026 16:54:32 +0100 Subject: [PATCH 03/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20fix?= =?UTF-8?q?=20snapshot=20tests=20to=20capture=20entire=20component=20wrapp?= =?UTF-8?q?er?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 1 + tests/buttons/splitbutton.spec.ts | 141 ++++++++++++--------- 2 files changed, 79 insertions(+), 63 deletions(-) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 8516ff6a1..9f0b23322 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -53,6 +53,7 @@ export const SplitButton = ({ modal={modal} > { await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toHaveScreenshot('splitbutton-primary-light.png', { + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot('splitbutton-primary-light.png', { maxDiffPixels: 100, }); }); @@ -21,9 +21,9 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--secondary', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toHaveScreenshot('splitbutton-secondary-light.png', { + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot('splitbutton-secondary-light.png', { maxDiffPixels: 100, }); }); @@ -34,22 +34,23 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toBeDisabled(); - await expect(button).toHaveScreenshot('splitbutton-primary-disabled-light.png', { - maxDiffPixels: 100, - }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-primary-disabled-light.png', + { + maxDiffPixels: 100, + } + ); }); it('secondary disabled matches snapshot', async ({ page }) => { await page.goto(getStoryUrl('buttons-splitbutton--secondary-disabled', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toBeDisabled(); - await expect(button).toHaveScreenshot( + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot( 'splitbutton-secondary-disabled-light.png', { maxDiffPixels: 100, @@ -63,26 +64,34 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await button.hover(); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await splitButton.hover(); await page.waitForTimeout(100); - await expect(button).toHaveScreenshot('splitbutton-primary-hover-light.png', { - maxDiffPixels: 100, - }); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-primary-hover-light.png', + { + maxDiffPixels: 100, + } + ); }); it('focus state - primary', async ({ page }) => { await page.goto(getStoryUrl('buttons-splitbutton--primary', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await button.focus(); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + // Focus the primary button inside the split button + const primaryButton = page.getByRole('button').first(); + await primaryButton.focus(); await page.waitForTimeout(100); - await expect(button).toHaveScreenshot('splitbutton-primary-focus-light.png', { - maxDiffPixels: 100, - }); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-primary-focus-light.png', + { + maxDiffPixels: 100, + } + ); }); }); }); @@ -95,9 +104,9 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toHaveScreenshot('splitbutton-primary-dark.png', { + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot('splitbutton-primary-dark.png', { maxDiffPixels: 100, }); }); @@ -106,9 +115,9 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--secondary'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toHaveScreenshot('splitbutton-secondary-dark.png', { + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot('splitbutton-secondary-dark.png', { maxDiffPixels: 100, }); }); @@ -119,24 +128,28 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toBeDisabled(); - await expect(button).toHaveScreenshot('splitbutton-primary-disabled-dark.png', { - maxDiffPixels: 100, - }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-primary-disabled-dark.png', + { + maxDiffPixels: 100, + } + ); }); it('secondary disabled matches snapshot', async ({ page }) => { await page.goto(getStoryUrl('buttons-splitbutton--secondary-disabled'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toBeDisabled(); - await expect(button).toHaveScreenshot('splitbutton-secondary-disabled-dark.png', { - maxDiffPixels: 100, - }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-secondary-disabled-dark.png', + { + maxDiffPixels: 100, + } + ); }); }); @@ -145,11 +158,11 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await button.hover(); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await splitButton.hover(); await page.waitForTimeout(100); - await expect(button).toHaveScreenshot('splitbutton-primary-hover-dark.png', { + await expect(splitButton).toHaveScreenshot('splitbutton-primary-hover-dark.png', { maxDiffPixels: 100, }); }); @@ -158,11 +171,13 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await button.focus(); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + // Focus the primary button inside the split button + const primaryButton = page.getByRole('button').first(); + await primaryButton.focus(); await page.waitForTimeout(100); - await expect(button).toHaveScreenshot('splitbutton-primary-focus-dark.png', { + await expect(splitButton).toHaveScreenshot('splitbutton-primary-focus-dark.png', { maxDiffPixels: 100, }); }); @@ -177,11 +192,11 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--interactive', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); - await expect(button).toBeEnabled(); + const primaryButton = page.getByRole('button').first(); + await expect(primaryButton).toBeVisible({ timeout: 10000 }); + await expect(primaryButton).toBeEnabled(); - await button.click(); + await primaryButton.click(); // Verify console log was triggered expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); @@ -191,8 +206,8 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--primary-disabled', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeDisabled(); + const primaryButton = page.getByRole('button').first(); + await expect(primaryButton).toBeDisabled(); }); it('keyboard navigation works', async ({ page }) => { @@ -202,11 +217,11 @@ describe('SplitButton Visual Regression', () => { await page.goto(getStoryUrl('buttons-splitbutton--interactive', 'light'), { waitUntil: 'networkidle', }); - const button = page.getByRole('button').first(); - await expect(button).toBeVisible({ timeout: 10000 }); + const primaryButton = page.getByRole('button').first(); + await expect(primaryButton).toBeVisible({ timeout: 10000 }); await page.keyboard.press('Tab'); - await expect(button).toBeFocused(); + await expect(primaryButton).toBeFocused(); await page.keyboard.press('Enter'); // Verify console log was triggered From c791422871a9407aeaa7fc9a7b8bcb1f742e6da9 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 16:55:31 +0100 Subject: [PATCH 04/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20regen?= =?UTF-8?q?erate=20all=2012=20snapshots=20capturing=20full=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...plitbutton-primary-dark-chromium-linux.png | Bin 2032 -> 2242 bytes ...n-primary-disabled-dark-chromium-linux.png | Bin 1664 -> 1842 bytes ...-primary-disabled-light-chromium-linux.png | Bin 1608 -> 1774 bytes ...tton-primary-focus-dark-chromium-linux.png | Bin 2053 -> 2263 bytes ...ton-primary-focus-light-chromium-linux.png | Bin 1924 -> 2109 bytes ...tton-primary-hover-dark-chromium-linux.png | Bin 2023 -> 2237 bytes ...ton-primary-hover-light-chromium-linux.png | Bin 2088 -> 2273 bytes ...litbutton-primary-light-chromium-linux.png | Bin 2054 -> 2206 bytes ...itbutton-secondary-dark-chromium-linux.png | Bin 2030 -> 2297 bytes ...secondary-disabled-dark-chromium-linux.png | Bin 1937 -> 2105 bytes ...econdary-disabled-light-chromium-linux.png | Bin 1846 -> 2025 bytes ...tbutton-secondary-light-chromium-linux.png | Bin 2020 -> 2272 bytes 12 files changed, 0 insertions(+), 0 deletions(-) diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-dark-chromium-linux.png index 9d85be3649fb3c3c5433303cca8b5e3f1542c08a..8815f2599fab9d0f54a553bf2e57a197e55de579 100644 GIT binary patch literal 2242 zcmV;z2tD_SP)fFL7*I3UPKAPxvJ5{Lsa$p}Ae zD!E$Q8=l>gDAEe_nH6R^g_cyLN2)7^aM{cDG6@8mNr>*g)8M#swRZ|q(!#O>mBtjb z@*d1sbxA+A9IsOc*3{;uPB3OwnO-0__dK@f9=o=k7ut*`TFPB-+Q#v+RU=Ng z#5;j*yz#DWj9J0-QiH1=Vw(_qP=h4WXrm+=*0B40oAK&vPYX`a$~45|cO0X`tc+O8QGQs& zCpSVwvJ|j18wN~(3k|GZ4qX4eie>hXGP-`jM+&=^Upd*91YYfe!KtGOYBxj(!RAMJ*jrEc19D)DCjh62C)YLP*5{DYHUMmYrg zu){Ib={Dd{As$c<$qq zzxscan{wdbN;gNWL2WTC6TAn+B$}~?C%an5pk8TjIG~X}Q3+$Wb6jdtU2MpN&c1g_ z2EI`2|5JP3IrZbqcCXtr_Q%uxT{zv^{`zN^4rdSEs&+)e(1O8(hT^^1Y@nlec5yMp z^o;g_)I#lI4IxxmCS@AkZT2EBHO^_3IoDphUjvxhivA8d z^n?$C8q2XO*EDAo?1$D{?lp$$HFNL~N=t+1e%(L2X|3)jWN>8-fq3*r({#^BecfGF zq5LtK0JyV)@TlpfI@3&k%1ka)gkq&Jvq;UACspeGre31lC{;i}S~5GzN8D3szis~s z3&e=uE#s8_j=7g*Fdr`#8N{H78ftQlvpN}?(IwKVR8L>I1gh+nPbvR-hqvbB?e|e~ zz9H+3WnZM4DBE!0jDgR%NsEg0U8`>m(0Vxu)(;L3H-34fac*muI?HZO+u$lUrUNbA zps-eTPRI9TCv+*G7IfLy^*$U9982ONz}I9p$4QI;2^>n_M5d*JRu$ucYsQ z{-@~$I@zkb#44l39+av{YfT0&bb zSnL^`1nN*E@qEG{l;j&y&pSr@7@3A0>-33_no^@)IYOOr?n1^{di=7}-_|@}roqJv z`xLwdm`x?k-CPhVwaLKAvRDpcfKRcNRue)X%+e3Kn!VK(0A0$_fY{+=Gz^jp6_E$O zP@;+wclHKZAelK$F+o5$*LKb)(|jTU;w&RDqokeU9h{6_&0o`f5vz>mJqX2eMKXyt zdM2Tf5p$Ktqew5*?<=Jsp`3sKs=Nx2<=-hFVl-eWS4GwZmZ3dG+`@oE3X+H0wc)I%VS;;+XXQ z&jaPQdi7aTMu9e!gyChqPo@>BL0{`=n=>fa$(2hds|NpL%eGSfdUgg50DL%XJS>EP-K$ou1thbBQCnioy93&Z}||bo(NWXD9mx zr{z@g79ad=m09eB6frjvX>pFp^>EmAr^y+_%VsOPRmSH)mA4Hfo~lMm{RhaC zRc>J3U#u2mU!b$u&rr&I#Z2nPjhtKq791=!B;y`$eYdEffrx%6D3TH)mJTv>A|Q50 zl^Uj5cMsr#8siIewfZlEv^q5eNK`T&C|d<5Ivjo<79Wjja7hVN$SVzgi|t=r z%BVsiPwP+{NUt-dZ1G9Wts)u*T+o!^Wq;6^7?V2A8eO-FR}sl63itv4&@aoU z_?zm}?uXpuIF)H@I9#yhpHAH&Co^vQi@^4Rz4t-M4Uh3yqiLOMEKkkoJd?!hk^Xt| zj{alYEzO3Q!STNC+g)sGl|Jd2T)*0iY&RJ(f%?Kv000I_L_t&o0I3U!w>1#g QEdT%j07*qoM6N<$f|~wF)Bpeg literal 2032 zcmVkG>4rp-AhfTk{1C2*=zR{~Lq$dy2@2J$o_Dmg-$ zS0vPm^RW##p@cQtYE=xvdHI%aY0@$7VvQF?QAgM*n}Tp zEUEpG|L{G3@B7~Se(%2D?|aY3w*-c>OAuET~qM zw&=tZN)Tjxoh@^?=?!yJE(AwOh?%(GYq@{Rxe6&!ZPTe%O&)ss9qeLf!(FVu(4$z| z)0h*DpegInz9Ko=c^&`(H~>%}R-OL+&GR=td&8i~Vr^3&8GH;*kV4sV3du>~5j)#6 zaOeHDd6txPm?|2{;HcrYw&x+Yx0|=djF$(S?U#&xyrXE$2sa}}VEXQSXk28UqB>FG zu3h{OIAA=75=1LS{7XaEyi!eq_YK~!n4(59BTfkAUpAcuM-0bV2mE3kZPDdLo-=iE zt;*GH^Urf4IoiYRn`6eyyUK1EL0L!>k3X<1%yWgrUV8ceaR~Vv5ji5jF$+{p15uq`Zq(#rkMEj! ze$@VN9~Q{eGGmuiPHcqPm_p(g@2q|LWsZ6H3>~#8X1w}_S=d==R%geLD7406{)LWi z6lX|O6&6*rIihVEHULP21gZTx1x2>&u&`r8BdgmRJPdQuwO6 zzF5jFjW~nRA42Tp!W77_RmM9Tq1q-9+vm8{@ZIOmyx z++9usw!7u-2ou_7!vL*6|CifzJIVddFzeW3mfFTMzTZJ+(r4;%^aOELi8J%s19 zulH!9#SXi&B?yHwO=+EiZ_jR3d9_ZWStBALkmyTCnthJdf?o~)lmkK(xvk`~>b}m& zu{aVc;}l|0N6q!y{aj5UiatO{DVINK;tZ-0`?CM&-ZnG20Zv+$wecHOs;jTS#+@qaNWo zZGKV{6N-|n*GsN2{xO@^Ixwwcz>VuC$%qChrLs2yID|4~4zO_?KG1P+q+XL5v@25HbyJtFxS@;$-$$dncC;gTv#1`Fnk;v?A}>oz1i2 z{+A1ijV8qvZArBEG4TVqvZu(FWaZ}IMArh!IN&&grK^YNZu6`hzJ441Xv~u5XX}~ z6PV!~lYo!stY>L_$U6oKdK3^KK{X{9G*9;3FyK8F}9DyvFbs=(Yv zlQPrd9vry)VNY0070@*m7Hu&Z%X`(4_1N6cn}cFSVZG_iR@F}b+B;5brPAi9w=bZU z;mRwCi35jy_UVu8u}evjq4!K3U$lY@x>Mecr~BI+4-u-@mC@{j9TXp#X2tuu`~XuiF@N* zeupaix!t=*?DN)Dk;OhI12c%J4NNS}YF7HNN{76Oi218GtQ z!Ni|gkS1lwn41k1h%!Y4JaHl&+kg1{7XSeN|8ivr-~a#s21!IgR09Csm`1t|e*T>R O0000ygLwE(a%rJ=jK?pg{PkX%xA>cB_^m;uo z2?m2f&$4v=0%PoS`4Y!1F8YAW%rG}Mw?NY`z>9NDa}+?+Uf?o&P}DpaMFFA+;4*uR z`rQruvyQ8PS;tkttm7(R)^Qau>$nP-b)KXExES4g6K5{Z20dM=pM5ITF6`k&@5}V= zYgjortX$y7*GVm>_mZ%XIh4&maOrOI79u-)VeP}uCmMdhY~x&MNY`e6Rq$yp{55&< z95Cp$O8JV8A)jy08ScV#v}G#7j+Cbwyj$=1xTZJllx zCd`u+fU%*eit3D?rYuSF+U`a?5mFCprmdB;hhRz>Gh2}x`o@pRaL_APx?lJ8RJ$-? zCX@%*YUPt6B*lPNmTdlN(zYl*l8i@q#shk~T0cE5%A~2$Vkj106*$H-H|R7<`FvTm zuB>5%R3sAeBikunD9OK@p%MFXE%qwNF$i}^ky5dy4U150IJOoMSRb%j)r#@Bmz=iQ zv4PL)fnaDeYBWGl3_#`Mel@r?bU|etUn+$Tw;JZ4UN7X!9X6VHEi6%3Z&( z^N+C^d3^}<%|0GIJs>WDM)6~|p!CNILBxfY%*sI~E8$>jZ+AV=ExpgYD{5#tw#xe+ za_73j+UIHqaRNh)E_jzhEYPazB)gxWX&Tu)+}YU~ost97G#~DMFu}C|#(f*0`Ef-- zL_u4VDzat)?UxT~8CoXB-Q3UrMcB5TW|vBh@D|HZP#KN&e&hHcH;l@%W>b4>BIj-1 z3=_Bz6xm++;IKT*&uR^gj5DW*9t<;fJ(vBZNrqTWJ~wyv65o;lTHwWaJc!If+nJY$ z1O4;L$IGfI-?(FX?X;?rLQu;S(!;?=^Xj|lvcCS0*6~dOR$H){#DNV}}0As7U zNejTCUax~;-;@8JKYt#bexo74gn)1!k%?eDo|EQatXbf@Kzbby?QM`4^av)V0E*>lU`WPz;I`D_|9+BKUWh~@@%5Fckk4e# zm(tsRV~l3KDM`A4ghYb5E>8^qR`%W3|9@O)-ZUPzJ396aJ7Vl!``-I6*8(=SdmX*| z=aYR}+)A(A3a#l;gNkmVnPZ)Z1@!i^t_V<-BbxFFNIA_ zE@x%wG`h7LS@ts^#NcNBFgxr;#0&5yZa@!1GCaw2u0XG!^OF3rhi`Hf+|v!r0!vdy zK?5#u+R4kGqhDF|J*uG$7 zb(sb?;c$Ss#75dD)jM;1bS;3DkLq}Z_@Y{>i|J(A{!~#d#DwE9u2+1wU+Fd^J(^6W z3?%7uoDdNh2)^SG8w2+raOW15TGc=*DgskFnH~W=T>*2RKzuXc9QBQJwVuzEZ!g{O zMdc{(TTdi+MW+;5DdkE^*Y4z{R5HH(CJv0oX_-uo{_7iTrBboQ*!t#tPj6L^-j{B_ z1hkdnK^|@<*SA-}Fe2o#!!X{JvL8TvEt1$=o$s~JN)j6jg69BhrM#55+nwKGk@Vjd zLbg<&A_0IGKZIAJuOh(Z89?0M_coa7yZ!PLUp7zbo1)j$>ax2t^gKZCBFhS~Akqqr z?o_>Ob`|g}P<(td&0|%{<>l!TfUAJ#!D?oI`VW{&Tm{TJt^#Hq=LN=KFaR#I$Ee>O z1sKM6*rRZndMwM?19hT6TUCDrzq-F1ogJ=!ISNJ!AX`a_(grRw$!`Dv0RR6_PDEq? g000I_L_t&o02R~Wy{z9#HUIzs07*qoM6N<$f~Z-2`2YX_ literal 1664 zcmV-`27md9P)y-YPGGL?a53&z9D9_dA|GIefD8NE8=5@S&Wb*LI?yrV9*l7EG$Gpz=H=xA|wcy z1yCpy0s*r?us_WVfmJg@VAaeJST!>QR?Q57RWrlgt%3{5ou?9YadqA|wbr}0)#jNu zx=B9DZ9jqaz5V(b{_;MF<=l=8%lUoPxx=lS!+DRC%{yZ}9C&IQ*wYG8@_6H58 zlkoMKZdIN4yVX+N#1KWIOk7-h%Eb;|7Mnecy`Ev1$Z{W)$T8!v{V)Cu_ehYpA|PLA zIv>XRU?ogv6~?xqYx;0Tc2q@CSGU)tOkCe@I-XH0?1Kl&MA(|zHrIca6CA15dmoze zP$k^QUghcaw;C@CF;Z1LcAT$Vf)!;+WT`Odn|kZ`u%h~7f)?UwDaA8XICO5ctEEy+ zcgLYnd{z|Wi^v-`FIUx%k`tmIt)?Gy427`eH>p;d#;6HFC(^4TPe*~RjIa0dAO+hf8KXjfhr%GzL} z5kyRU$*J$<3kv44JKJlqUiD@EMa4kN=@c9Nl$^^BoBuQ{#PAgH{sy@er-9MX@8%P@ zuL=<3fd|kW{6HiDJwvIhh6{{0uk;#p9gKU$KYvHq^M>Q2RNIM7nj)a~e)SC6hkM1* z&Y>C}v9l^LWanz)!Ff)g`?bCO+Gw+Hwhe#g4x5-1O^$m%9-pCc2zU& zFM2}jxI?EXPcPoxse7^t!a3wGt;wA4=(UEup8ffklx6wVmf9Lua3m`}7M7_?tJ zkclq*#RF3_F1B*)ocdCDDhwyAiqKSKG4}K~Y2qbTG>qIR!gklZNS3&FqW1>e&0)?( zRpus6V?|KlO&<2HEs0m9qmOm>K!u4*KczE>R$#o|#< zuNf}5GxuW^L9-EHEB55(;_8*Z{!nO^7e!H8TS@YzeBpE{xAi?`cUm1qF>Sz ze?&f4a}CVD56hh^mDsaP9373=#IxS5&tFu49`^c{+57J$UPRc;t==MM65p$qnSR34 zq#g0sRJS^fQ}<#Oq7#o9V3vkE>Q#S`APMXkYOSCu$H~oYae0vfaSC@z`-RbPBbJ9( zDHDb%zg$q9;T=dWGNfOO^zqeZiuf{#`xFBxr zq=9;Lc-+O5upEWB)$jLRzuZU&tljpaoS0gUfUA^!j+o4PE~>Pw5Sv_$VePd(*&#k_ zR9iw$&UtU^x{IiUlxF&s7rXUdTQQTeoVAf+h8SMtDF~*Sw08#&J|X8CuHG;}HYor{ zIhxL?DXj{HW70-!_-SCD>a9|~cD=I3XZ3?pbS)!q3&U1^AzQ3!J9J$nWMz5$5&VP~Ccyx6Txd0rJ9 z*M0*axj@r=nnOmp-J80Y39S115UjM3W3jFjOX~Da1qpC=2v*h15Lh)c!1MES5HJfs z+rIn3VZi@EhzN&a$p0Gx0v<5`0ssL2|0n^TLI3~&21!IgR09C$FN6**?{h2w0000< KMNUMnLSTYrd?kwj diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-disabled-light-chromium-linux.png index 277859c20fb020d7679e16fef88a6de221800170..ccbb4fa1e2e6d854005638622411489409c65535 100644 GIT binary patch literal 1774 zcmV`JagAlX)U&cIq*0nN)=GV~e}3AVNzG_Pvyg(ZLS`)2HLh`tF^;pd z6CkCOrZh#_;*SK1f1U5S``+_BcbA~SU;r}a7=-`&{l0D6XJ=<|9D|G*=G61RG(ZT^ zG`%5;_yfepxchs(Ue^8dLli}h&?cQOUcJDCFJolF7q&b<^6d!72r!`|p9x46Ozc|{f(BE9Gv&4w1`tF=50CoeO! zn)P<1Y}Z8c3ohMWJ-@qC*O}V0A_MQJ_R=cHOR^#|=;H$JWx{`xd;5Ug;+j&-(VyXI+xlE6|>MEYj^ zLRZ%`-Ew*nT*f6T$|&~W^Qzjl+%rIYCrH#}TO5ca5%7aB25Fr`o(GokKIWd(L~A!S zf%6hu@&(%I=uS)vg_2CV9aS^mhj4{g%4La;Z#5^4T$cr|DeLD)@94^QnHvR4y|JUg z!o+cHGW=e`x*%MgF-;Ti08tcm$5T`DbBMxS5qjZR+lP+U?s`Zl|MGmRz(hv7ZTN9$ z?eDfNz!$fk|N2xRJ*}nM(eVEG;{87zj}(iW*iVPXUZZUWAHF0s_nWE>7`e1r5UJ4I z+f8r5fxp>!V*^&f=XvO8$G!d}8i;}*!ZJv=$C9@j4&(|?Dg}-hyD5%b(;@TKt%?M# zR(+>!Q*v$lXKawAb!_iWb4CUJxUnHnkz=~y@Iv629$-Xvn%$3~R#wpBqIz&JJUlo! zAQl(z?tU=Exd4O+2iGVXYxy_~W5h^#fgu4?s)vBE4XQII3ab`FHPg{nE*2|R=pL895-A?@= z{7ii#-!@eBT|_=+@cVGB;lgUZGAcUs#|@(eS!8jXkYrwOxST9;_<&R-vtc+<>67M+ z7Z~#b-RWWp@H`O*w&@|ZJZ%9atgWr#|3eXQINGI$cQZ8w#JKz6<#-xGa(O{-w(5U& zD2ictK@vtbhjv#rEH4Pd;QV5+G8!|u$!MM#WnVa4({G545V+p?>B-CA569lS z?1v%pB1p2A5d%^zOD$NpSF?Y9{OXV6(ZRyfc!7}Qumn1Z1h~kyd>l0y0(=v&2y(d`-tL>E`@s|y5W02%NQoRTkl>2jFY>Of zce}>X-mz}}v|VBBW<&KzoQ6pfO@yYZPW+{ZWG`!BWuvI@*GW1=6b-#}3{Mo%F6RPR ztQ7tA$^PI>Z#1n16cM8(%2~}AaeDt1L#s>*VP!nVITPNmgWlYM4eC5L|(onWeaU zS0u&_ZQC(Q@+sTY4LjmX6=8g09edqIUBgLIQDLELSbmInatZfX=;($;@`P`7JJ$KN zmj}7X+23utlEB1vM?Hb;6K=df9FTFKZMIvgBC$m5>8j=s%GQ=l@gm(hz~>{Jnmb0< z^kVQ0huAf_+~OVP+#r=et7BkKS)^xYE%x3u8C;wk{(X{sT3A|T`Qr9RQ#VLU<&xjp zfAi{Xau=Q{l?xn&sFK)hAHIHh2$mi_&I>D=d-VX~q&zaUz1K$z%WJ}BtsvZJP8?P$ zrTu0b-;or#vQes}t9BGlxqzza`>&7si{E`Oi>_vahhSm#hmzR7-JFjg7`*=Y)J*nQc0XG0b~kz7zn=d;x{mpWD1yfG6l>#NlZ!>5i{nGbX_}Dz-PCQGX9sW zuC9V%6u_HE_<#1x(fQ%(m!n{~A_Ow#n12BP0RR8-t7K0A000I_L_t&o0Lp?>IP|w1 Q>i_@%07*qoM6N<$f`7tYYybcN literal 1608 zcmV-O2DkZ%P)n02$>lt+o$3F7bHCh7b2ejhF|~xj95R$5rHF{QxdoG& zTI*?QJ7$LOmn5*feeZp{-+S3iP@1Nm=N%s(V~jz8dkjQ)IyyQ61@1ji6h)xGJOGVG zBT!%-fIxvcK|$5rprC4QP*62DD5#nn6jaR(Zch~s&Gw7I-s>vMs+`vpBe0$8c zt4fP&TD8m~oW_yo40r!_y^U5~W+0?!j%5>ux>rF?aN%|oxQ^Z5iNRJwra$%d-i9z6 zRS?pgAn^IalA_4^_Kv>i@J*RUyxQc!J;jCFf+&gXPP=cpu~cS0CFQ<`a2K@-@nubL z`nDHK3i2j;Ma7=c*KPmk6l5Z)RyB!1APsFpHy!`@bW~b?sMTsJPmRss(CM{@&W99b znp)9h_Of$HU>Szx`bQ~TCKfeqEW6~ot`FVd7*G!+g}K?WGoon(qBy}I_c;+o;M(u8 z@T4WXJ9!8~n8i}Au)b;en3XCul@3hZaNZ|yMbzqbg~eBflZ*Dm;F|X6Wd9x8*s2TT z8ew&|4OqFcq)%`+yBskjXGxe$B`NWZ{xC#R{kLbE6)v^=eLKR5ySLMKfmq#q_WLgy z9U48|OV7vS)A#?HAuU%oh(sm!Zl~|WpH7lEdtKcFoLbwc$V}qw?&L#Aaq4zndw|!- zbrJf;!O_`G$V%flC43<`p56ALP;0>^mXgWd3$MfxGGeAw;AAr0GTl|$lD($>i?6_t+x;mEZEN^LgPyx7YUPgbt& z$0F<6A$nAA)Wj^uWV-G4o8*7|O(W0N^>-=#m?QHMui?UKxiL1KMALz>k}C5=A{AA% zI)R`n0{K8|iqo`t6yzBdRdr2~Jk%IcT9QS>0ay zFOy+7PLvdB>|Ejvb=wW&B#BQ>M=Rr1NMd6}Zd}SqNnvT=Mr4;>P!$K^$%n%ie+;JP zU5=6jg(;-@iC990=a~ifYB$eL4qpCwF#fQx{HR)2vkovL79t8=r7&a>LU{fr!(

j+Vn8eOv^7eoZapsto;4iW`@090^Yd1N z^ST{9q)AOz6qZUHT@Ps!3hvDN7s zHwcGtC9{U%1Th_Fd+MS--v)OoGbzdiTX}E=^4HG6!_qv6Gk*D%?yS%;q*G8Sy-fvf}JHmhGittszZ+ zLBZj$(>6%Ot!g|BY&XJ4q?br)6W_93TBIU(Xu2mC0tZT|zqiv36p6#0sUJfAi7;)D z6b(`gy8WK6DLjQkOE-K<+uT$cQD)6IW?+Ke|0#Yf#S%?$Xgc);*3mz(qJ$E1-=7Puh;HIGSPt<&#Q{# z+V22TF8shXy_C~LX69z5pz7Nr@$_!jgS=9!$+I(62;lsn*j00bf~vUzER{;2z&rpl z3k9wFf2Sv9MJ z$kJyxou3rncIW-5h!|c`n-@AEbJITKQ`i%^5fJQX1PPRBoAZq@%z6fF4s*@TlN300 zSTWCu5E7Q8hTXXEF>A>FrS-@qT9qENKMQiTP_<{Tb=bGP_o@t8!O632X2)wwuGPkE z{p1&mY#+=x0eA+ij@m2M6V%pIZ^+TbOfNLJ>?PI-!3Q-6gEcAsj!At=i-SXFsa7g# z7cQ7n36W+WmV(C&O`B^*u-t9Oa}i(Pq$~8gZ_4WL_0lq8B|4gEGdsR)-B~B3$TjHw zBNYxiEk{>!l^+(N$&FxCf`UPc_5$Y+7aACy0yOrux>3`+Skv!(k-|jMzK~&zSGC`* zYWJviZpk-_Z54MaEknH!qTicXm?>fHgOz`|+t7G#z`Y^f5MNjjOUS2U&9p(;E6;iU z_TO;RnFP|`Rct?X`mG-50BK4W&ux*Hb+QcC&A#^nOs77s^B4Q9+1$Hh(U!aBHWpT+ zdgJDtbjh54pNwufDzvhzx)*?!He*fX!86;k)q>^R;AMf=&CbS0Q@a29{nYWd?D#L^ z!Dlz-7{o@(e$^4+67;C0qNm#8ve7~n8MP~KbB0=kaYD_$JGzPMKeWcjdipQBgCG!bS^JRO7&H4HJx0>0g{4=Q+KUCx0J*5>x^wfzn z2Dcb86gV^7(B<)e;B~b-tRO;9&eaft7_wxps?NgVZgbZ-J+H0qv4)C4u#-6VM>3yu zn?Jf<*2o69C9yRB52>$h7sY3%T=|k*RzqyRv+~LalA=(_7pV~*Io}{63v>y#_0o+C zmixrZ38pu24RDo}+_Ln0XMEUEKdRYFmj8L%9-R5&Y)?B4LQ4`Mjfx6;=V<%n;W1OY zLK(KShCnDrBM;R!`1zj(89biA1c19Mkw{}Cij4mJ)cH_c5D8T~WAw>fxi}|{I$=e# zGi5jgu)LUtV}tDzvcfYvXdv{*A?#BW4~7ZuVG53z`&!! zdV8xna;v8AkJw~-S%!jD!S)Z=wgCO>iTSC%+fCaJgW?n8u+&g5km&Jg{~=;REo|r-WhP|=geVG4`OxP#&j6Q5fDp?F_?09SZQx|| z%uiS3nN`o!AR&fJuvLE{?hg!{{P>OykJ9U6cBw=z%boJ>z%?;aL0s;!bdM`3hYdz^ zmP`(yXsIDrnnsF`lu*rf3}59~vC#fZiVfu2WZ^)u-Q0zf>N#~-@F)bX{Qx|6o_Y2W zzFNU||D*@WWCRPvpgQrb(%p092#xG&}Z!A>7^GTiznj zzKsUH6vPEn0YiReh6vJTaTETY z58v@933G9h0&As4z$~T+cbTMMIAhvV2Bp@PCSsf zhqYCG&^ZLd&*#Q!T!V`kTv#F`^N2#$TKYjJw_pLQqF;Mkt(Ai{&W6}H{GaA$!TN$8 zDl4|yGRgOhkGRJ&Z$;;cBqG!c=DHpKUUyrwURU>swdK1eM!GLe%sCc*&!EP$3izPLvqs@%#1jI1=><)@0S`}5+`H!!k55J|SBC%( zPf#>BI=NThGyI*MBat!@x97({#{VP`s%Q8ejtNWs;JLH6$Hwk&;D4BgXZ3s!00960 luw^>a00006NklSPlP)eD zj-m<>A#9L?2;oFT@9-j`cX$!eJG_YK9bQEA4lh=(w>Vy3@&6B8Urm2Ql41Dx$dP##VWqPr}WvBQCSYtegIHJ#(@?h3e1_B&9%XYA_1%zx~Cp5a~a5Q+t@Vvco z3@=VUUW^8vn4>irKd-+0rH5BjD-nEd&EmweeeXLVL!-y;9jP65^BQa=vwVAOK>kKB z6$XY_J^;KUQdAU-TF~0x;lpgN;m$t>gQSh-gVEBGtn0c{-{sfkZ7;Pbnc7=*ju8(; zO?y(x^HrjIsO}$kT3Wvx^leHuCzqEcQkt1CJ8Mw=+zZ83ie7uq1ixUdzPl~8 zLm-d(^Iz#w+Gl_JYIUm^VoS>C(!XTAkf}&6%DD6~y{y>cfVb|_7@DEgX_n{_6|>MF zstz@U*m2?d`;L3mvpZ}r5qiK?SKf3C1m=9$eR*8Jhpzd1`fft_=xkpX4_3=MpKm|g zIrQP*h6Ey+!ev03UZK!isDqZNV#oVHNL0vmc?qUesa2`VqI@+00bY{Oa%`w; zQeA%L8D6@~4-UhBYV1Gh5;$=xR6b}>1SYbt!8yifX;4w@c8sBP3boM1GTpAUb0k|= z>pu6}FRGBJALJzN-jgufZBvr@>0jmq%Qw6vMQ~rK`Ohe8)Z$?EhyhQ1cX9pf{-~|C zXVn;37vjKZQ#&xdm{OV*+-`Oz0xGWm+c}Xvy?upDm!FuMC4E-q7UM0)h8Z?MqpN#j z*QEFSt*WWG(lT5(Q*y{KEM$QuL*Yz2gg^mhGjC}Waz!u<27shr^XK+ff#XGnnFLh8 z2NoHGDuX$?u6Fo_SECm=hg+^MiVo>wEEO+(4c|L3=5(<3#@=8#`TGPSI2}wPl`{bx zLS2RmT;>IFO|OIR*J}ZR6`YOks!D+TiKM~W5!n$BP??BX|Dj5Xl(+PZ3)6Z7IflU* z9|ryAACz(^cm#USZ57IKLWQI2O$zr02T#6piy>l7#)JZ$f^*!e=?&czr?u3@K1c6F z96QV)nDwCv48}*Bi=(q?<&jFZ&5aZ5eEJsKpR3n^#*iu>tZ>_V2%4PNM+B=Obnmag z#<51JrngF`qU#r1V)C|^QE1Cw-nq|$8#1Ef6mt*vBI09A6u8kmYnC9Dd5PK*O-N4iNW1+WFmsDPO>)iQkW#^@OYMa%( zg=LoPEahfBGH6E=4I#^Bs493l9oBl98gHJs5Qx*M^_k>xi*_a_DxjfII*;|e^*etY zrO7>^bD;@6r1fCk`<%*v0(8Ir|llJ#ch~IbIeVxIbmL$ke}i zZ3IDnT%4%qhL$k6xJ6EvQ01bl>dkA?c@ojZzwjz)(0~nO(^c0mz>@_(QeEL<^6A$t ztGuRNa54@{o~-vJ0j_t<)&7N3h~As6jQl(88hE1g_KwuNalH-3T3;ly<2RsA3`3s4 zcphOLMBaag7ZJU~3mMP*K!mVC*8a%|h!8exzU>AvYK3$W9~HG3MEI`rH2?qr|NnNU j$PfSk00v1!K~w_(wEaKbInvg300000NkvXXu0mjfyNUC% diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-primary-focus-light-chromium-linux.png index f9090751336b190c56c36b7b71143135891407ab..1bbe7c4345ef2fb5489d9f53154b21ce435f994f 100644 GIT binary patch literal 2109 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 LNkvXXu0mjfW8OD) literal 2023 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 SZ`iW{0000XS0E-joEF3lE5Z4B)f!* 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 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-dark-chromium-linux.png index 0a276663bd8f6bd63c94af6af5ab0588293f7f2c..66331fde7149e9907ab674ee8efbd1ee66dfd0db 100644 GIT binary patch literal 2297 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 M07*qoM6N<$f|_>aL;wH) diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-disabled-dark-chromium-linux.png index e2824aaa6dae3eaf64911c2a0d5ab2efa0b604f2..7ce0a571b2097800b5211daafc940a3d8026fef7 100644 GIT binary patch literal 2105 zcmV-92*&q`P)NklH`0Q^uyE5mwuiGOYAlO21G>sIxzSbi^Ujbb2XL1FbqWe(QzCH zECbK;oWZ~_&VAnxb+g4VB)JA6BEAJU=@1x(0OU;9Lm92Era(l*lfdyLxJqguBH~F* z#1j=m5lbMFQN$96WE8OkA{j+2fk;LXOCXX_#1eRtjF8ngyL$q0`N?-JU2V#8yFVIl zOm6R#vS_nhKIsRK_Zi>(VOK<@gO8oTH*C5;yp`9b-L!f1;Y%;LyKR%tX3{i~@NGkD z%2K;G0>1}~f_!;Ac{cK0U9L4PAI0z##q#+*hOQn}+ZRFL*`{e>w)^}>2U&exED0%F zYe|ZO(;SyCQAGLROZWFt(jSPY%gA?3qkA5nfV0l2qP{H^gdA&>+k;W>_|r%542h9k znsAy&hhN7NK)a=AIgzD^*rXc~PiINB(dfJ>>#WGpxO(c*(;Vc+H+WItVFm%NWvGq1 z)VT;iY;`LuWZ>ybpuVliwc7Fda2gH4e$VqPiFx7flHBRvKEJWGZ6V7u6oJ8{q&BXS zQhe=IR)8&2z|~t#2b~)!I)45r#{&=grd z?Tx*TQ!u8sd>W=s%(pbTUOSoeaDI^YkIBT9rU8bdQT>aG|B10G2S0bm&XAQ?g;Ews z2S2qRm+Kz~Ns{a9>&M5(SC&jB)9rS9z21UWC|DA3j9rj`!*FeiQ-YW!y;k*L|4=e9 zP87KnB)*X=`g3TB5;Vy7Q;m!;&Mw33HI<%hCLLs>#>DFE*uk@qktw=DpIS}vN4J! z;^PenPO&5~TgEaq1Tjt1b=~*x-%mc4N+ri}7HbGBaitdco(CWL&dL(S5~yb?%?`Xw zd!LVt2I>xi;Ns^G|B3mdQJ7a0SxXm5B7t--#w|RpUaqzWaFc3!iCuxClG^pPhO96g z={Cyc<8kfY)=YS@hPzlyn()+W=Y@ zJ9kWc&umsM!$Ne`g7Y64@16}q6%n3MUABrs+U+*{50!)fR&d6SU9^~%Lv6u z0w?Lce+e@Ou~Uhdo5FlYx4elZunoiZnES&FhQ0RZ|F`SObvDhVIiY}q!=n>tu4gI* z9C_*)jQVHoK75UB+_Ky7=nR>{KtGg~@4K!SOgrVnz%dj>7Y8|KOyE++nYs!bT{SZq zsG~C-quG>aG|VCRO@K=BeLn~S4W`sburwJZNE!!@;>;E^!}G5{{#RL}S)S*Gd^*F{ z4nCUHyJC)TG*wd+%fZ-Oj=0+2_ksVwVLVHzOPYJ##Ivm+g^maPdTHoA;02aN=k2fO zn&#~mIhIfwb3I?~KF`g~k0?6RlRL}}5?Os!m^&sn4(EjPQI;i>4i4ucUH+|96w>K* z9>4RFYNOa%nx}xJ8t$wWi6@g_(CZw3`f>k*WCDU&Un5z<*J|ZYUye`Dy0DzO9(q^@ z5Y)6@KyZ@6VPWphoDX<|%JEU)n%xP817+vB0kpd)PG1%cVN)8v=kh?--u~sE|9CfB zZ(-rlJ%7Gu$8x~6XAoQ2+}>J?BNIDyZBN0#UE6lST;>M}-_9SCn*;;BWdf38ITm-J zq@K+J^U1Rj3R4WVfx@$l!8Dyt)0kE*tAm;A6ItbpyIG*t>kZu}I3|Vq>R{l)LYzu- z8;<6s7(TXo^EgF+s3=OEGe1?M)fBpHW=vT-nK??;sd8~C2yY@h-88A*m)rt~UpBJZ!>kMw&eOs-SYiElyOfWadp)SoGlRFII;>=@N?>Wsy zaLRbizY)L7frytvZ2i040?|4=JpPtvO*1U(EB#kAj+@b=*%t(oTqQ|1%V1`hiNP}> zlF`c{4$Fug+BcMHO}%(tPb?!Dy&Q&TpZ@o6@GOaB6tM&%8AU9C@J82Y6n#%3;)zVe z6UwOHw?Rb2lW?5y-d>p0I+_-MAo?kYh;QQRry#&YMsQwgw;%p8Kt#kmegOag|No*p jT literal 1937 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 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-light-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-light-chromium-linux.png index 7eef09d7c3ce3466bfe150edaace94cebaa516e8..de1796e8ef8682162336f8c8e629f45d481fbec2 100644 GIT binary patch literal 2272 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 Date: Tue, 14 Apr 2026 16:59:26 +0100 Subject: [PATCH 05/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20add?= =?UTF-8?q?=20aria-disabled=20assertions=20to=20all=20disabled=20tests=20p?= =?UTF-8?q?er=20CONVENTIONS.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/buttons/splitbutton.spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts index ad1294d1e..d20f67d9c 100644 --- a/tests/buttons/splitbutton.spec.ts +++ b/tests/buttons/splitbutton.spec.ts @@ -35,7 +35,9 @@ describe('SplitButton Visual Regression', () => { waitUntil: 'networkidle', }); const splitButton = page.locator('[data-testid="split-button"]'); + const primaryButton = page.getByRole('button').first(); await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-primary-disabled-light.png', { @@ -49,7 +51,9 @@ describe('SplitButton Visual Regression', () => { waitUntil: 'networkidle', }); const splitButton = page.locator('[data-testid="split-button"]'); + const primaryButton = page.getByRole('button').first(); await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-secondary-disabled-light.png', { @@ -129,7 +133,9 @@ describe('SplitButton Visual Regression', () => { waitUntil: 'networkidle', }); const splitButton = page.locator('[data-testid="split-button"]'); + const primaryButton = page.getByRole('button').first(); await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-primary-disabled-dark.png', { @@ -143,7 +149,9 @@ describe('SplitButton Visual Regression', () => { waitUntil: 'networkidle', }); const splitButton = page.locator('[data-testid="split-button"]'); + const primaryButton = page.getByRole('button').first(); await expect(splitButton).toBeVisible({ timeout: 10000 }); + await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-secondary-disabled-dark.png', { From c39c77db3a6d3a1bf88a475272851b190243ae01 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:02:30 +0100 Subject: [PATCH 06/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20add?= =?UTF-8?q?=20aria-disabled=20to=20PrimaryButton=20and=20accessibility=20t?= =?UTF-8?q?est=20per=20CONVENTIONS.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 1 + tests/buttons/splitbutton.spec.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 9f0b23322..0352c0fa3 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -61,6 +61,7 @@ export const SplitButton = ({ > { }); const primaryButton = page.getByRole('button').first(); await expect(primaryButton).toBeDisabled(); + await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); }); it('keyboard navigation works', async ({ page }) => { From 2267a0a613342a5dc8285d51da495f6a2c6a088f Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:10:24 +0100 Subject: [PATCH 07/43] =?UTF-8?q?fix(SplitButton):=20=E2=99=BF=20add=20ari?= =?UTF-8?q?a-disabled=20to=20SecondaryButton=20per=20CONVENTIONS.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 0352c0fa3..7d12542b5 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -77,6 +77,7 @@ export const SplitButton = ({ Date: Tue, 14 Apr 2026 17:10:34 +0100 Subject: [PATCH 08/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20asser?= =?UTF-8?q?t=20aria-disabled=20on=20dropdown=20trigger=20in=20disabled=20t?= =?UTF-8?q?est?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/buttons/splitbutton.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts index eca400646..2c0af82b1 100644 --- a/tests/buttons/splitbutton.spec.ts +++ b/tests/buttons/splitbutton.spec.ts @@ -215,8 +215,10 @@ describe('SplitButton Visual Regression', () => { waitUntil: 'networkidle', }); const primaryButton = page.getByRole('button').first(); + const dropdownTrigger = page.locator('[data-testid="split-button-dropdown"]'); await expect(primaryButton).toBeDisabled(); await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); + await expect(dropdownTrigger).toHaveAttribute('aria-disabled', 'true'); }); it('keyboard navigation works', async ({ page }) => { From 1bb14c2785098a02a2c792deac8472d1999c6114 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:11:01 +0100 Subject: [PATCH 09/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20add?= =?UTF-8?q?=20hover=20and=20focus=20tests=20for=20secondary=20variant=20(l?= =?UTF-8?q?ight=20and=20dark)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/buttons/splitbutton.spec.ts | 68 +++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts index 2c0af82b1..a8509e231 100644 --- a/tests/buttons/splitbutton.spec.ts +++ b/tests/buttons/splitbutton.spec.ts @@ -97,6 +97,40 @@ describe('SplitButton Visual Regression', () => { } ); }); + + it('hover state - secondary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary', 'light'), { + waitUntil: 'networkidle', + }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await splitButton.hover(); + await page.waitForTimeout(100); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-secondary-hover-light.png', + { + maxDiffPixels: 100, + } + ); + }); + + it('focus state - secondary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary', 'light'), { + waitUntil: 'networkidle', + }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + // Focus the primary button inside the split button + const primaryButton = page.getByRole('button').first(); + await primaryButton.focus(); + await page.waitForTimeout(100); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-secondary-focus-light.png', + { + maxDiffPixels: 100, + } + ); + }); }); }); @@ -189,6 +223,40 @@ describe('SplitButton Visual Regression', () => { maxDiffPixels: 100, }); }); + + it('hover state - secondary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary'), { + waitUntil: 'networkidle', + }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + await splitButton.hover(); + await page.waitForTimeout(100); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-secondary-hover-dark.png', + { + maxDiffPixels: 100, + } + ); + }); + + it('focus state - secondary', async ({ page }) => { + await page.goto(getStoryUrl('buttons-splitbutton--secondary'), { + waitUntil: 'networkidle', + }); + const splitButton = page.locator('[data-testid="split-button"]'); + await expect(splitButton).toBeVisible({ timeout: 10000 }); + // Focus the primary button inside the split button + const primaryButton = page.getByRole('button').first(); + await primaryButton.focus(); + await page.waitForTimeout(100); + await expect(splitButton).toHaveScreenshot( + 'splitbutton-secondary-focus-dark.png', + { + maxDiffPixels: 100, + } + ); + }); }); }); From 91a68987e4db4bf5289ecddd26845c3bcf460e26 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:11:49 +0100 Subject: [PATCH 10/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20add=20?= =?UTF-8?q?aria-disabled=20to=20SecondaryButton=20per=20CONVENTIONS.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...utton-secondary-focus-dark-chromium-linux.png | Bin 0 -> 2287 bytes ...tton-secondary-focus-light-chromium-linux.png | Bin 0 -> 2317 bytes ...utton-secondary-hover-dark-chromium-linux.png | Bin 0 -> 2255 bytes ...tton-secondary-hover-light-chromium-linux.png | Bin 0 -> 2296 bytes 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-focus-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-focus-light-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-hover-dark-chromium-linux.png create mode 100644 tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-hover-light-chromium-linux.png diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-focus-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-focus-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a67759fac7f62201a3fabd65ccdc24e12b18c086 GIT binary patch literal 2287 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 literal 0 HcmV?d00001 diff --git a/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-hover-dark-chromium-linux.png b/tests/buttons/splitbutton.spec.ts-snapshots/splitbutton-secondary-hover-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..90f9e502451a4a415c1f255e6d34a5917e1e6c05 GIT binary patch literal 2255 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 Date: Tue, 14 Apr 2026 17:24:50 +0100 Subject: [PATCH 11/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20fix?= =?UTF-8?q?=20fragile=20keyboard=20navigation=20test=20to=20use=20direct?= =?UTF-8?q?=20focus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/buttons/splitbutton.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts index a8509e231..1ac3e62d7 100644 --- a/tests/buttons/splitbutton.spec.ts +++ b/tests/buttons/splitbutton.spec.ts @@ -299,9 +299,9 @@ describe('SplitButton Visual Regression', () => { const primaryButton = page.getByRole('button').first(); await expect(primaryButton).toBeVisible({ timeout: 10000 }); - await page.keyboard.press('Tab'); + await primaryButton.focus(); await expect(primaryButton).toBeFocused(); - await page.keyboard.press('Enter'); + await primaryButton.press('Enter'); // Verify console log was triggered expect(consoleMessages.some(msg => msg.includes('clicked'))).toBe(true); From a734c23422df1ca8b435bd6eb54c3d7a00db5274 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:25:21 +0100 Subject: [PATCH 12/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20add?= =?UTF-8?q?=20aria-disabled=20assertions=20on=20dropdown=20trigger=20in=20?= =?UTF-8?q?disabled=20visual=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/buttons/splitbutton.spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tests/buttons/splitbutton.spec.ts b/tests/buttons/splitbutton.spec.ts index 1ac3e62d7..e8534259a 100644 --- a/tests/buttons/splitbutton.spec.ts +++ b/tests/buttons/splitbutton.spec.ts @@ -36,8 +36,10 @@ describe('SplitButton Visual Regression', () => { }); const splitButton = page.locator('[data-testid="split-button"]'); const primaryButton = page.getByRole('button').first(); + const dropdownTrigger = page.locator('[data-testid="split-button-dropdown"]'); await expect(splitButton).toBeVisible({ timeout: 10000 }); await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); + await expect(dropdownTrigger).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-primary-disabled-light.png', { @@ -52,8 +54,10 @@ describe('SplitButton Visual Regression', () => { }); const splitButton = page.locator('[data-testid="split-button"]'); const primaryButton = page.getByRole('button').first(); + const dropdownTrigger = page.locator('[data-testid="split-button-dropdown"]'); await expect(splitButton).toBeVisible({ timeout: 10000 }); await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); + await expect(dropdownTrigger).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-secondary-disabled-light.png', { @@ -168,8 +172,10 @@ describe('SplitButton Visual Regression', () => { }); const splitButton = page.locator('[data-testid="split-button"]'); const primaryButton = page.getByRole('button').first(); + const dropdownTrigger = page.locator('[data-testid="split-button-dropdown"]'); await expect(splitButton).toBeVisible({ timeout: 10000 }); await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); + await expect(dropdownTrigger).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-primary-disabled-dark.png', { @@ -184,8 +190,10 @@ describe('SplitButton Visual Regression', () => { }); const splitButton = page.locator('[data-testid="split-button"]'); const primaryButton = page.getByRole('button').first(); + const dropdownTrigger = page.locator('[data-testid="split-button-dropdown"]'); await expect(splitButton).toBeVisible({ timeout: 10000 }); await expect(primaryButton).toHaveAttribute('aria-disabled', 'true'); + await expect(dropdownTrigger).toHaveAttribute('aria-disabled', 'true'); await expect(splitButton).toHaveScreenshot( 'splitbutton-secondary-disabled-dark.png', { From 47421a1279c2c6c13a8398a8a50188ad2fe1ef02 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 15:02:36 +0100 Subject: [PATCH 13/43] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20changeset?= =?UTF-8?q?=20for=20SplitButton=20CSS=20module=20migration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/migrate-splitbutton-css-modules.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 .changeset/migrate-splitbutton-css-modules.md diff --git a/.changeset/migrate-splitbutton-css-modules.md b/.changeset/migrate-splitbutton-css-modules.md new file mode 100644 index 000000000..2edc1def5 --- /dev/null +++ b/.changeset/migrate-splitbutton-css-modules.md @@ -0,0 +1,17 @@ +--- +'@clickhouse/click-ui': patch +--- + +🔄 **SplitButton Component Migration to CSS Modules** + +The `SplitButton` component has been migrated from Styled Components to CSS Modules (Web Standards + BEM class name convention). + +**Changes:** +- Migrated from `styled-components` to CSS Modules (`SplitButton.module.css`) +- Using BEM naming convention (`.split-button`, `.primary-button`, `.secondary-button`, etc.) +- Maintained full API compatibility - no breaking changes +- Both `primary` and `secondary` variants preserved +- Interactive states (hover, focus, disabled) maintained with CSS pseudo-classes + +**Visual Testing:** +This migration is protected by visual regression tests covering all button types and states in both light and dark themes. From 8263743258f357f0d415c0febecab13b91f6c723 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 15:02:38 +0100 Subject: [PATCH 14/43] =?UTF-8?q?style:=20=F0=9F=92=84=20add=20CSS=20modul?= =?UTF-8?q?e=20for=20SplitButton=20with=20BEM=20naming?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.module.css | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 src/components/SplitButton/SplitButton.module.css diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css new file mode 100644 index 000000000..947fe8c20 --- /dev/null +++ b/src/components/SplitButton/SplitButton.module.css @@ -0,0 +1,169 @@ +.split-button { + display: inline-flex; + align-items: center; + overflow: hidden; + user-select: none; + border-radius: var(--click-button-radii-all); + border: 1px solid transparent; +} + +.split-button_fill-width { + width: 100%; +} + +.split-button_primary { + border-color: var(--click-button-split-primary-stroke-default); +} + +.split-button_primary:hover:not([data-disabled]) { + border-color: var(--click-button-split-primary-stroke-hover); +} + +.split-button_primary:focus-within:not([data-disabled]) { + border-color: var(--click-button-split-primary-stroke-active); +} + +.split-button_primary[data-disabled] { + cursor: not-allowed; + border-color: var(--click-button-split-primary-stroke-disabled); +} + +.split-button_secondary { + border-color: var(--click-button-split-secondary-stroke-default); +} + +.split-button_secondary:hover:not([data-disabled]) { + border-color: var(--click-button-split-secondary-stroke-hover); +} + +.split-button_secondary:focus-within:not([data-disabled]) { + border-color: var(--click-button-split-secondary-stroke-active); +} + +.split-button_secondary[data-disabled] { + cursor: not-allowed; + border-color: var(--click-button-split-secondary-stroke-disabled); +} + +.primary-button { + border: none; + align-self: stretch; + border-radius: 0; + align-items: center; + display: flex; + padding: var(--click-button-split-space-y) var(--click-button-split-space-x); + justify-content: center; + background: transparent; + color: inherit; + font: var(--click-button-split-typography-label-default); + cursor: pointer; +} + +.primary-button_fill-width { + width: 100%; +} + +.primary-button_primary { + background: var(--click-button-split-primary-background-main-default); + color: var(--click-button-split-primary-text-default); +} + +.primary-button_primary:hover:not(:disabled) { + background: var(--click-button-split-primary-background-main-hover); + color: var(--click-button-split-primary-text-hover); + font: var(--click-button-split-typography-label-hover); +} + +.primary-button_primary:focus:not(:disabled) { + background: var(--click-button-split-primary-background-main-active); + color: var(--click-button-split-primary-text-active); + font: var(--click-button-split-typography-label-active); +} + +.primary-button_primary:disabled { + background: var(--click-button-split-primary-background-main-disabled); + color: var(--click-button-split-primary-text-disabled); + font: var(--click-button-split-typography-label-disabled); + cursor: not-allowed; +} + +.primary-button_secondary { + background: var(--click-button-split-secondary-background-main-default); + color: var(--click-button-split-secondary-text-default); +} + +.primary-button_secondary:hover:not(:disabled) { + background: var(--click-button-split-secondary-background-main-hover); + color: var(--click-button-split-secondary-text-hover); + font: var(--click-button-split-typography-label-hover); +} + +.primary-button_secondary:focus:not(:disabled) { + background: var(--click-button-split-secondary-background-main-active); + color: var(--click-button-split-secondary-text-active); + font: var(--click-button-split-typography-label-active); +} + +.primary-button_secondary:disabled { + background: var(--click-button-split-secondary-background-main-disabled); + color: var(--click-button-split-secondary-text-disabled); + font: var(--click-button-split-typography-label-disabled); + cursor: not-allowed; +} + +.secondary-button { + border: none; + align-self: stretch; + border-radius: 0; + display: flex; + padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x); + background: transparent; + color: inherit; + cursor: pointer; +} + +.secondary-button_primary { + background: var(--click-button-split-primary-background-action-default); + color: var(--click-button-split-primary-text-default); +} + +.secondary-button_primary:hover:not([data-disabled]) { + background: var(--click-button-split-primary-background-action-hover); + color: var(--click-button-split-primary-text-hover); +} + +.secondary-button_primary:focus:not([data-disabled]) { + background: var(--click-button-split-primary-background-action-active); + color: var(--click-button-split-primary-text-active); +} + +.secondary-button_primary[data-disabled] { + background: var(--click-button-split-primary-background-action-disabled); + color: var(--click-button-split-primary-text-disabled); + cursor: not-allowed; +} + +.secondary-button_secondary { + background: var(--click-button-split-secondary-background-action-default); + color: var(--click-button-split-secondary-text-default); +} + +.secondary-button_secondary:hover:not([data-disabled]) { + background: var(--click-button-split-secondary-background-action-hover); + color: var(--click-button-split-secondary-text-hover); +} + +.secondary-button_secondary:focus:not([data-disabled]) { + background: var(--click-button-split-secondary-background-action-active); + color: var(--click-button-split-secondary-text-active); +} + +.secondary-button_secondary[data-disabled] { + background: var(--click-button-split-secondary-background-action-disabled); + color: var(--click-button-split-secondary-text-disabled); + cursor: not-allowed; +} + +.button-data { + width: auto; +} From 45b44cdeaf04240487a7912a5c56c1a70c5be851 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 15:02:39 +0100 Subject: [PATCH 15/43] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20migrate=20Spli?= =?UTF-8?q?tButton=20from=20styled-components=20to=20CSS=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 214 ++++++++------------- 1 file changed, 82 insertions(+), 132 deletions(-) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 7d12542b5..9f8a0a8f5 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -1,10 +1,53 @@ import { useEffect, useRef, useState } from 'react'; -import { styled } from 'styled-components'; +import { cn, cva } from '@/lib/cva'; import { Dropdown } from '@/components/Dropdown'; import { BaseButton } from '@/components/Button/BaseButton'; import { IconWrapper } from '@/components/IconWrapper'; import { Icon } from '@/components/Icon'; -import { SplitButtonProps, Menu, ButtonType } from './SplitButton.types'; +import { SplitButtonProps, Menu } from './SplitButton.types'; +import styles from './SplitButton.module.css'; + +const splitButtonVariants = cva(styles['split-button'], { + variants: { + type: { + primary: styles['split-button_primary'], + secondary: styles['split-button_secondary'], + }, + fillWidth: { + true: styles['split-button_fill-width'], + }, + }, + defaultVariants: { + type: 'primary', + }, +}); + +const primaryButtonVariants = cva(styles['split-button__primary-button'], { + variants: { + type: { + primary: styles['split-button__primary-button_primary'], + secondary: styles['split-button__primary-button_secondary'], + }, + fillWidth: { + true: styles['split-button__primary-button_fill-width'], + }, + }, + defaultVariants: { + type: 'primary', + }, +}); + +const secondaryButtonVariants = cva(styles['split-button__secondary-button'], { + variants: { + type: { + primary: styles['split-button__secondary-button_primary'], + secondary: styles['split-button__secondary-button_secondary'], + }, + }, + defaultVariants: { + type: 'primary', + }, +}); export const SplitButton = ({ type = 'primary', @@ -52,48 +95,51 @@ export const SplitButton = ({ onOpenChange={onOpenChange} modal={modal} > - - - - {children} - - - + + {children} + + + + - - - - - - + + + + + + + @@ -104,15 +150,11 @@ export const SplitButton = ({ {...item} /> ))} - + ); }; -const DropdownContent = styled.div<{ $width: number }>` - min-width: ${({ $width }) => $width}px; -`; - const MenuContentItem = ({ items = [], type = 'item', @@ -174,95 +216,3 @@ const MenuContentItem = ({ ); } }; - -const SplitButtonTrigger = styled.div<{ - $disabled?: boolean; - $type: ButtonType; - $fillWidth?: boolean; -}>` - display: inline-flex; - align-items: center; - overflow: hidden; - user-select: none; - ${({ theme, $disabled = false, $type, $fillWidth }) => ` - width: ${$fillWidth ? '100%' : 'revert'}; - border-radius: ${theme.click.button.radii.all}; - border: 1px solid ${theme.click.button.split[$type].stroke.default}; - ${ - $disabled - ? ` - cursor: not-allowed; - border-color: ${theme.click.button.split[$type].stroke.disabled}; - ` - : ` - &:hover { - border-color: ${theme.click.button.split[$type].stroke.hover}; - } - &:focus-within { - border-color: ${theme.click.button.split[$type].stroke.active}; - } - ` - } - `} -`; - -const PrimaryButton = styled(BaseButton)<{ - $type: ButtonType; - $fillWidth?: boolean; -}>` - border: none; - align-self: stretch; - border-radius: 0; - align-items: center; - padding: ${({ theme }) => - `${theme.click.button.split.space.y} ${theme.click.button.split.space.x}`}; - ${({ theme, $type, $fillWidth }) => ` - width: ${$fillWidth ? '100%' : 'revert'}; - justify-content: center; - background: ${theme.click.button.split[$type].background.main.default}; - color: ${theme.click.button.split[$type].text.default}; - font: ${theme.click.button.split.typography.label.default}; - &:hover { - background: ${theme.click.button.split[$type].background.main.hover}; - color: ${theme.click.button.split[$type].text.hover}; - font: ${theme.click.button.split.typography.label.hover}; - } - &:focus { - background: ${theme.click.button.split[$type].background.main.active}; - color: ${theme.click.button.split[$type].text.active}; - font: ${theme.click.button.split.typography.label.active}; - } - &:disabled { - background: ${theme.click.button.split[$type].background.main.disabled}; - color: ${theme.click.button.split[$type].text.disabled}; - font: ${theme.click.button.split.typography.label.disabled}; - } - `} -`; - -const SecondaryButton = styled(BaseButton)<{ $type: ButtonType }>` - border: none; - align-self: stretch; - border-radius: 0; - ${({ theme, $type }) => ` - padding: ${theme.click.button.split.icon.space.y} ${theme.click.button.split.icon.space.x}; - background: ${theme.click.button.split[$type].background.action.default}; - color: ${theme.click.button.split[$type].text.default}; - &:hover { - background: ${theme.click.button.split[$type].background.action.hover}; - color: ${theme.click.button.split[$type].text.hover}; - } - &:focus { - background: ${theme.click.button.split[$type].background.action.active}; - color: ${theme.click.button.split[$type].text.active}; - } - &[data-disabled] { - background: ${theme.click.button.split[$type].background.action.disabled}; - color: ${theme.click.button.split[$type].text.disabled}; - } - `} -`; - -const ButtonData = styled.div` - width: auto; -`; From e524d855f7548b0bac6f4070c8c04e95e18c223e Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 15:30:57 +0100 Subject: [PATCH 16/43] =?UTF-8?q?fix:=20=F0=9F=90=9B=20increase=20specific?= =?UTF-8?q?ity=20for=20SplitButton=20border-radius=20reset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 947fe8c20..e300802ff 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -45,7 +45,7 @@ border-color: var(--click-button-split-secondary-stroke-disabled); } -.primary-button { +.split-button .primary-button { border: none; align-self: stretch; border-radius: 0; @@ -111,7 +111,7 @@ cursor: not-allowed; } -.secondary-button { +.split-button .secondary-button { border: none; align-self: stretch; border-radius: 0; From bdc19e8447e0d16a46dd94a674a432abe575bb5d Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 15:32:47 +0100 Subject: [PATCH 17/43] =?UTF-8?q?fix:=20=F0=9F=90=9B=20increase=20specific?= =?UTF-8?q?ity=20for=20all=20SplitButton=20variant=20classes=20to=20restor?= =?UTF-8?q?e=20background=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.module.css | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index e300802ff..5b5223521 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -59,52 +59,52 @@ cursor: pointer; } -.primary-button_fill-width { +.split-button .primary-button_fill-width { width: 100%; } -.primary-button_primary { +.split-button .primary-button_primary { background: var(--click-button-split-primary-background-main-default); color: var(--click-button-split-primary-text-default); } -.primary-button_primary:hover:not(:disabled) { +.split-button .primary-button_primary:hover:not(:disabled) { background: var(--click-button-split-primary-background-main-hover); color: var(--click-button-split-primary-text-hover); font: var(--click-button-split-typography-label-hover); } -.primary-button_primary:focus:not(:disabled) { +.split-button .primary-button_primary:focus:not(:disabled) { background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); } -.primary-button_primary:disabled { +.split-button .primary-button_primary:disabled { background: var(--click-button-split-primary-background-main-disabled); color: var(--click-button-split-primary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.primary-button_secondary { +.split-button .primary-button_secondary { background: var(--click-button-split-secondary-background-main-default); color: var(--click-button-split-secondary-text-default); } -.primary-button_secondary:hover:not(:disabled) { +.split-button .primary-button_secondary:hover:not(:disabled) { background: var(--click-button-split-secondary-background-main-hover); color: var(--click-button-split-secondary-text-hover); font: var(--click-button-split-typography-label-hover); } -.primary-button_secondary:focus:not(:disabled) { +.split-button .primary-button_secondary:focus:not(:disabled) { background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); } -.primary-button_secondary:disabled { +.split-button .primary-button_secondary:disabled { background: var(--click-button-split-secondary-background-main-disabled); color: var(--click-button-split-secondary-text-disabled); font: var(--click-button-split-typography-label-disabled); @@ -122,43 +122,43 @@ cursor: pointer; } -.secondary-button_primary { +.split-button .secondary-button_primary { background: var(--click-button-split-primary-background-action-default); color: var(--click-button-split-primary-text-default); } -.secondary-button_primary:hover:not([data-disabled]) { +.split-button .secondary-button_primary:hover:not([data-disabled]) { background: var(--click-button-split-primary-background-action-hover); color: var(--click-button-split-primary-text-hover); } -.secondary-button_primary:focus:not([data-disabled]) { +.split-button .secondary-button_primary:focus:not([data-disabled]) { background: var(--click-button-split-primary-background-action-active); color: var(--click-button-split-primary-text-active); } -.secondary-button_primary[data-disabled] { +.split-button .secondary-button_primary[data-disabled] { background: var(--click-button-split-primary-background-action-disabled); color: var(--click-button-split-primary-text-disabled); cursor: not-allowed; } -.secondary-button_secondary { +.split-button .secondary-button_secondary { background: var(--click-button-split-secondary-background-action-default); color: var(--click-button-split-secondary-text-default); } -.secondary-button_secondary:hover:not([data-disabled]) { +.split-button .secondary-button_secondary:hover:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-hover); color: var(--click-button-split-secondary-text-hover); } -.secondary-button_secondary:focus:not([data-disabled]) { +.split-button .secondary-button_secondary:focus:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-active); color: var(--click-button-split-secondary-text-active); } -.secondary-button_secondary[data-disabled] { +.split-button .secondary-button_secondary[data-disabled] { background: var(--click-button-split-secondary-background-action-disabled); color: var(--click-button-split-secondary-text-disabled); cursor: not-allowed; From 9b72595051d0e7813121279e7e68fce1624e9d7c Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 16:48:43 +0100 Subject: [PATCH 18/43] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20CSS=20prope?= =?UTF-8?q?rty=20order=20and=20selector=20specificity=20lint=20errors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.module.css | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 5b5223521..e79f4a59f 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -1,10 +1,10 @@ .split-button { display: inline-flex; - align-items: center; overflow: hidden; - user-select: none; - border-radius: var(--click-button-radii-all); + align-items: center; border: 1px solid transparent; + border-radius: var(--click-button-radii-all); + user-select: none; } .split-button_fill-width { @@ -24,8 +24,8 @@ } .split-button_primary[data-disabled] { - cursor: not-allowed; border-color: var(--click-button-split-primary-stroke-disabled); + cursor: not-allowed; } .split-button_secondary { @@ -41,18 +41,18 @@ } .split-button_secondary[data-disabled] { - cursor: not-allowed; border-color: var(--click-button-split-secondary-stroke-disabled); + cursor: not-allowed; } .split-button .primary-button { - border: none; - align-self: stretch; - border-radius: 0; - align-items: center; display: flex; padding: var(--click-button-split-space-y) var(--click-button-split-space-x); justify-content: center; + align-items: center; + align-self: stretch; + border: none; + border-radius: 0; background: transparent; color: inherit; font: var(--click-button-split-typography-label-default); @@ -68,6 +68,13 @@ color: var(--click-button-split-primary-text-default); } +.split-button .primary-button_primary:disabled { + background: var(--click-button-split-primary-background-main-disabled); + color: var(--click-button-split-primary-text-disabled); + font: var(--click-button-split-typography-label-disabled); + cursor: not-allowed; +} + .split-button .primary-button_primary:hover:not(:disabled) { background: var(--click-button-split-primary-background-main-hover); color: var(--click-button-split-primary-text-hover); @@ -80,18 +87,18 @@ font: var(--click-button-split-typography-label-active); } -.split-button .primary-button_primary:disabled { - background: var(--click-button-split-primary-background-main-disabled); - color: var(--click-button-split-primary-text-disabled); - font: var(--click-button-split-typography-label-disabled); - cursor: not-allowed; -} - .split-button .primary-button_secondary { background: var(--click-button-split-secondary-background-main-default); color: var(--click-button-split-secondary-text-default); } +.split-button .primary-button_secondary:disabled { + background: var(--click-button-split-secondary-background-main-disabled); + color: var(--click-button-split-secondary-text-disabled); + font: var(--click-button-split-typography-label-disabled); + cursor: not-allowed; +} + .split-button .primary-button_secondary:hover:not(:disabled) { background: var(--click-button-split-secondary-background-main-hover); color: var(--click-button-split-secondary-text-hover); @@ -104,19 +111,12 @@ font: var(--click-button-split-typography-label-active); } -.split-button .primary-button_secondary:disabled { - background: var(--click-button-split-secondary-background-main-disabled); - color: var(--click-button-split-secondary-text-disabled); - font: var(--click-button-split-typography-label-disabled); - cursor: not-allowed; -} - .split-button .secondary-button { - border: none; - align-self: stretch; - border-radius: 0; display: flex; padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x); + align-self: stretch; + border: none; + border-radius: 0; background: transparent; color: inherit; cursor: pointer; From 9a2dd13d75691afc5c9e83cb824c3d2d2718dd13 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:18:57 +0100 Subject: [PATCH 19/43] =?UTF-8?q?refactor(SplitButton):=20=F0=9F=92=A1=20r?= =?UTF-8?q?emove=20styled-components,=20use=20inline=20style=20for=20Dropd?= =?UTF-8?q?own.Content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From e30953ae05a275ce4627d2e9a67e003586a29d45 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:19:20 +0100 Subject: [PATCH 20/43] =?UTF-8?q?style(SplitButton):=20=F0=9F=92=84=20chan?= =?UTF-8?q?ge=20:focus=20to=20:focus-visible=20per=20project=20conventions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.module.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index e79f4a59f..674d930ed 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -81,7 +81,7 @@ font: var(--click-button-split-typography-label-hover); } -.split-button .primary-button_primary:focus:not(:disabled) { +.split-button .primary-button_primary:focus-visible:not(:disabled) { background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); @@ -105,7 +105,7 @@ font: var(--click-button-split-typography-label-hover); } -.split-button .primary-button_secondary:focus:not(:disabled) { +.split-button .primary-button_secondary:focus-visible:not(:disabled) { background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); @@ -132,7 +132,7 @@ color: var(--click-button-split-primary-text-hover); } -.split-button .secondary-button_primary:focus:not([data-disabled]) { +.split-button .secondary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-action-active); color: var(--click-button-split-primary-text-active); } @@ -153,7 +153,7 @@ color: var(--click-button-split-secondary-text-hover); } -.split-button .secondary-button_secondary:focus:not([data-disabled]) { +.split-button .secondary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-active); color: var(--click-button-split-secondary-text-active); } From ee032eaf29d5764fd741aa3b5cfe3d4a24170683 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:19:28 +0100 Subject: [PATCH 21/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20add=20?= =?UTF-8?q?aria-disabled=20to=20secondary=20button=20per=20conventions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From ff06190dc75374ce9de7f0929a440114f76d4709 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:19:49 +0100 Subject: [PATCH 22/43] =?UTF-8?q?style(SplitButton):=20=F0=9F=92=84=20upda?= =?UTF-8?q?te=20to=20proper=20BEM=20element=20naming=20with=20=5F=5F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 674d930ed..6894a11d3 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -45,7 +45,7 @@ cursor: not-allowed; } -.split-button .primary-button { +.split-button__primary-button { display: flex; padding: var(--click-button-split-space-y) var(--click-button-split-space-x); justify-content: center; @@ -111,7 +111,7 @@ font: var(--click-button-split-typography-label-active); } -.split-button .secondary-button { +.split-button__secondary-button { display: flex; padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x); align-self: stretch; From 4dc56481093b6c231bcb72abc20510ef8472186a Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:31:21 +0100 Subject: [PATCH 23/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20fix=20?= =?UTF-8?q?CSS=20class=20names=20to=20match=20JS=20references=20with=20pro?= =?UTF-8?q?per=20BEM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.module.css | 38 +++++++++---------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 6894a11d3..521a9ad11 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -59,53 +59,53 @@ cursor: pointer; } -.split-button .primary-button_fill-width { +.split-button__primary-button_fill-width { width: 100%; } -.split-button .primary-button_primary { +.split-button__primary-button_primary { background: var(--click-button-split-primary-background-main-default); color: var(--click-button-split-primary-text-default); } -.split-button .primary-button_primary:disabled { +.split-button__primary-button_primary:disabled { background: var(--click-button-split-primary-background-main-disabled); color: var(--click-button-split-primary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button .primary-button_primary:hover:not(:disabled) { +.split-button__primary-button_primary:hover:not(:disabled) { background: var(--click-button-split-primary-background-main-hover); color: var(--click-button-split-primary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button .primary-button_primary:focus-visible:not(:disabled) { +.split-button__primary-button_primary:focus-visible:not(:disabled) { background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); } -.split-button .primary-button_secondary { +.split-button__primary-button_secondary { background: var(--click-button-split-secondary-background-main-default); color: var(--click-button-split-secondary-text-default); } -.split-button .primary-button_secondary:disabled { +.split-button__primary-button_secondary:disabled { background: var(--click-button-split-secondary-background-main-disabled); color: var(--click-button-split-secondary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button .primary-button_secondary:hover:not(:disabled) { +.split-button__primary-button_secondary:hover:not(:disabled) { background: var(--click-button-split-secondary-background-main-hover); color: var(--click-button-split-secondary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button .primary-button_secondary:focus-visible:not(:disabled) { +.split-button__primary-button_secondary:focus-visible:not(:disabled) { background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); @@ -122,48 +122,44 @@ cursor: pointer; } -.split-button .secondary-button_primary { +.split-button__secondary-button_primary { background: var(--click-button-split-primary-background-action-default); color: var(--click-button-split-primary-text-default); } -.split-button .secondary-button_primary:hover:not([data-disabled]) { +.split-button__secondary-button_primary:hover:not([data-disabled]) { background: var(--click-button-split-primary-background-action-hover); color: var(--click-button-split-primary-text-hover); } -.split-button .secondary-button_primary:focus-visible:not([data-disabled]) { +.split-button__secondary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-action-active); color: var(--click-button-split-primary-text-active); } -.split-button .secondary-button_primary[data-disabled] { +.split-button__secondary-button_primary[data-disabled] { background: var(--click-button-split-primary-background-action-disabled); color: var(--click-button-split-primary-text-disabled); cursor: not-allowed; } -.split-button .secondary-button_secondary { +.split-button__secondary-button_secondary { background: var(--click-button-split-secondary-background-action-default); color: var(--click-button-split-secondary-text-default); } -.split-button .secondary-button_secondary:hover:not([data-disabled]) { +.split-button__secondary-button_secondary:hover:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-hover); color: var(--click-button-split-secondary-text-hover); } -.split-button .secondary-button_secondary:focus-visible:not([data-disabled]) { +.split-button__secondary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-active); color: var(--click-button-split-secondary-text-active); } -.split-button .secondary-button_secondary[data-disabled] { +.split-button__secondary-button_secondary[data-disabled] { background: var(--click-button-split-secondary-background-action-disabled); color: var(--click-button-split-secondary-text-disabled); cursor: not-allowed; } - -.button-data { - width: auto; -} From 298604dc00051cb0403430ccf7da3b91ddc0a41b Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:31:30 +0100 Subject: [PATCH 24/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20add=20?= =?UTF-8?q?data-testid=20to=20wrapper=20div=20for=20testability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 9f8a0a8f5..7bd2fc07d 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -97,6 +97,7 @@ export const SplitButton = ({ >
From c34a509488256b0e31860da0065f764d251c8338 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:31:45 +0100 Subject: [PATCH 25/43] =?UTF-8?q?refactor(SplitButton):=20=F0=9F=92=A1=20r?= =?UTF-8?q?emove=20unused=20button-data=20div=20and=20CSS=20class?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 7bd2fc07d..2159877c8 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -107,14 +107,12 @@ export const SplitButton = ({ className={cn(primaryButtonVariants({ type, fillWidth }))} {...props} > -
- - {children} - -
+ + {children} + Date: Tue, 14 Apr 2026 17:41:07 +0100 Subject: [PATCH 26/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20add=20?= =?UTF-8?q?aria-disabled=20to=20BaseButton=20to=20fix=20failing=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 2159877c8..620f827ae 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -104,6 +104,7 @@ export const SplitButton = ({ From abcdc6442ac3a3deba89a858921413cd522b781b Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:46:19 +0100 Subject: [PATCH 27/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20forwar?= =?UTF-8?q?d=20className=20to=20root=20element=20instead=20of=20BaseButton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 620f827ae..2f14b5aba 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -63,6 +63,7 @@ export const SplitButton = ({ children, icon, iconDir = 'start', + className, ...props }: SplitButtonProps) => { const ref = useRef(null); @@ -98,7 +99,7 @@ export const SplitButton = ({
Date: Tue, 14 Apr 2026 17:46:47 +0100 Subject: [PATCH 28/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20align?= =?UTF-8?q?=20disabled=20selectors=20to=20use=20[data-disabled]=20consiste?= =?UTF-8?q?ntly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.module.css | 12 ++++++------ src/components/SplitButton/SplitButton.tsx | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 521a9ad11..458b50dd1 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -68,20 +68,20 @@ color: var(--click-button-split-primary-text-default); } -.split-button__primary-button_primary:disabled { +.split-button__primary-button_primary[data-disabled] { background: var(--click-button-split-primary-background-main-disabled); color: var(--click-button-split-primary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button__primary-button_primary:hover:not(:disabled) { +.split-button__primary-button_primary:hover:not([data-disabled]) { background: var(--click-button-split-primary-background-main-hover); color: var(--click-button-split-primary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button__primary-button_primary:focus-visible:not(:disabled) { +.split-button__primary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); @@ -92,20 +92,20 @@ color: var(--click-button-split-secondary-text-default); } -.split-button__primary-button_secondary:disabled { +.split-button__primary-button_secondary[data-disabled] { background: var(--click-button-split-secondary-background-main-disabled); color: var(--click-button-split-secondary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button__primary-button_secondary:hover:not(:disabled) { +.split-button__primary-button_secondary:hover:not([data-disabled]) { background: var(--click-button-split-secondary-background-main-hover); color: var(--click-button-split-secondary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button__primary-button_secondary:focus-visible:not(:disabled) { +.split-button__primary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index 2f14b5aba..f6833c81a 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -106,6 +106,7 @@ export const SplitButton = ({ type="button" disabled={disabled} aria-disabled={disabled || undefined} + data-disabled={disabled ? '' : undefined} className={cn(primaryButtonVariants({ type, fillWidth }))} {...props} > From 84c9b02c2269bdfd9988a1d21f9c1324ff514f06 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:46:57 +0100 Subject: [PATCH 29/43] =?UTF-8?q?test(SplitButton):=20=F0=9F=92=8D=20add?= =?UTF-8?q?=20FillWidth=20story=20for=20visual=20regression=20coverage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.stories.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/SplitButton/SplitButton.stories.tsx b/src/components/SplitButton/SplitButton.stories.tsx index 3eb954579..8d07eb5c9 100644 --- a/src/components/SplitButton/SplitButton.stories.tsx +++ b/src/components/SplitButton/SplitButton.stories.tsx @@ -107,3 +107,16 @@ export const Interactive: Story = { onClick: () => console.log('clicked'), }, }; + +// Layout Variants +export const FillWidth: Story = { + args: { + type: 'primary', + children: 'Full Width Split Button', + menu: menuItems, + fillWidth: true, + }, + parameters: { + layout: 'padded', + }, +}; From a38c3d00aa554f3ea7d620a12f910fe7920f00ce Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:48:46 +0100 Subject: [PATCH 30/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20increa?= =?UTF-8?q?se=20CSS=20specificity=20to=20override=20BaseButton=20border-ra?= =?UTF-8?q?dius?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitButton/SplitButton.module.css | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index 458b50dd1..e5dc20963 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -45,7 +45,7 @@ cursor: not-allowed; } -.split-button__primary-button { +.split-button .split-button__primary-button { display: flex; padding: var(--click-button-split-space-y) var(--click-button-split-space-x); justify-content: center; @@ -59,59 +59,59 @@ cursor: pointer; } -.split-button__primary-button_fill-width { +.split-button .split-button__primary-button_fill-width { width: 100%; } -.split-button__primary-button_primary { +.split-button .split-button__primary-button_primary { background: var(--click-button-split-primary-background-main-default); color: var(--click-button-split-primary-text-default); } -.split-button__primary-button_primary[data-disabled] { +.split-button .split-button__primary-button_primary[data-disabled] { background: var(--click-button-split-primary-background-main-disabled); color: var(--click-button-split-primary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button__primary-button_primary:hover:not([data-disabled]) { +.split-button .split-button__primary-button_primary:hover:not([data-disabled]) { background: var(--click-button-split-primary-background-main-hover); color: var(--click-button-split-primary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button__primary-button_primary:focus-visible:not([data-disabled]) { +.split-button .split-button__primary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); } -.split-button__primary-button_secondary { +.split-button .split-button__primary-button_secondary { background: var(--click-button-split-secondary-background-main-default); color: var(--click-button-split-secondary-text-default); } -.split-button__primary-button_secondary[data-disabled] { +.split-button .split-button__primary-button_secondary[data-disabled] { background: var(--click-button-split-secondary-background-main-disabled); color: var(--click-button-split-secondary-text-disabled); font: var(--click-button-split-typography-label-disabled); cursor: not-allowed; } -.split-button__primary-button_secondary:hover:not([data-disabled]) { +.split-button .split-button__primary-button_secondary:hover:not([data-disabled]) { background: var(--click-button-split-secondary-background-main-hover); color: var(--click-button-split-secondary-text-hover); font: var(--click-button-split-typography-label-hover); } -.split-button__primary-button_secondary:focus-visible:not([data-disabled]) { +.split-button .split-button__primary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); } -.split-button__secondary-button { +.split-button .split-button__secondary-button { display: flex; padding: var(--click-button-split-icon-space-y) var(--click-button-split-icon-space-x); align-self: stretch; @@ -122,43 +122,43 @@ cursor: pointer; } -.split-button__secondary-button_primary { +.split-button .split-button__secondary-button_primary { background: var(--click-button-split-primary-background-action-default); color: var(--click-button-split-primary-text-default); } -.split-button__secondary-button_primary:hover:not([data-disabled]) { +.split-button .split-button__secondary-button_primary:hover:not([data-disabled]) { background: var(--click-button-split-primary-background-action-hover); color: var(--click-button-split-primary-text-hover); } -.split-button__secondary-button_primary:focus-visible:not([data-disabled]) { +.split-button .split-button__secondary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-action-active); color: var(--click-button-split-primary-text-active); } -.split-button__secondary-button_primary[data-disabled] { +.split-button .split-button__secondary-button_primary[data-disabled] { background: var(--click-button-split-primary-background-action-disabled); color: var(--click-button-split-primary-text-disabled); cursor: not-allowed; } -.split-button__secondary-button_secondary { +.split-button .split-button__secondary-button_secondary { background: var(--click-button-split-secondary-background-action-default); color: var(--click-button-split-secondary-text-default); } -.split-button__secondary-button_secondary:hover:not([data-disabled]) { +.split-button .split-button__secondary-button_secondary:hover:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-hover); color: var(--click-button-split-secondary-text-hover); } -.split-button__secondary-button_secondary:focus-visible:not([data-disabled]) { +.split-button .split-button__secondary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-active); color: var(--click-button-split-secondary-text-active); } -.split-button__secondary-button_secondary[data-disabled] { +.split-button .split-button__secondary-button_secondary[data-disabled] { background: var(--click-button-split-secondary-background-action-disabled); color: var(--click-button-split-secondary-text-disabled); cursor: not-allowed; From a9c1826e8df5c67539f1ba36d00986d01faa5b60 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:54:16 +0100 Subject: [PATCH 31/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20add=20?= =?UTF-8?q?explicit=20outline=20on=20focus-visible=20states=20per=20a11y?= =?UTF-8?q?=20conventions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.module.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/SplitButton/SplitButton.module.css b/src/components/SplitButton/SplitButton.module.css index e5dc20963..48f8e50d8 100644 --- a/src/components/SplitButton/SplitButton.module.css +++ b/src/components/SplitButton/SplitButton.module.css @@ -85,6 +85,8 @@ background: var(--click-button-split-primary-background-main-active); color: var(--click-button-split-primary-text-active); font: var(--click-button-split-typography-label-active); + outline: 2px solid var(--click-button-split-primary-stroke-active); + outline-offset: 2px; } .split-button .split-button__primary-button_secondary { @@ -109,6 +111,8 @@ background: var(--click-button-split-secondary-background-main-active); color: var(--click-button-split-secondary-text-active); font: var(--click-button-split-typography-label-active); + outline: 2px solid var(--click-button-split-secondary-stroke-active); + outline-offset: 2px; } .split-button .split-button__secondary-button { @@ -135,6 +139,8 @@ .split-button .split-button__secondary-button_primary:focus-visible:not([data-disabled]) { background: var(--click-button-split-primary-background-action-active); color: var(--click-button-split-primary-text-active); + outline: 2px solid var(--click-button-split-primary-stroke-active); + outline-offset: 2px; } .split-button .split-button__secondary-button_primary[data-disabled] { @@ -156,6 +162,8 @@ .split-button .split-button__secondary-button_secondary:focus-visible:not([data-disabled]) { background: var(--click-button-split-secondary-background-action-active); color: var(--click-button-split-secondary-text-active); + outline: 2px solid var(--click-button-split-secondary-stroke-active); + outline-offset: 2px; } .split-button .split-button__secondary-button_secondary[data-disabled] { From 5a506d08a8c939f996a5f20e488f02e480104864 Mon Sep 17 00:00:00 2001 From: Helder Oliveira Date: Tue, 14 Apr 2026 17:56:22 +0100 Subject: [PATCH 32/43] =?UTF-8?q?fix(SplitButton):=20=F0=9F=90=9B=20move?= =?UTF-8?q?=20data-testid=20to=20inner=20button=20for=20aria-disabled=20te?= =?UTF-8?q?stability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SplitButton/SplitButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index f6833c81a..7e615bcc8 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -120,11 +120,11 @@ export const SplitButton = ({ - -
- - {menu.map((item: Menu, index: number) => ( - - ))} - - - ); -}; + + {children} + + + + + +
+ + {menu.map((item: Menu, index: number) => ( + + ))} + + + ); + } +); + +SplitButton.displayName = 'SplitButton'; const MenuContentItem = ({ items = [],