From 8999c872f47ef537b30ae7f9cb386ec5f8854a05 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 1 Oct 2025 11:40:27 -0700 Subject: [PATCH] Revert "Remove support for `sx` from `BaseStyles` component (#6878)" This reverts commit 7081dd3b45f7dae08f7a39038be95dbf20dd8a27. --- .changeset/sharp-beans-run.md | 5 ----- ...ev-With-Sx-Props-dark-colorblind-linux.png | Bin 0 -> 4685 bytes ...es-Dev-With-Sx-Props-dark-dimmed-linux.png | Bin 0 -> 4683 bytes ...With-Sx-Props-dark-high-contrast-linux.png | Bin 0 -> 4683 bytes ...aseStyles-Dev-With-Sx-Props-dark-linux.png | Bin 0 -> 4685 bytes ...ev-With-Sx-Props-dark-tritanopia-linux.png | Bin 0 -> 4685 bytes ...v-With-Sx-Props-light-colorblind-linux.png | Bin 0 -> 4675 bytes ...ith-Sx-Props-light-high-contrast-linux.png | Bin 0 -> 4675 bytes ...seStyles-Dev-With-Sx-Props-light-linux.png | Bin 0 -> 4675 bytes ...v-With-Sx-Props-light-tritanopia-linux.png | Bin 0 -> 4675 bytes ...ith-System-Props-dark-colorblind-linux.png | Bin 0 -> 4610 bytes ...ev-With-System-Props-dark-dimmed-linux.png | Bin 0 -> 4610 bytes ...-System-Props-dark-high-contrast-linux.png | Bin 0 -> 4608 bytes ...tyles-Dev-With-System-Props-dark-linux.png | Bin 0 -> 4610 bytes ...ith-System-Props-dark-tritanopia-linux.png | Bin 0 -> 4610 bytes ...th-System-Props-light-colorblind-linux.png | Bin 0 -> 4604 bytes ...System-Props-light-high-contrast-linux.png | Bin 0 -> 4604 bytes ...yles-Dev-With-System-Props-light-linux.png | Bin 0 -> 4604 bytes ...th-System-Props-light-tritanopia-linux.png | Bin 0 -> 4604 bytes e2e/components/BaseStyles.test.ts | 8 ++++++++ packages/react/src/BaseStyles.dev.stories.tsx | 19 ++++++++++++++++++ packages/react/src/BaseStyles.tsx | 10 ++++++--- .../react/src/__tests__/BaseStyles.test.tsx | 13 ++++++++++++ 23 files changed, 47 insertions(+), 8 deletions(-) delete mode 100644 .changeset/sharp-beans-run.md create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-linux.png create mode 100644 .playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-tritanopia-linux.png diff --git a/.changeset/sharp-beans-run.md b/.changeset/sharp-beans-run.md deleted file mode 100644 index 54d1b49baac..00000000000 --- a/.changeset/sharp-beans-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": major ---- - -Update BaseStyles component to no longer support sx diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6091909e3cb534e9a79854f2e04c78917fc53ca3 GIT binary patch literal 4685 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-?4B-; zAr*7p-o4+QRw{eo{ zIs#PS(oxO8&>`@hfkA+P!aZ+%^dl?_YqHfC85sT@d(;=3zUBU8EV_@RJ^DBM^S{NL zpT8GdKl``e*=>J|UwpYe$W8*Z%HQUCkT2kX!C z(w{Xwjr?`2=E0=OM_+!gpZj~i{rj4-bMbRqtDpZ`{cNGG6b}Q#Dl^IN&(Cq+e*WZF za$;D#P4!2c$^yPU2G8YYG+#fzcm2Hkca6>WB>mfQ@vh$NZHbti{`p`gs_as7(e&(nUM?7X@0;?3yieZiaGF5CJ0NzVM4{O7LMS+3t- zxUcT|oj?BH>yzyETXDl zUx$aK6&8k>nM*S;%$W-ei{;;cS6;0xzI*&x_iOR+w2vmgr>9l^J#|Uve_GsT(anqu z4p*n`(S82m&F&I8d$Zm0b5CFIvp;X?f7Vs{t-Vq8_j40JKij!=Jup08xjC!NZ`J3N?XTYV zyY1)E{^x7?&zRnRcIBVtmoG6pATHf@RMz_Zi>9f<$G7K5Ffcq&?Y1ua%e^~pQ|SKy zZeZ$e@5GYsz{$JAxK30JnC$nT#FjKE%K=1Zl~IM%DRM@`aWovsudqf_&uHoyO+BPF z@<#K_Xr39(GoyKiaCdODq!=wJMoS8!ONxI?|7Ofx-an`O4scM0!PC{xWt~$(698}> BV+Q~L literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dd00f33498255bd4723913b07d2616bf96a57a0e GIT binary patch literal 4683 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-te!58 zAr*7p-o4+QRw{eo;$?Vr^S`TLl-gR*amy#3-5&Fwqnfc$L zMN}kZNx0xeUzcZk3zJ^o%8S^bd0Q<^Oe%MC^OVfnM<@8&rzN&6lYd{k*FyaKXWRS5 zKVtS-ewdSf{N2*0j0_C_{?Gk>Uk>P$AKwMOGcX7!zGGxiaJs|H;Lx&zouPrFke`7; z@DWgf(h*w*2A7U%28Ip-3gb52|0=luyZj*7N3aho?W>xAWtx%8J=+%nS{ybdUZ0`T5W~%dP(+ zW?U6NA7|w+H-}mO%un`b4|M{@m+zGuzkAW%oaS z?)_Qoc>Db~ZsjmA6y)9dVt-{_<>@~^%0Hj#J$KKneBMl1^YgaL)2^SXDcJYzbLC<7 zXRpi8>;5nLum0@w>dhY({(Lq6*;3=;(|7)UiK%&g=j+U$U#=Ykx~cer*yDdk-u!$~ zllk}5)Xy){p9g2pzi(%6Ve|X?sk*dzbG+-#@?+*DOCS9k`uT)%@ztoC=g+*-`BQRl zi_P(EX3`7{b7pUo_`Z5`K}KH0{!f2)MeCkBbB*so%%KPXynhUd&;cS zKtYyU8GY{I&HA4QOs;Nl~+ixTvH!pem`N!MO%i7O0e?R}Q^xOT#dAked{ryz)q^t7Hsmd?& zc2=f}y`L2g*IJ*XXKlb9Z@a%TVV$+n?|a7g>)zMAUbr)D@n7|{^Shtz-u?VZ|FgCH z=eAluJHuQ2;^oc?h(l#}PoHL9dhq09_wBh7z;u#drvLWtm49!4wMPMY_C7cha?Y>N z84L^u{;T;@p5Tej8KVlRQ^Jgf<7haNUq6kep3&4ZntDiU(~aht(L6JnXGZf3;oje9 lNikYdjFuGSmJ~m@PiD_6uCn?k037vT@O1TaS?83{1OT0OV#@#k literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-high-contrast-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-high-contrast-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..adbbb4072cf033a0145046a90de026b5d9b4d5bb GIT binary patch literal 4683 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-te!58 zAr*7p-o3jzwN&!J$LB9nEazDIE}1elqEl^($y19?uQM|Q@4C2zOG%1^2>oTQ%>3`r zA}W%yBwX;Kugf!@g-MSigvEXw3Q0;`c(LS}!IWNK@%A@girCIAynDLbPX5}_d;7me zcR&Ahx@qsXOPBgSvokRK_+Ngmz8dJ12lt)tFf%x`>|keT;3(v0U=VyH$H1U;#Fl}< zr30v-L*P3DgMi{YMg|2Z{0eVuyvpr2-)iR!PX>mD{hPNWKcDukx(JJjH~j9@C*P|s z`S$1Vqp!vHUq;@tZ$DS_R{h!L<^O(Z-%Eeqbo<%2Tppm~{uukiEk3g7(Z98yoAb}_ zo;Q~}EdA;0&-=Weoiu*GKkwcDdwc#qc@s1HY4!8A)z25Q^0F~7gx>D?UHts#-Qt?Z z8*Q@n=j^SRXJx@YZ+~KmLBEcmJI5cw_!JYyLSi zV(-r_-;-9iaqmrF_`KQjw0=eG_hmmnzJHcFd+y%ScNVtZ=4bC7Pyc?VCSl*N&y{a~ zKhG{dd-i|P|Krb#vp4@a`192KXRgM@pYMD<6H{^e&d--WuY5bk%+Rp;g4yGLH)4KG z{Q2nERPE;z&!17hZofZwUwy^5wbTEeu`w0@UlO-Jy)RGfd-&PI{O3bor`j6>4ZN`@ z@x094dpQgY1!cF=?yNuiY2nTNg-@@vMXx>cD*9P_{fy~*HWb~nDZgm5_vYQOw6E7c zpX$|CPrJU(66S}qJM1^#Kkxm1_G^2q_!~PalFH^L{y()QFD7#4)%dfk#SEnx7(#TP zf6hGJjt5|6SF6@rM0&CgJ)?W(*7~ zqCD=@*V%2e$&R1L|90l$>1TzvpM7gT)BN4+!?WM+PtLn*slMMteqW8;{vx@Z)p=2K zr&>Rs=6VJcLEN3c)t^sdF8(0;dG_z;yOcM7zx#RZ_cP}5bF$5D*XQWfKCgLR`gybb z+1c_lvZp`$^3U?inV20Nz&Kfum6>_`XY{TIUsg`$mIj*jWA;*6>+M_W1OEqb15-_V zC$5Csp}U_;7^wdKlar(;aH4aMf+jFuFmB?Yxgih9O+hPg)1XZFnpj(RY7y85}Sb4q9e0Kkf6+5i9m literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6091909e3cb534e9a79854f2e04c78917fc53ca3 GIT binary patch literal 4685 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-?4B-; zAr*7p-o4+QRw{eo{ zIs#PS(oxO8&>`@hfkA+P!aZ+%^dl?_YqHfC85sT@d(;=3zUBU8EV_@RJ^DBM^S{NL zpT8GdKl``e*=>J|UwpYe$W8*Z%HQUCkT2kX!C z(w{Xwjr?`2=E0=OM_+!gpZj~i{rj4-bMbRqtDpZ`{cNGG6b}Q#Dl^IN&(Cq+e*WZF za$;D#P4!2c$^yPU2G8YYG+#fzcm2Hkca6>WB>mfQ@vh$NZHbti{`p`gs_as7(e&(nUM?7X@0;?3yieZiaGF5CJ0NzVM4{O7LMS+3t- zxUcT|oj?BH>yzyETXDl zUx$aK6&8k>nM*S;%$W-ei{;;cS6;0xzI*&x_iOR+w2vmgr>9l^J#|Uve_GsT(anqu z4p*n`(S82m&F&I8d$Zm0b5CFIvp;X?f7Vs{t-Vq8_j40JKij!=Jup08xjC!NZ`J3N?XTYV zyY1)E{^x7?&zRnRcIBVtmoG6pATHf@RMz_Zi>9f<$G7K5Ffcq&?Y1ua%e^~pQ|SKy zZeZ$e@5GYsz{$JAxK30JnC$nT#FjKE%K=1Zl~IM%DRM@`aWovsudqf_&uHoyO+BPF z@<#K_Xr39(GoyKiaCdODq!=wJMoS8!ONxI?|7Ofx-an`O4scM0!PC{xWt~$(698}> BV+Q~L literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6091909e3cb534e9a79854f2e04c78917fc53ca3 GIT binary patch literal 4685 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbO-?4B-; zAr*7p-o4+QRw{eo{ zIs#PS(oxO8&>`@hfkA+P!aZ+%^dl?_YqHfC85sT@d(;=3zUBU8EV_@RJ^DBM^S{NL zpT8GdKl``e*=>J|UwpYe$W8*Z%HQUCkT2kX!C z(w{Xwjr?`2=E0=OM_+!gpZj~i{rj4-bMbRqtDpZ`{cNGG6b}Q#Dl^IN&(Cq+e*WZF za$;D#P4!2c$^yPU2G8YYG+#fzcm2Hkca6>WB>mfQ@vh$NZHbti{`p`gs_as7(e&(nUM?7X@0;?3yieZiaGF5CJ0NzVM4{O7LMS+3t- zxUcT|oj?BH>yzyETXDl zUx$aK6&8k>nM*S;%$W-ei{;;cS6;0xzI*&x_iOR+w2vmgr>9l^J#|Uve_GsT(anqu z4p*n`(S82m&F&I8d$Zm0b5CFIvp;X?f7Vs{t-Vq8_j40JKij!=Jup08xjC!NZ`J3N?XTYV zyY1)E{^x7?&zRnRcIBVtmoG6pATHf@RMz_Zi>9f<$G7K5Ffcq&?Y1ua%e^~pQ|SKy zZeZ$e@5GYsz{$JAxK30JnC$nT#FjKE%K=1Zl~IM%DRM@`aWovsudqf_&uHoyO+BPF z@<#K_Xr39(GoyKiaCdODq!=wJMoS8!ONxI?|7Ofx-an`O4scM0!PC{xWt~$(698}> BV+Q~L literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-colorblind-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-Sx-Props-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ea788845415a8ece15adef4a8821879b761d1ccb GIT binary patch literal 4675 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 XSMT+fDBkP9&MJeatDnm{r-UW|*fu-H literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-dimmed-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-dimmed-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0174bab9cdbf68a6a6492bb247672af538c3a924 GIT binary patch literal 4610 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbPodpunn zLn`LHy&Je^s={_`oqBan>6}A5145iy7UVT)NW`*suWQ;P+_IoskBM{F z3nu}l_hJ>Qe0#ba1xtbjI*thJwOCO6G$u7ScaimFw|RPeKC;4A?cuB6|EyVe@A=dJ zHt*kmI(_={pZQCtUae+hVEFNW`|JI-K*wy5cqGTbpmYStcIl{QVCWF|&cGm`_>Pf5 z!RZb&gG0*>c7_IyLVloA@hd!18g2XV%B@cRG$96t2ex5h@9$o!`j2LWe9)cuGr6TV zmpr$re|ot6^KPI6igVQ8T~GVU{`ti2{Xf6i{Csw2!;X~<3=O))(R@Hh>Davse|F`g zWlh<)_!+kD&l{gc*6*LX{oLvOGxF!n{hR*mz(&hYD}Vkz)XvDzFgN*N;r{GS@m3Nb7AGW{fYPfeERdw{PWe>&$fCOKR$EE-v58uzE7Q%wUyV- zpTD>J+0O81)6Vkme*WnFbMN`{_RpPNYy5fZ&#(H=rFTDHRQ;WiA>ndZeA3pZ=2!Bn zO7{K#QS<%O!|Tt(?PtoLJ+siV@^4Js{HNvmb_VI^&fiBD1S9?yh~hIe&Qi+xX8D?azseSp(zr zjSP3+Z~HUi^Jo69Gvj|dyV(3}cK_Mt2;STT-{f=Jov9_VzaRby@qq z9;>O@2(;$Fxs5;88uXvp*niIczsY=i%l2vMf2}_sF`b@!=F&vVvI4*TM%!&{zuQ}v z+Z(ux+wp+xx_wjkIkPk{^;H}XD?k0QEec0+>(G5ajhTVrPyVO#6emlf)9XZYc z;W!$O-{A5muMoRzQleILO_JVcj{ImkbPoyF6VS zLn`LHz3aastyJ>B$LF%gOWsMGGYO7*Jj04>bAXal%K|ee5uSA|6T=+eu{ai7R1#R& z+N~gPM{~y{wy2{Hf?G5>T$G%|nXRJw9`8?^C0VrY|6X0a9!=#E{q<4zfB#%_@AD_? z=e5(~<85VHu`k(K zea+tORXKe3OwI!xczE@hTf2*2KK*>H{8|70`M1~4Db7FFH*;t1yg!F)zIT6KKQ+?U zcz6EHg@1Nl>J6HMr9W%p$UA_B`WF5|55&OM+ z=lhR8FSZ_je?Gt7%zo}n=Hfq>D$7gljE?NHtV}Dbf5T;d=JWcqp|4Z-|C{h`+s}mm zb1KU6Zr$-J$sg! zfkEfzyx-5C9lKkc_J2-<{T<8a_Ad=@J}!Q+sxtTeoG5!6i{tm^d;c@Lu3HX_=Nnej zWWLwW%eOV%ZfEoT-OS73=XL@EOS$;RBJKIJqUXqe*Uic`$HyT=2iJ~!s4;p%(@R3rvM$ExvsJ(@AvDP$L}gj zULIy(IB;#_%)3Q)TN4==8u)Wdw#($NV8xN-ZhXkI1Zw!N_8)(WBRXl0Dx^*p9}UOR za3sHi7)?E+sb@6xkk+Ug%`>BUW;D-?<{84>uhEiXw4@jIbksB7?(DU8RPa;) Q4x=!5y85}Sb4q9e0J7&Xs{jB1 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..14351c4ca89a4576fd0c6f07951c4f69f80936f3 GIT binary patch literal 4610 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbPodpunn zLn`LHz3aastyJ>B$LD@gRm%_VJo_Tz@eC`j%>hm>EC z@f{)I;dMuTzBB(>efvLWzd!r_{+wv{Y+wN1Fxmc;fx+R(qsRY_ zRsOsoV`p4_{_H#VXaAl?{@yY5`uWxMbAF#Yb1!)F{}(bltNv~KkjMZuETZ7f`x)Q+ z&pw>~Y}xDQS7$#z`nUMi!^#Jfw5O;21sY;qoi}HC{`~ZPR{4L@>UP`!X^M`#wRKZ| zu=<>M+u9nwyGHtJ&R=2=pZWFsvrpR3?p8n3??1nN-K_2RXKJTETUYt%{O7Z=#dVd} z!qT5^t9-Y0XWrw(=XQQLa;Ns}p3<^!XU=SYzR~{dUhC&g)!%{MJDe7uwDqO=mAoHU zZGPPTdGP4r_h%N{&!2zh%t6b-pL@2OotBT=Q}4I-+$r~U1()}HdG_YE#_!(tlJYaZ z*`Gb(Ez<)f4V7tR()PB zFcK3Ee!sKd!hHRiSB;iC3wIRj)!a$mr2g!|zRKeFb8cGLm>mCa8()!{7xBi1fnh_f zj>WtA^Q`C1vaYwazh#`he%5yRdF*}XCVH={$$D3lm-qYVpNh(B`^?t=FRA<1{_~yv zv(w#k*%=tN^&ib|txV~wEByEM`p;jTmOE^+@6W#tu z-_Iwu@-s6q+&&&wcKYX$Hbw>pyA3z*7VTLmh9k`-UEU3hd4~D^=*fqo1WI&D9#u%4 z5@9qPN5hf)`eZcqjHaH^)I(YuY&6e|=9$qvGn!{mJ6)r#W|BLzqXp?`K}xV7{m*!G XSMT+fDBkP9&MJeatDnm{r-UW|*fu-H literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..14351c4ca89a4576fd0c6f07951c4f69f80936f3 GIT binary patch literal 4610 zcmeAS@N?(olHy`uVBq!ia0y~yVEzKc3>-{A5muMoRzQleILO_JVcj{ImkbPodpunn zLn`LHz3aastyJ>B$LD@gRm%_VJo_Tz@eC`j%>hm>EC z@f{)I;dMuTzBB(>efvLWzd!r_{+wv{Y+wN1Fxmc;fx+R(qsRY_ zRsOsoV`p4_{_H#VXaAl?{@yY5`uWxMbAF#Yb1!)F{}(bltNv~KkjMZuETZ7f`x)Q+ z&pw>~Y}xDQS7$#z`nUMi!^#Jfw5O;21sY;qoi}HC{`~ZPR{4L@>UP`!X^M`#wRKZ| zu=<>M+u9nwyGHtJ&R=2=pZWFsvrpR3?p8n3??1nN-K_2RXKJTETUYt%{O7Z=#dVd} z!qT5^t9-Y0XWrw(=XQQLa;Ns}p3<^!XU=SYzR~{dUhC&g)!%{MJDe7uwDqO=mAoHU zZGPPTdGP4r_h%N{&!2zh%t6b-pL@2OotBT=Q}4I-+$r~U1()}HdG_YE#_!(tlJYaZ z*`Gb(Ez<)f4V7tR()PB zFcK3Ee!sKd!hHRiSB;iC3wIRj)!a$mr2g!|zRKeFb8cGLm>mCa8()!{7xBi1fnh_f zj>WtA^Q`C1vaYwazh#`he%5yRdF*}XCVH={$$D3lm-qYVpNh(B`^?t=FRA<1{_~yv zv(w#k*%=tN^&ib|txV~wEByEM`p;jTmOE^+@6W#tu z-_Iwu@-s6q+&&&wcKYX$Hbw>pyA3z*7VTLmh9k`-UEU3hd4~D^=*fqo1WI&D9#u%4 z5@9qPN5hf)`eZcqjHaH^)I(YuY&6e|=9$qvGn!{mJ6)r#W|BLzqXp?`K}xV7{m*!G XSMT+fDBkP9&MJeatDnm{r-UW|*fu-H literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-colorblind-linux.png b/.playwright/snapshots/components/BaseStyles.test.ts-snapshots/BaseStyles-Dev-With-System-Props-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b88d684298e7518035b323bc40bb382a7c9707d9 GIT binary patch literal 4604 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 { diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx index 4e9b4db17ef..bbf2e1a6ef9 100644 --- a/packages/react/src/BaseStyles.dev.stories.tsx +++ b/packages/react/src/BaseStyles.dev.stories.tsx @@ -9,6 +9,25 @@ export default { export const Default = () => 'Hello' +export const WithSxProps = () => ( + + Hello + +) + +export const WithSystemProps = () => ( + + Hello + +) + export const WithStyleProps = () => ( {children} - + ) } diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx index 43ccd4d9077..fc454754865 100644 --- a/packages/react/src/__tests__/BaseStyles.test.tsx +++ b/packages/react/src/__tests__/BaseStyles.test.tsx @@ -23,6 +23,19 @@ describe('BaseStyles', () => { } as Partial) }) + it('respects system props', () => { + const {container} = render( + + Hello + , + ) + + expect(container.children[0]).toHaveStyle({ + display: 'contents', + 'margin-right': '8px', + } as Partial) + }) + it('accepts className and style props', () => { const styles = { style: {margin: '10px'},