From 65802fcbe2e882a53fef85a4b0efb6c326012ad6 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Mon, 18 Nov 2024 14:50:56 -0500 Subject: [PATCH] feat(Popover): Convert Popover to CSS modules behind team feature flag (#5300) * chore(Popover): convert popover to css modules -- partial * chore(Popover): add dev story and small caret refactor * Create three-falcons-compete.md * test(vrt): update snapshots * fix(Popover): format --------- Co-authored-by: francinelucca --- .changeset/three-falcons-compete.md | 5 + ...Popover-SX-Props-dark-colorblind-linux.png | Bin 0 -> 10020 bytes .../Popover-SX-Props-dark-dimmed-linux.png | Bin 0 -> 9790 bytes ...over-SX-Props-dark-high-contrast-linux.png | Bin 0 -> 10335 bytes .../Popover-SX-Props-dark-linux.png | Bin 0 -> 10041 bytes ...Popover-SX-Props-dark-tritanopia-linux.png | Bin 0 -> 10041 bytes ...opover-SX-Props-light-colorblind-linux.png | Bin 0 -> 9635 bytes ...ver-SX-Props-light-high-contrast-linux.png | Bin 0 -> 9757 bytes .../Popover-SX-Props-light-linux.png | Bin 0 -> 9722 bytes ...opover-SX-Props-light-tritanopia-linux.png | Bin 0 -> 9722 bytes e2e/components/Popover.test.ts | 89 +++-- .../react/src/Popover/Popover.dev.stories.tsx | 38 ++ packages/react/src/Popover/Popover.module.css | 208 +++++++++++ packages/react/src/Popover/Popover.tsx | 330 ++++++++++-------- 14 files changed, 480 insertions(+), 190 deletions(-) create mode 100644 .changeset/three-falcons-compete.md create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-dimmed-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-tritanopia-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-colorblind-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-high-contrast-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-linux.png create mode 100644 .playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-tritanopia-linux.png create mode 100644 packages/react/src/Popover/Popover.dev.stories.tsx create mode 100644 packages/react/src/Popover/Popover.module.css diff --git a/.changeset/three-falcons-compete.md b/.changeset/three-falcons-compete.md new file mode 100644 index 00000000000..be14c153e1f --- /dev/null +++ b/.changeset/three-falcons-compete.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Update `Popover` component to use CSS modules behind the feature flag primer_react_css_modules_team diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2301e3f2048ef4a85b318433ec26a9e59985d9fc GIT binary patch literal 10020 zcmeHNYdD+fx=xo_wRaCxJA;Xe#s*xEX^A~VyJK{1VKk(5lO7$VXjP9d2!vx|&i zW~9+lvZv})5_O0(G2=9qqKL#PQc{!<#|Sy@&#bk7?fq|G``T+=Yknm8^5x6-KF|HW z@BQ4*^L*qleB6&7I&}yH0v+}E90~)0w6=j4=wJQ>ocS}f^$PHDAQtBS8HhP(yaWQB z0eL__{W9^%ssKU35Q1MTgd|E*g}7zqa4R8Us(!Y|;XlkTJbK;sNlf;}@lUg~kN$~q zcE)VeEaXPFVXRNL!2zS{H@W4|rP6j|=>Z+%?lX^mJA8a(T;T9k!Wsw8TE4Q_q)dHO z7diGkh_w^k%9lKsiia!|Kcffj`gU`iuM$X$Y&Gi3iFO5GDrl%&e1|7=g(vemqaY*j;~M5!oim9Xzm zPVCPs{?TE=Ou((Ck&;k$jMiWOIB(*&^RXjijUy4{F$qUN_eTZIis>!ewx*h9`$C^; zf>o!%=UMXQkE>luSB6|PzaF-2+YKRa@)Bn7f{l$~bahJfn!0@m`zQxMbKQJK(IIoh z5boc9;pBWWZMG#{>)z{z)!yFTK}oa_&sHz_f*FGE382I$vW_(ss~26}zQ;Y?IkgVl zn45vr(CH~35$YC9K+HIWBo;IE5#deY)^cUFk9qD?g2eS@rVq$*(!P$9YdYbrA>v0+Ae#uhY@*((}LWd(=qb(=${?4cT zZ)@(+9bg{cWWrBKC2r1|&lxNuQBzI_trD4V4dc7q`^;E|Aj!u58fggSEv74Mb3n%3&fx=%W3 z?+K-rH-@t?{R_`b9{oV9>gXlPR#Zf-8E0VaN7GJ)+I8PPfvKuvK?V8UZCM%R_WCI2 zs)Ak=wi0BsqH zy}7t5U%evXY#hszg!6jatSjfizKTo#jz$IQfTp8ZGmm?EpHWy=X&D&<9@9nOk>Y~f zM-I|^8E_PjR=6bJ$SRc#dQNfY4F!gy4)JC9Nhr1Uduc>n@bCx}lMh1&ou1pNin`JN z1qX+mES30(BePydiW{hmh;0-F*X&Vob<_|YXl*y?dU}ZWVMA#N6fE(|s#{Tld1V%ibq@lSwDjQ=8coxcFI6!rn*W=q&9ZXOn)S zfu0@aDKu!H!@c{ifp*ZuT0aiyWr@H*yFZ#+EIa!me^Jt#0W0+`tiOpCAb6s)IxQDU zqP%(EWo9&xRZN$6{d3<(C?ZbC^lSJ%IOJfw2|hJg5oD}e(^$pg4UF2qmkUd?(~&2; zR3Yur{;hD5xQU%n+_7RUR30@hmL$x-u+99Ld2s7DA`SQYp?1*atQL#2oEXp>x28*( zr&v(x@e(Rrj5F1brtL!TKk@Rn9NHpN#Zku&5UUZxP5DPA7SpA+&2z z%f1N;O|L4CPVlR5uE0TW+%~?Vsw{4<1hfr@>qMY(fJmV*IC^n&|76CD87A z>k=pfUw-qcTX#S)_;lyeYP2Vm!g8ZFP%|D;1CEB_ZBW!2H^sOWvWVHWl>VquJmwv) z2=o@|vW}qY&7D2mf8Q+*Ki)wH=}2E>;_#`M3cd4Bix~FEhbex8;LWsxFq-sGK3+_Z z*4L}#F!V2pQo0UT0t(7MD;ehJ_jNX)$Pbqb=G~pKm5Af1KfUS=U2>{t?M{6(0dk= z^7hWV>W_CWFZr|I3sAkL*2*`(Ktsv%$F>~8FkArIo);aTC$JWY8O3L9ZV7n|3;$LI zE4Yd64dF%j#fO#flE-_#5Z7BG$~fEpC=AnS!on#ztFBQJ2f;2{y-C{=UjQ`?(@?2R zQQ)W0!prz}S2edSh%b(6KgQN!#dkfQL!n|C0>MFZFdj#OF1##$DAVjuB8NZ)dI)wAfpES9nw5Xups;>%MCz`z9~X4_4XqT|tLPMY$#^&aTtG{^I(! z0afSGMX!$m8Y!7Z_J)*W>Y`=Ek~w5FoC0uVTh{R!!)5i7b*N8o%!{h7fH3bH1pzwJ zUoOgHW7os$q@0Z(Z%GN9$q^^gRp&$`vv9>@s?!SJ;NY&P;X~AZ#2hu8XXTD*+G6yZ z-I7Kjw+JZ`-Omauw*vs9f}6MI6MKfeoL59I*iEXC03llQQF^Mg=6P&*!b_(i)1C61 z;!&g}G*H!~jwr7rEKx`8+@Giu@4ConId|yyFVb?|bBLFrjq>0x#e?;3)Y$w zAe3%avS#wHk3u0(e-zx)a`-4#1B9MSfix}9TYt|91OSjX;HPzoiEQI5%hi{?ufQOe zE*q=wX6G}pR|k%TMiOi(XW+hHO4!`NV|xRiQYDbHyMty z>%D2Pv2NAR`_N$$Zbn0`*qXYs?8!-fUV*1ujCI8ZE|6;XRN!Es!2%EK4>lOWLZK58 zAp{r_>GIParXpcs{+Ae4{B^*pY`L^99P34X*Xy)`DnD=Lkl$jTrD6i%$r@jUyWBmu z-Ly|uo_>)~t3Icdr*0EbsIB2*Yy&>_cr_hLjTu{HU1I3jQ9{u$)3_2NQ)gMv?)~!h zXZxx{YJ}d-@tGN#tWAuYBu;V#fq~gLtezt1u_Hb~Ur!HMPXH;Yu1_PONbzbQl;Q7c zQgb!agRHWV*v>WOFaRj(8CcDq$*%Q105Ad=` zZKfl?hz$`>zo&3RoD0F8R0Q297=O$#6&7)`8ccR@B)#<1D4%6s!N4aSMA*5x`+-PE z^DZ~iest$U9fe%}bR{9Qn6Xvr20bC=S@o6^I8AKIDI7t6ewrLrkH-cg5!BqDqkKc~ z*;@_Kz9>7cA~W%YRW2;r+Y4%y2KRhiB(4bbqoJUd{={HCJv&Q4tF(v4T@yr!-4MF+ z7HV~gx>K6N*oK^s@Qms+co`5u5VcGfRda}s1#V!rLlQ;Y%Y_Fc|VWb_jgs$3g;ElIc zv3=8k@H`)ITXcsK8gJv+3(uAtMh0dBN~F#_l2PfUlieb%yzSe*RMH6OLT-$j|0e_C z$QU)n(G7{3p=FFeqGmX~14PfVu|L})(6Yo>CI(j%@h^zC{95d?(=WO$p^fA0B2X|O zHXEYi^Jr=JR-Se%uM zYc~%sKR-Bdq0t*GITv!eR$y2{^*A9g>he?J|q@)o6&qo zbeEFxwHFoEQdgPi6_|~Og|Mh4ynyOu=hK~UYo9Z3I!szU?Pu{ zV3s$hVULM-)}B|_7>2|iPfvw*w~^uE7^@sj+ihgb;9!(y3r1<*mBTmX?Z?A;4$Iks7+Fzuhe>Y zyo8&v`3}cPcA@vZzw-da7-T{z1`byfbXd&19?0gGj1sE5{2k1#{+p)mH}lI2a>pOjh*j6D^IU_?CQDbWZyWGwW5<7-jS6~MJb0*% z2S-mM+x7xqO*u(WNs>c?!>ukPpUP6C^>@zn&4K1=_O86qxV^;1Wp^1qcG!}XT$S#B zFmEirtSLq3>{XzEK=%sW$^2jsaFsg1$n40DC(P z@1;LUQU;r72`|Bne_!!n?wK*9S*~Nk~ou70yS;@bb<+ zA&enXAQp=bPiWGw6{i-fNm=j$SbA*k-e^PHM#WvL+=V%Za4(AfwL*LROn2noK>sbk z>^^7AvK;ZbC8y@eklqN1e)N;HL-A&7WPy>K(! zyZvg87xwE*l+YR4*ct3Ve+*@G{z6UuPsqYw>&XKiLD@Gw$uRvcc`5k(avKAYn><~u zE8qhpdm&tT8ayYrUJ6D(}!k` z?fSrps7Zch|rMP&yqRS?}bVKPz zseEA5)wQG%xi*;FVMWqhd9TMtvFie6#i!WK7%vvz>AL`I9yCnyijNhkdd{6#c25-) zQ5z~)MI9(TPK|LqJ{H#CnN^;7R;M-H{Z6W7em(9*V$;gP^C5B8+W2>|*eHf{+g8hE zScCh@8(0nYS2Y$t$WK)ly4-mX!-f2m$f>c)%d4UwkA&K}{30q-1X_xA?;p9ArOip7 zxPlcQ)3tpLPP}(^cYe>ATgxv5Bh2PzmTH2L))S_pS<{FsjX7iU2e8w#hV!4wek%B#kZc&~{4O$KV$$eM7*K-gyk$*v~6@4NE$?OTbUl@C7j#tZuB|iE^)U^!=@{TAc{+-s^4-_7m>>B!qwG2_B|9zq^tTF zn<5gCL|EkjeV0scd+|#nQQVla(g)cbq@3RUY`@+YwTlvNdkZzGq{UpioJ-dn7H(K{ z%p){2LX85cV3{i2HS4A~%5qxK16a)}dsP>yFJo^DNlUTSZ83MhV~Q0Wq`pB=VqY`) z1CWbW5ovaBO*y!>+iI%*#Z)~@s!e_?GS!UHHG6c;4py_XNGGT-(N$5;-frL$gg+|F)-%B&lYEa)hw;BZY0!Mvtj-T{q=z zF+`0=%A};F)((ZPQZ3Z zOan5GM1Ah$<<$va(z37mC31I-gjnmYdT)L9Wv1KctX)omk z*-B;u!v=sHOUqSS;oGj<hU~K8n3%tvIACJ+T z9-a?mVTlKo+e6A%wFu(7Yr+Qk#!NfGRI^)6REpTiiE;JGZ%5fXXyi^PGQL5j5Nb;3 z>g_W6_67ECCVTf9WV_23%k4DC2P#zIo$BvYYpNNx>Sx{5DWs-|z4HNb;{&9;WKFSL zt$xmy`)m5w_8^)ZVM%nw&%0&QbnImsil0B=s75FGsVXtKyKP)n;?yq@D2A z`Awmwm86(Qs^{}0JIaG>MJ0RrnsA4KT)(7MlwV7bm55EWK+|8aMIW=5^E3+E_Tuzi zYtvl@fRJw+alt%sjX)Z`s#@qY$PsS-MJN}l#iTu@Y(H859~tk>6=|yQ^3V(^yP$N5 zK;q~}KM7wGnuC6L8G^f5ILHLZA?iw@wT};Q^f%gQC&(Ne7Wm-rEgG7eaX=+rZ1U&( z`vpRA+zYl)reYu(nS?XGZ+HxZpcbf=vn7848SLk=VRY52@ZP&^sfxjr4qPr@=;(ck zj-76f4L3|1BJTW^-g3o&rN`)duQZbr0$`}-J*DKocr&D?Nh234v=>%p(^`Jk$U)!O zI%q2t`Yj-OS%IPz0+g=Fe>Yu}&W9~b^wds^`+*Pn4H!P&H`IThb>mV}>T7Cn05SeF zH9qd->YDPmb^$*)DU?81+`qoDl^|vfrAjJRJb`fha7V&+J)!~{B#8p810%_^JqE4O zHH`_HiWNp7Hvb3EHy^J;##;eYB@#x)m24D4+T#A+eh-Al*4`fm{DHtf1p<<fj&RJjMu0%W?EY{8a45TN*iyJHo?<2;58UUA@N4k7{nWCGgYFf z$yj5I0yDAI6i|c4TSU={;srIvco#`TA>J^EH$>okcFmbTbI!jxYx*NBSgiH&zP#^# z-u>}P+s{|oM?^S;UZAP`9B+@HO_0f7!~03XmF-T|&0@@{bhz78aP<98NRJ!rZJ z0(}HJ=l#XSl(JR9g*%Zksn510t|dVoxiy;_)njcVoj^*Zz>)+*(>2yFSAX zFy^HX)k@jBx{|hU(|Bt9qqx=H@d;LYV zTBss=ux)^!pJnH%G*O;bO>`iz)A1>RzzkDYSU6Hj{ll{{nXEU~NhlDceO!J!4b(KI zR#O%d2_to&2O+k_N~N+U^3(lE!8Qhr(cKE{fzyq_Rff4;*2Z7X9Bi-0)RkmxwJWRW zs8LGO@A8!Y#m%_C9ZJ|J2E2_WY~G~@BFqA+ENX~?ll8P_4{mRu-)5%S-0U4WxswIA zZg7xlH=BsQZpHC#jpq~r2+$HM zM}71(ufeRD-dE4Q-}vCZYiQp-IHJL0ah?+%$gY_lM3mg)Ik?N#I$RyPC`@l zNWga8tz*~_UC@jhVH1Yf#&&MmFy@#R7B{llP^iW*{rz#uaV*#pjo?P~Ks%$(2}^Y9 zNKsw%=(`E{9)foy{Daw$QaIH|+Y8yX7zj?lImPO^V$1^u2E!1B*`+?xC|gE%jP3jP z{Z{lkjqKy>ryzsamQt2;Ki{R=#Ci+UTu11ogin~&TKLnm_^m z++{Vb|1~EiG~q*8iia=P-I4Jy8rMT|VWx&A|5t(o60;KJ%MHo{7vDNh3`F>dEh4C2 z>lciP&UJ}c4rog|>l7z$M__@o<*}jQNKez{VV9FnaPZ^wiZ9FyfI%HD$S$eaJ<@<> zE_&Q8%8>`eed2V!(0KXL-0+UH<(k#f-{u}KT_=+!a@cNzotr6v$*1yfF)L3@CxTug zn_!WMD2y-07g2WJa2$TJjSw7FO*bg1W6#8AHcUR?^f7bz_b;5Jg29#Oh0{HOP_IFU zhjYw_Rv0hcWs?&IUcTI`2yggTQ_EN1dmPPor*(@zMX*v+cl})$_wTJ1BfujaXsTo_ z#;gPZwnq+RmH9A5b2pp`ED+4w_r*o4WzyC1VIzAaA2qRHI2}7?=vR{xU6wqbN-pt% zPl2~V*Q~XTN4huYF2_WVqL)N}k3QNdu}YjeR@eJdGGp^edBxM3DQ+_N$HfwRZ*ob0 zP8GR|G(soDHmK$myj?k2OWwcJT6+z$_B7QK1z%Z@@+zy`x)p>H=s2pbLeZ8HJ$%c~ zjNRI5w#Hs`2%1!Zd#Qlf`d@1+OL&?5C+UHg$dokI9#r(AqQ~yT%%vByFQ4lLoFyLR zxyHAZc^+w+AcyFq5s_46oR6(TH=plvY$(jV_1c;4;WOJyigl^KW4Gd${*FRRtz|kv ztiFRtxL9uujFAM`J;^Vfaxrzp5P7Xo*q(!w6f%EU$IQJ{yj;v~vLBkG?#WMY~ ze(OO$YE~6Vp7*(ar9PwQ)tA@(l|;-4_6S)1XtKCIDD#p(*)g})GW#AAh_Y2TLhCQN z9-EuJzfA9n?J3Jl8u>Y=38u}s&}O%s-m1C6R0T=(Iv+-mg3mKVqAn966%nh$DjK1d z$q%WcxY17uXFj6cX;TGAMiic@JHwrev20sG2mbboXbMfXKQ2uX%a)o=$XiK zsW!6CA}hUYtqnR)WhiRzv5c`!Hr56uVY4pR`dzOcx;cGP{wmeo41JGvCK6$mm;5FY zOG8k6KVe=_Up>)xA8X5VGvYC@hYT5;*nkGHAGch#M;d9B7mO9- zb2VR@#=%cEI7)!XVaDYB!Y<(DxNt0oI#SC%aT1()ec3bs9VvDfU1MHVe$%#>KFGU$ z-_I;xQha(xKkzhq!5kF-+->fwW&CISK6j>D`l~v)6?`f2oO(`Hms9u1T1Ux^*j#^F z9+t$dOD&!>N19dJaZG8(nk9Ep-^cG5;@iv2-Rb>in&lq9WQD=K`pHN+KYf;v=&ZTg zwOHr}qd#ym^BJY|Y$qn1Vxxda@+=G?py+sY(<6fFjk5TGZPOkeuj6w0^Lz%*SJM z$71ea9UD5YGq60Gc4}UFVdy~WQQ+qO;9{&~1k9lX`D?-an+lspB{N#60{|Ov#szI& zp9whWfOK{$AMe~NDS*CY%>0&DxwR2g7AY{^eA2wuVhmAdJD}jglbfC6f>@P~vhHa-4%t z2?F?HJSvJwZ*VLw&2tGU!TQJd1$oaJ z+S^?t<3qi4zb+U*gBf(($~NUa7_1q_P_SVT-Jg6kelG_sieIYEfZ(-U{T zdJ11&pASEABEn82bE!UI2*zibmcy;HNG)~YL9$2DZskqR+G|W+Us--bsqBiWb&@5T zXoN)PfkVDlx|$XwBkjFcu(K4Mf^Ij)gjs}nF^v_g)669CV~8lQzC9(_J-C2D67VVf zTdZyuqPV3E-;^Kc3Z#iLUmJ&q(Yq3Yx$NT1nszf2h%qOS0L)EAcM)C~Oj+I;UjTLe zf^Ir#*}Q<%nR6=#AvQ`tvZ%UdcM)>Fh>qa8&0S`OA03dB2;JdbiH=i&^>VgKT8Sv= zen4%=aj6RCF32m!t4|bzEfKk7dJetnc!6_`TdsTcREF5%FO?U?*HIhiCuvY1`^^`F z8T2YXX=0E>;sFkp%oVXJzRh3!xCEeEr`OMQJ-G}4LtSmG;ZC@v$I(=K+F@f+gpi0F zaD+2ZZ{!cCu92qX`aUv0NL(9TZ@f1gSlLIlD+X9z$g5c9RcE+&tlveh74^y(fxFbV zRS@Na;XCk1n}K*tC!Bk|pMvm4X;Qo|j>5ZJ`OaDC=$;_%5o2&2i63~$^iN663c1C@ zrQ0zeB)Cq3NRG0#km^Wotzl3ZW9xm!{d5aQaY-&87(4knr<%0)rDGIfVTeJR+=%0c zUh;_P3mrd-n_ps#>B|?Pg{;&Fu|Bx&_=&mGwl&4~tG}cAHc2ICGF-%b>#EqPF7TrNQ!Qn@0g%qe*w=9C{!B>Fz`MSB4S0>6dXN z!l+e}{d^EbZ{vGffHyh77n9HPt@7R_Hfk$LTG}iJu}96ZZI~b$$VV4$E%C*?Du0NOdb6Y>_u_jIK4Ic$keut z{wOC~)UswcIp}V@yyy0U|97gXJx!{d+S{!AjF^n{*OkqNE{eh(2StoKgww(ZyF7u9zD&u?*mVBvc<Vk6zlDbKqB>MeJnw>uuixx1uCQi$;k^6PI zJIvr%HGAf#^{(N{Qic0=9stFJ36(UdD5}92BUtoc#3<$hshkOu+Un4tG{MlatDK!eBxHW} zYtlBfBMm6oUmCbF9_aWBEwPCXV-^418`d#!CO}=;7&o-mtma34evKCHv(k zyhClYIm=nQpOr;onw&uDw|pz}n=#JHE!sr@ECgCI5{GJdSfSb&8cZ@{QCu&qOJnah z{1W;u&n5z&)b%D_Jo!ZD6Zw;9e2y9^yZbN30VKrC@;M0PEFC^gU1i~)|**5!x+rYJIBEP?7Fsz>JV#=eK-f*n=;4~yp zzl1R$N^`xGbxf-iI`6(M>q&RdS9U)3C`E-BC*VnGoo^lk6&rB415A4PBgK<1FM+{Y zA|RB0t5Z?4wdTe7e5)G(UDHosdkQ~0?Q6>92_~-*>vq-G z(jyprnTvEFE65vRMwVDhv3I|&FKtfCq$%CliQL7Xu6S~XcN333-?yEEE*KZho;n}k z>8>n2@bYIsjA;rFARc;dHTPA(jcEuX^wP3N=~xymXe?urSDZkd8X640l>E5Orhk>3 zYl#%U5?3qi9_OcAPkzJCF2yHg{+Lsq>zrIqx6Y?EKKAf6b$6W>4TQMmyO>*7PfEW* zXvxaD))C^4O+!7V1;k?wH)J*VkovS@>sRr|{_ZJ)ZOxlrEt)(Jv6bE&+kXILD>$~U zK6O6C`-X*q7d5nwW#04yK!icXgN+OPEOH>i-8^Q~9Cc{sLm=rkT`Vb}H5Sfq)>3ac zx6X_2jgUsRuhsZB4ebBb|G)NhTXDf31R{|FZ498$X+V@QieG#_?UE13B^w(XE3t%; zqytocfW{9@3xy1NVPWBD^d*F|2Sw7)SEM)8*Po#c73AmR0BI*_=6U@A(9RNz!*R|R z4G+r_o1fN4LBNRm&}v=10(vwKw_QdgiJ`Huk|DY834DknB2 z?-#p2QC3&S6FyK*P9|dUNGPQJ+~+LMPiZ$2XsTrT z(%9^%R@(!G@WX!*@6ylg-lpw13RMDOG9V41?8loAw#SG>!i@{U?F`OZxu(OiZdrzpmO;f(8q^9m!64&k8R9jGgk5`34jY=pp6RL%3 zJaIiE6Vk5i0u&Usd7C7yP2xw~;Anm|E;m@6McTqLS;VOt{NuAHX%wd*EKc9bZV5Y;1LJ9~yTp5d*i8YH7Mt++j)Z{MK9 zZHuKaR1t9*r&(p_d8Tf>uFPDr^N-TJ?6?KntW;0vh2{%k;UU zG+-BPJ4v+N7tyV|GZOWHP?^Sg(~>z(T(9*DstG_!U)5uPdWC(M9&NNf*ALn2fb4V< zU+ck%>Smf!!P)p0wpkyhJQFZ3hG~AVOYd*Y?C&>^st>M0ZvAuF4>Vi3oW+O5HKxw#m&*F`h|6L<7f9gJb(XoUK?rmtpP6rH@9eXxCXUp!(TRx4mi$@0RI7V(W% zg`J+Rd8-0Ai8h5;)~m=kr4iJqT7+A7^}^gWot(`^^%O@{U+mFWv)4~lIKt%4C;{_3 z;T6DbQ3tcLvx$nDy&}lY{I+HswjP!t7*}oSWxQ@oUxDpS5M`F?9pY|U=C++`-Oi5- z+sW3v^n&c36mG?7CS#qHul-=VaYA(*O|9e{0b~0YRL)Xia}w4w%pE_^@ZWi<1$*;% z;a)xG6;3xL3Zs`fk{zF_3%d4|parkl*_qGq;LgrU)7-gO*miT6qKLRD!>KF$GuM@z zwKR?r4N*>Th|5)+H-?$(jx@#3Bo|j##r|>VrLS*mSg>6`qJ+2s)rf_AAuwef5g#nl zaMx5^J=HVF4&P4mJVc|e${lW#LpAcD%&j`jZkT3i)G~eL7)RF9whYw_3Kf$9(4?1_ zR##W|y~-M5xi7~P_2ma{W_hmP6>g1%;5aqefF%&NFgu0DZgb2Id3_6#{zhD?5e9hf zQ}h2_p?AJ&%HvBk2J~qgM_vMZF$mOkGx2Kg$LperJ? zbX$lON7xI6!rY$na#1N&_l>E%lnMeJ@$=(_gvcoriXz=fyYc#BoGEWKIwLW$HZ-^{ zJ7iykuDW)k!3~<0z8{!yjo0IVR>^PG*zcnQajj}Il~UsD@xkAk`JpxA|0Ac{7RwbY z`*ON7ZRlSA!awA6T|GU6T*ZZN5on^NiE1^;)i#NhGR=1^)` z8T+rp0Ql@4=o;H&ER~4Ev+hq5_1IP=&4K*wtsA_A%{Q;0fani7^GOo+hp01fcbmpXiQtUmAyQ5FM^ZqEj2r2qk^vmnN ze0;hN9qM=Z?%f~JH5c>lWtYDx^tQc_XM3;{9eSGH^3j1m&L6U{`Jm{)EyRt>cg|Tq zc}7RuJ`mx#80{(^ztYW8`3cHN=#d*7<&3gc9X_`zmAHxec+G-zKFc#8{wok@ay^7j z01STe@C*4C(1DK_uEaJtUkIZkjtO z^+g-$$?eK;uvSKDdmEh}Db4}5neurS8m3piS#RImUMVzi{oc%oYIE0d@7QP!zHYnd*35msdr~^zt@yyE?+jum4u# zSI$;VXpx%NBpH&uQAFIRYQB07crVV%n?`l%7*5TEX;*9HAP>`ed|xz;p<4!Pwau50 zb03%iM&F3n?_!Q*GE6wvCYJM>gePpzHQg@Bp_+OgPqukB8=wiV$R_W^N6C(kc4HLTdAZ zJyvA??(fNbi7y;^g+%Ch6j11@#KUg;H_FW4UAsm|nA;D^`!&p>24+)@hl^N{`kYIm zdne_YWuswNx)VgZZp=I@CV*Vb__m`q0XYTo(fc82*3h7N5$aE+7?L!TLPyXEX4h^5 zk>!F+^d{)9T{?TB(_s20r@)V2f)6$Ggv_<=?egKF4`&y==GTqJ-U3|q1D7=6TB6)h(?&}h9PLeC;CpqzQ86F-xxYmio zSCK%?hj@vg$@`JAT6K>ZF`7{s<=0zM`F$&bj5!G<$HIqJU)8D? zpVz(AdfEE%BTG$8%PRyCSf{!1ogFVJwH0xXU)KWLOoVLr42W@F>v|ep)>Uj5I zHx!A#_r)hb+;#gDzm7mu7qAn)w~2N3g%@?Wcnmd}7m4oWoREwM&xVow`F5n%bYjLx zbwLC=^pAo>4@h*Nw>e3qMkmt|NIARG+V6y~xAcHqwKcVh8tBbS=(XviF=~6tl*OHw znicj*h=AP#KSE~<0uhCh(bi$x)=vTzk*^-s#_~FSfQlT3pu{mYnE$ zn6Q!ZSQ5PU=Z{`6EC7F%kKgwv+T>JPXO}56X3oOBr4CgXZ;=Cko@&=~LKc6~!q!&W z1(96b-I;Vgb$+s)LmpnT%}k*E00;JIroVQzh{mYPzVrfbv`!}nUhO$tJ(!PAO@+-# zw{=VfcPCt&Sp9q$_l6wjy4@#R^tX%7JgheA&=`cBlt{%`hEen`3o=xDxMwJVa%&B$>Npposkj2rrp2}_tGgI}4u?Cq7L-}kY3S;3 zujzCMs#3tdw9FNCm|*zQ$zWCR3(tT8n_SQSogJqU0$yVL-g(9gsJ-TkJ)U<~lGgP= z;B;&W5s>ozn~TscZ^E$MQQn>bZpr93QJ$}US4O~No!3@7Bi8z*WZD9;tETnTyD2_R zo4$YMiR^oTNFOhmkW_TSv9#V=Hv1tj*urM9kS`WvT;Ay`tzUm5CUrKPx5|gsRGvGN zfP#nj08zZtZ^_?ZmbE;6v^_+Be5y=&M?01@<8p)-qzvV&rx^=f2}pPr4@-%6n(b*O z4aGZ=Tcf*eL{SC5>5hK_%4^hjE}KZ!cm*ZYGd4#<VpPxW=gP(V` zId4zr)6^3ZNOdr{AO*3TEIzO9Na(qlQ1|kSe~XlFnLIZpV?Sh5X)APf8*e7*RIgO- zoTYsWaNL`BD=m+?UlZ>Si!YwXSxJ~d%#oPAJ(c%E;CywDdgEpxbin=cXvUj-Ls;2x zmDq`F-yMd8!$XnhaU!M`5df`j=ZLSCxJsCv4#&|$!D#2(kzEOg6;xZl&_1P#?Ii}$x%c6B6-MnZO4U<{5sK;0Jt+#0W_G#uO4r{S{& zc1K$e9l2oE(XuyFx@bU(Q7$Q~D-IX0kUH)=Qvo89Ih2Jq&~h_Unld2UqtL}Y#W>?{ z1EOjBCZ32xT(_USBt)IZL96@N^z0Z=#i~;Uq zSVy4o4;I+co*R)Ft5IdsKb1YbOE{PaWQ^gc7iyKgLX<{^RM+U?jQ~Ydb3=}$$M0Q_ z)A^K)hPBE2l{@lU_I7ppMiRnC9(pW~h9nQUg-}v!7woVhCy9)RUXO=xb<1fGa?xDlfG!C1^>1H$5&G4GZSJlY|G=-cW=-(`uBqB#0+o* zGZ9%R`=&2`7|Uk~!hU?dJ`%2wVKfMtlEXBgjJo$LYc5@Qq zd}vZqWmMBVK$SZ?enpc)n&QuDgGLv!L>zLHxSf>{HDbwMx*X(;#!_OrG0~3I4US}T zkD5uy8Txq8GeJ1l#cC2!*HMPqjFv&{Kou?C$N9E-D_sBu1OwbEqK}2cGoq-By%^3Q zHmAe?4{Fmq`*2Rd>($Cc?=ftc%5YoiSiz%FKH>9BgL4To1S&p2mM#;%AF_A$UXZN`}> zXr6g%TopCDfXcAVz67~_ihqi4-fDxu45y*aJC$Jrjv*<2Z&wKz@7SwopGZ}4z zYrF)DM33exyqjs{LUd4}goJR;8@LkAzaYG5^?TsxzRVi4Sl8PFZmP@#&TGyoKN6cR zU|DvF;*4LK+r$PBRimBVqan9j5k%3`5Z@1Blrp-?@=$ey&~(5?J?pYRBYE^{NtsfO zc5Xi^F^lz%S~x(-seB{TM7@=InG7(S7AThMVqKhtJq{66=o`8dNWLi>Lw}yBt?lV_ z7=NoQ2}UQx_2Xvl2T^&IU}fSsv76t(Yp20dH^$Y-k3ikeD#3nzlwIo`5r}-KDg@T@D z+N3X2^ReB4Cd3B#`Gl?@uTkeo|&m2SQ*&okuDUJHuJ(XAT^-|MqRhl~ zw-yzjU4~(4>TW&=^fozyp=MYtFj@w8N~Iq4(KVwx!(DBI_)7N4q2oZg01%oiZmFS; zWpaI{(z2^e`H~{dS{|LX*59Wc^gYs90~?5%J67G{BnCpP2*GFB#kZt;^E#BTumQm) z(bL+5vLc}Zd`zN#>ckoNv?S`!j;eg;bB-7^flmwh80D1WjSZM9%Su?x{6f;E`7!7$ zR3i0#5h6(mN~5nGy8vCSv(-Xs3fMH$f<$`HrM04}kcvVK+^pk%jWah?t?pZFeHhd+yme3CnYqSIk(}A)9dwKe6viRdS1$TfdJN$CJf|h8^?mdLl#v$QjSOf(C zn_tI@4zB=iofvsyj7p_i_Y_d}J+#eQK0Vf&&l6YO{~G{}LJ+ zH#BtV{3LQWL2vLS^ypnP&bEpSP=%eO!zZA5VQ6;QM&d@JE=)8;vOD`u!;5TU;qahB z!YOhfdmKB^ho^it@fae2DlFTkpb{Co0y&d}DU}XtXE~*XvuELjHcn{#)nQvx`mnoh zu!+uj`cEWS@S)^h$-p{S*f$3Sj(GRCM2 zyO?vMr7C|^b_vyu+r}uGJ53fgD&DYWSAgm~eE7@}?O1e%BPdM{L~7m0eErw+UCXKv z`Dn)Dg^+kJCLk4GAswGEMILp!Pyd8Sn6ZR&MK!dMYmfH3*Cd6FAinokY6~;V1PvjU zt1oXBYP4RTQG|uBpBC2MldfEk&b28=AR9sYN7`iVO$A8kGX<$xpkGvUEx*_vvL@^$ zGMu*)Xs8If$269lSfw&PTcHYz>qjaV)or0gTR|5SQa!lQ;o;{GGT?A#v|?}zbfL0p4h5zZDF`$&1pQi}=XTw_BB;C8mCv16J{tudn|LFOE z0==aMEqCgM31>~MnrOvbjTB*69HluQw!E=RK@bzb>8qy}Dz;rq2ek9B;;9L@o?e;- z&e(7yt9v_h%!Tgd3$FN;x9+NOPkW}n)hGocwKBUMS)7arM~fQA=0uZbN?Zkv&D zm9AV&49}xFX?eOcKYcMgo-j7n1tBU_9xZYyXtM|TQ@NaL+*dlX=&ryE*j6js+q5F% zB@9N1wkN3BRv%b=xp~h1l*t?UhT-^!1T(=KFPNs^WdBAJR`7v~H;{Kux*I15FlDiz zZgW*(kSivV#pw$bA70yR;9*ChjhHgwi1-CyeKIajib$XIDgJNTwy5k3xeTVv6cSZH zA8`BZJyrfEvBv6ieu?blD*>uFwK1Ie^qU*D!SX>M+gHx%UNs#R_4t#pw=XdE+6 znH%d>mLpSI`Y@Skgn~eMw+Qr%!Zz=7ygSp08<5T1M46&X{6{oySug8mS=BLjOWNkH!j}hl$6&tK>k2UF#rG|sT zi8RPBmtvq8Q&2PDJF~D}sPSI2K{=Eg$uHBF61BvN9)rA0 zLnBOEE?%aWPm0ZY1^MPFd^iwP~cn;q31ZbrOHHzv@v zHpRv_bR=`;$H3abnRtS>mCZ4}F{+l6+msU2vX$|s360$l zaCM~pIw4nmWPog(t2Y+b8eq#WyLTq1EC%Jn6k=_5WNHC@m+BgU3Dlx-TgjT$8NieG zjE#-8wzk?-H@E8%T-`)gkT*<6)_)C08iNszrS1b&tNihfSinrc#5Tp0sU3;O)#>9) z4EXg$7O>~Xn}!^1nNaECb(ti6GI55h$%E;wV5{%E0=;3zSN3VM z=>npRtapUN^^akiN<~IrGDj&fczQ?mHv#htMDk+U)si{(p?dk!9+UyC@-X62tL7%- z$2Om6sz?)_B2JlPyaSAv6IYA4##aJ^f+&gC=Z?gzm%vn$tzu=4O|`)A^d3w%$6W^- zSwc6>5$lpAe~E@qh8dsl%IB)u75X(4@v;cBh3@~4*4c|g z;MBKwOaX>_BI^TGz+Y*K5ch7J#RNt$z+mb6Bo2q;SGW^=GCu{v?o__}`b&bMJzm5F z{oJbH)a%|_!7~1H&A1{mZC|anM{Hh(TxXED5|OFs?gIez@mD4uO9qh-2??+ropA8$ zb7H-y-jy&{i&9UT#J#)%4>-|$`2gr6sSvDxr57*d+7s3K85cXVoTgZz`=J9r1AxL- zypXHZ5PfkwuN9`|8s0qoyvcgL?}C#V=)1K(@ye4U9K9=Y>1SAyW_5EE_1om)2oo^) zmP+^R6j=A9qxstA2nqDfx&O)O{!#!@QRz<4`0zXkZ;dBXd< vzDM9a0`C!ckHC8b-XrkWN8q{9)XX>?>i+G42;hrB&<~z|-_gJQ>F56diB1bc literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5f048b5371e9a7ab948ae1eab23ff254dd787f90 GIT binary patch literal 10041 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-tritanopia-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-dark-tritanopia-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5f048b5371e9a7ab948ae1eab23ff254dd787f90 GIT binary patch literal 10041 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-colorblind-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-colorblind-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ed864f28fb02dec3e7f74ff06b6d95b9116b42a9 GIT binary patch literal 9635 zcmeHNYgm%`wx?;QGoxvyrRA-mQfIQvvb@VQ12T<@!=$O1I_h|-OfyXs6q<1+QB-zQ ziCO9nc41yZ^DZK_y=~JpA~glXOM<9?ia?0Sd7ZuYm-C$G*&ohx&g>6;;PSk@y#Mw8 zt+jq@t>63Reusc>|8(!CAP{K#>2ILlgFstXffwlGkANfFpmaCjV@t~S@UK8m1}#J& z&_2*<=&6A8`(oau+89yDtL3;FhC<9$|5o|n014f{AR1yRoFpv~qm z*0^mL8&6T6mu5g3BzrJ4zECZfWW}O4)I8}qYJ7fm8i!SK;fi6!F z=)h-^Euej$BpZT2r|}pN=$o&&TR~s$oVEgie%ql0f&Top<4-{^vOvH=jb1 zWs1@qvAXh%!5X6~)Z9IE!MYpduu}�W`PyRDjuah3cl^R^de*B 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 literal 0 HcmV?d00001 diff --git a/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-linux.png b/.playwright/snapshots/components/Popover.test.ts-snapshots/Popover-SX-Props-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..602cb939e3cbec53110069044c27b849ae648623 GIT binary patch literal 9722 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 pO { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-popover--default', - globals: { - colorScheme: theme, - }, - }) +const stories = [ + { + title: 'Default', + id: 'components-popover--default', + }, + { + title: 'Playground', + id: 'components-popover--playground', + }, + { + title: 'SX Props', + id: 'components-popover-dev--sx-props', + }, +] as const - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Popover.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-popover--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) +test.describe('Popover', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('@vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-popover--playground', - globals: { - colorScheme: theme, - }, + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Popover.${story.title}.${theme}.png`) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Popover.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-popover--playground', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() }) - await expect(page).toHaveNoViolations() }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/Popover/Popover.dev.stories.tsx b/packages/react/src/Popover/Popover.dev.stories.tsx new file mode 100644 index 00000000000..bbdef11e0b9 --- /dev/null +++ b/packages/react/src/Popover/Popover.dev.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import Heading from '../Heading' +import Popover from './Popover' +import Text from '../Text' +import {Button} from '../Button' + +export default { + title: 'Components/Popover/Dev', + component: Popover, +} as Meta + +export const SxProps = () => ( + + + Popover heading + Message about popovers + + + +) diff --git a/packages/react/src/Popover/Popover.module.css b/packages/react/src/Popover/Popover.module.css new file mode 100644 index 00000000000..7ddb4f8cabe --- /dev/null +++ b/packages/react/src/Popover/Popover.module.css @@ -0,0 +1,208 @@ +.Popover { + position: absolute; + z-index: 100; + display: none; + + &:where([data-open]) { + display: block; + } + + &:where([data-relative]) { + position: relative; + } +} + +.PopoverContent { + position: relative; + width: 232px; + padding: var(--base-size-24); + margin-right: auto; + margin-left: auto; + background-color: var(--overlay-bgColor); + border: var(--borderWidth-thin) solid var(--borderColor-default); + border-radius: var(--borderRadius-medium); + + /* Carets */ + &::before, + &::after { + position: absolute; + left: 50%; + display: inline-block; + content: ''; + } + + &::before { + top: calc(-1 * var(--base-size-16)); + /* stylelint-disable-next-line primer/spacing */ + margin-left: -9px; + + /* TODO: solid? */ + /* stylelint-disable-next-line primer/borders */ + border: var(--base-size-8) solid transparent; + border-bottom-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + top: -14px; + margin-left: calc(-1 * var(--base-size-8)); + + /* // todo: solid */ + /* stylelint-disable-next-line primer/borders */ + border: 7px solid transparent; + /* stylelint-disable-next-line primer/colors */ + border-bottom-color: var(--overlay-bgColor); + } + + /* Bottom-oriented carets */ + :where([data-caret='bottom']) &, + :where([data-caret='bottom-right']) &, + :where([data-caret='bottom-left']) & { + &::before, + &::after { + top: auto; + border-bottom-color: transparent; + } + + &::before { + bottom: calc(-1 * var(--base-size-16)); + border-top-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + bottom: -14px; + /* stylelint-disable-next-line primer/colors */ + border-top-color: var(--overlay-bgColor); + } + } + + /* Top & Bottom: Right-oriented carets */ + :where([data-caret='top-right']) &, + :where([data-caret='bottom-right']) & { + /* stylelint-disable-next-line primer/spacing */ + right: -9px; + margin-right: 0; + + &::before, + &::after { + left: auto; + margin-left: 0; + } + + &::before { + /* stylelint-disable-next-line primer/spacing */ + right: 20px; + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + right: 21px; + } + } + + /* Top & Bottom: Left-oriented carets */ + :where([data-caret='top-left']) &, + :where([data-caret='bottom-left']) & { + /* stylelint-disable-next-line primer/spacing */ + left: -9px; + margin-left: 0; + + &::before, + &::after { + left: var(--base-size-24); + margin-left: 0; + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + left: calc(var(--base-size-24) + 1px); + } + } + + /* Right- & Left-oriented carets */ + :where([data-caret='right']) &, + :where([data-caret='right-top']) &, + :where([data-caret='right-bottom']) &, + :where([data-caret='left']) &, + :where([data-caret='left-top']) &, + :where([data-caret='left-bottom']) & { + &::before, + &::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; + } + + &::before { + /* stylelint-disable-next-line primer/spacing */ + margin-top: calc((var(--base-size-8) + 1px) * -1); + } + + &::after { + margin-top: calc(-1 * var(--base-size-8)); + } + } + + /* Right-oriented carets */ + :where([data-caret='right']) &, + :where([data-caret='right-top']) &, + :where([data-caret='right-bottom']) & { + &::before { + right: calc(-1 * var(--base-size-16)); + border-left-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + right: -14px; + /* stylelint-disable-next-line primer/colors */ + border-left-color: var(--overlay-bgColor); + } + } + + /* Left-oriented carets */ + :where([data-caret='left']) &, + :where([data-caret='left-top']) &, + :where([data-caret='left-bottom']) & { + &::before { + left: calc(-1 * var(--base-size-16)); + border-right-color: var(--borderColor-default); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + left: -14px; + /* stylelint-disable-next-line primer/colors */ + border-right-color: var(--overlay-bgColor); + } + } + + /* Right & Left: Top-oriented carets */ + :where([data-caret='right-top']) &, + :where([data-caret='left-top']) & { + &::before, + &::after { + top: var(--base-size-24); + } + } + + /* Right & Left: Bottom-oriented carets */ + :where([data-caret='right-bottom']) &, + :where([data-caret='left-bottom']) & { + &::before, + &::after { + top: auto; + } + + &::before { + bottom: var(--base-size-16); + } + + &::after { + /* stylelint-disable-next-line primer/spacing */ + bottom: calc(var(--base-size-16) + 1px); + } + } +} diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx index 711391b338d..3f6c9b3c784 100644 --- a/packages/react/src/Popover/Popover.tsx +++ b/packages/react/src/Popover/Popover.tsx @@ -3,7 +3,11 @@ import styled from 'styled-components' import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './Popover.module.css' +import type {HTMLProps} from 'react' +import React from 'react' type CaretPosition = | 'top' @@ -28,7 +32,9 @@ type StyledPopoverProps = { open?: boolean } & SxProp -const Popover = styled.div.attrs(({className, caret = 'top'}) => { +const CSS_MODULES_FLAG = 'primer_react_css_modules_team' + +const StyledPopover = styled.div.attrs(({className, caret = 'top'}) => { return { className: clsx(className, `caret-pos--${caret}`), } @@ -39,187 +45,231 @@ const Popover = styled.div.attrs(({className, caret = 'top'} ${sx}; ` -const PopoverContent = styled.div` - border: 1px solid ${get('colors.border.default')}; - border-radius: ${get('radii.2')}; - position: relative; - width: 232px; - margin-right: auto; - margin-left: auto; - padding: ${get('space.4')}; - background-color: ${get('colors.canvas.overlay')}; - - // Carets - &::before, - &::after { - position: absolute; - left: 50%; - display: inline-block; - content: ''; - } +const BaseComponent = toggleStyledComponent(CSS_MODULES_FLAG, 'div', StyledPopover) - &::before { - top: -${get('space.3')}; - margin-left: -9px; - border: ${get('space.2')} solid transparent; // TODO: solid? - border-bottom-color: ${get('colors.border.default')}; - } +export type PopoverProps = { + /** Class name for custom styling */ + className?: string +} & StyledPopoverProps & + HTMLProps - &::after { - top: -14px; - margin-left: -${get('space.2')}; - border: 7px solid transparent; // todo: solid - border-bottom-color: ${get('colors.canvas.overlay')}; +const Popover: React.FC> = ({ + className, + caret = 'top', + open, + relative, + ...props +}) => { + const enabled = useFeatureFlag(CSS_MODULES_FLAG) + if (enabled) { + return ( + + ) } - // Bottom-oriented carets - ${Popover}.caret-pos--bottom & , - ${Popover}.caret-pos--bottom-right & , - ${Popover}.caret-pos--bottom-left & { + return +} + +const StyledPopoverContent = toggleStyledComponent( + CSS_MODULES_FLAG, + 'div', + styled.div` + border: 1px solid ${get('colors.border.default')}; + border-radius: ${get('radii.2')}; + position: relative; + width: 232px; + margin-right: auto; + margin-left: auto; + padding: ${get('space.4')}; + background-color: ${get('colors.canvas.overlay')}; + + // Carets &::before, &::after { - top: auto; - border-bottom-color: transparent; + position: absolute; + left: 50%; + display: inline-block; + content: ''; } &::before { - bottom: -${get('space.3')}; - border-top-color: ${get('colors.border.default')}; + top: -${get('space.3')}; + margin-left: -9px; + border: ${get('space.2')} solid transparent; // TODO: solid? + border-bottom-color: ${get('colors.border.default')}; } &::after { - bottom: -14px; - // stylelint-disable-next-line primer/borders - border-top-color: ${get('colors.canvas.overlay')}; + top: -14px; + margin-left: -${get('space.2')}; + border: 7px solid transparent; // todo: solid + border-bottom-color: ${get('colors.canvas.overlay')}; } - } - // Top & Bottom: Right-oriented carets - ${Popover}.caret-pos--top-right & , - ${Popover}.caret-pos--bottom-right & { - right: -9px; - margin-right: 0; + // Bottom-oriented carets + ${StyledPopover}.caret-pos--bottom & , + ${StyledPopover}.caret-pos--bottom-right & , + ${StyledPopover}.caret-pos--bottom-left & { + &::before, + &::after { + top: auto; + border-bottom-color: transparent; + } - &::before, - &::after { - left: auto; - margin-left: 0; - } + &::before { + bottom: -${get('space.3')}; + border-top-color: ${get('colors.border.default')}; + } - &::before { - right: 20px; + &::after { + bottom: -14px; + // stylelint-disable-next-line primer/borders + border-top-color: ${get('colors.canvas.overlay')}; + } } - &::after { - right: 21px; - } - } + // Top & Bottom: Right-oriented carets + ${StyledPopover}.caret-pos--top-right & , + ${StyledPopover}.caret-pos--bottom-right & { + right: -9px; + margin-right: 0; - // Top & Bottom: Left-oriented carets - ${Popover}.caret-pos--top-left & , - ${Popover}.caret-pos--bottom-left & { - left: -9px; - margin-left: 0; + &::before, + &::after { + left: auto; + margin-left: 0; + } - &::before, - &::after { - left: ${get('space.4')}; - margin-left: 0; - } + &::before { + right: 20px; + } - &::after { - left: calc(${get('space.4')} + 1px); + &::after { + right: 21px; + } } - } - // Right- & Left-oriented carets - ${Popover}.caret-pos--right & , - ${Popover}.caret-pos--right-top & , - ${Popover}.caret-pos--right-bottom & , - ${Popover}.caret-pos--left & , - ${Popover}.caret-pos--left-top & , - ${Popover}.caret-pos--left-bottom & { - &::before, - &::after { - top: 50%; - left: auto; + // Top & Bottom: Left-oriented carets + ${StyledPopover}.caret-pos--top-left & , + ${StyledPopover}.caret-pos--bottom-left & { + left: -9px; margin-left: 0; - border-bottom-color: transparent; - } - &::before { - // stylelint-disable-next-line primer/spacing - margin-top: calc((${get('space.2')} + 1px) * -1); - } + &::before, + &::after { + left: ${get('space.4')}; + margin-left: 0; + } - &::after { - margin-top: -${get('space.2')}; + &::after { + left: calc(${get('space.4')} + 1px); + } } - } - // Right-oriented carets - ${Popover}.caret-pos--right & , - ${Popover}.caret-pos--right-top & , - ${Popover}.caret-pos--right-bottom & { - &::before { - right: -${get('space.3')}; - border-left-color: ${get('colors.border.default')}; - } + // Right- & Left-oriented carets + ${StyledPopover}.caret-pos--right & , + ${StyledPopover}.caret-pos--right-top & , + ${StyledPopover}.caret-pos--right-bottom & , + ${StyledPopover}.caret-pos--left & , + ${StyledPopover}.caret-pos--left-top & , + ${StyledPopover}.caret-pos--left-bottom & { + &::before, + &::after { + top: 50%; + left: auto; + margin-left: 0; + border-bottom-color: transparent; + } - &::after { - right: -14px; - // stylelint-disable-next-line primer/borders - border-left-color: ${get('colors.canvas.overlay')}; - } - } + &::before { + // stylelint-disable-next-line primer/spacing + margin-top: calc((${get('space.2')} + 1px) * -1); + } - // Left-oriented carets - ${Popover}.caret-pos--left & , - ${Popover}.caret-pos--left-top & , - ${Popover}.caret-pos--left-bottom & { - &::before { - left: -${get('space.3')}; - border-right-color: ${get('colors.border.default')}; + &::after { + margin-top: -${get('space.2')}; + } } - &::after { - left: -14px; - // stylelint-disable-next-line primer/borders - border-right-color: ${get('colors.canvas.overlay')}; - } - } + // Right-oriented carets + ${StyledPopover}.caret-pos--right & , + ${StyledPopover}.caret-pos--right-top & , + ${StyledPopover}.caret-pos--right-bottom & { + &::before { + right: -${get('space.3')}; + border-left-color: ${get('colors.border.default')}; + } - // Right & Left: Top-oriented carets - ${Popover}.caret-pos--right-top & , - ${Popover}.caret-pos--left-top & { - &::before, - &::after { - top: ${get('space.4')}; + &::after { + right: -14px; + // stylelint-disable-next-line primer/borders + border-left-color: ${get('colors.canvas.overlay')}; + } } - } - // Right & Left: Bottom-oriented carets - ${Popover}.caret-pos--right-bottom & , - ${Popover}.caret-pos--left-bottom & { - &::before, - &::after { - top: auto; + // Left-oriented carets + ${StyledPopover}.caret-pos--left & , + ${StyledPopover}.caret-pos--left-top & , + ${StyledPopover}.caret-pos--left-bottom & { + &::before { + left: -${get('space.3')}; + border-right-color: ${get('colors.border.default')}; + } + + &::after { + left: -14px; + // stylelint-disable-next-line primer/borders + border-right-color: ${get('colors.canvas.overlay')}; + } } - &::before { - bottom: ${get('space.3')}; + // Right & Left: Top-oriented carets + ${StyledPopover}.caret-pos--right-top & , + ${StyledPopover}.caret-pos--left-top & { + &::before, + &::after { + top: ${get('space.4')}; + } } - &::after { - bottom: calc(${get('space.3')} + 1px); + // Right & Left: Bottom-oriented carets + ${StyledPopover}.caret-pos--right-bottom & , + ${StyledPopover}.caret-pos--left-bottom & { + &::before, + &::after { + top: auto; + } + + &::before { + bottom: ${get('space.3')}; + } + + &::after { + bottom: calc(${get('space.3')} + 1px); + } } + + ${sx}; + `, +) + +export type PopoverContentProps = {className?: string} & StyledPopoverProps & HTMLProps + +const PopoverContent: React.FC> = ({className, ...props}) => { + const enabled = useFeatureFlag(CSS_MODULES_FLAG) + if (enabled) { + return } - ${sx}; -` + return +} PopoverContent.displayName = 'Popover.Content' -export type PopoverProps = ComponentProps -export type PopoverContentProps = ComponentProps export default Object.assign(Popover, {Content: PopoverContent})