From 2703d0c659a71d3d0c6e307cb4d6dc2606c070d0 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 1 Oct 2024 18:36:17 +0200 Subject: [PATCH] Banner: Fix margin for inline actions (#5053) * we don't need margin when actions are inline * Create wet-otters-pull.md * test(vrt): update snapshots * there are 2 css files!! --------- Co-authored-by: siddharthkp --- .changeset/wet-otters-pull.md | 5 +++++ ...nTitleAndActions-dark-colorblind-linux.png | Bin 16516 -> 16516 bytes ...tleAndActions-dark-high-contrast-linux.png | Bin 16618 -> 16618 bytes ...leWithHiddenTitleAndActions-dark-linux.png | Bin 16516 -> 16516 bytes ...nTitleAndActions-dark-tritanopia-linux.png | Bin 16516 -> 16516 bytes ...leAndActions-light-high-contrast-linux.png | Bin 16746 -> 16747 bytes ...dSecondaryAction-dark-colorblind-linux.png | Bin 15622 -> 15622 bytes ...condaryAction-dark-high-contrast-linux.png | Bin 15707 -> 15707 bytes ...ddenTitleAndSecondaryAction-dark-linux.png | Bin 15622 -> 15622 bytes ...dSecondaryAction-dark-tritanopia-linux.png | Bin 15622 -> 15622 bytes ...ondaryAction-light-high-contrast-linux.png | Bin 15743 -> 15743 bytes packages/react/src/Banner/Banner.module.css | 2 +- packages/react/src/Banner/Banner.tsx | 2 +- 13 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/wet-otters-pull.md diff --git a/.changeset/wet-otters-pull.md b/.changeset/wet-otters-pull.md new file mode 100644 index 00000000000..ca7b0df27b8 --- /dev/null +++ b/.changeset/wet-otters-pull.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Banner: Fix margin for inline actions diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndActions-dark-colorblind-linux.png index 07a1b9a0764526df1db403acdf83a7b273d9a54d..2a98f13bf729cabe6fd9d57fd205e63f30b88412 100644 GIT binary patch delta 2351 zcmZo^WNc|<++eI%zrdC6*Q{TYLZ+DN&b!FKz;GZv#x*iH>y@`yrB%1gm-oK?ah|!eRZOrywoYW&|kY<$Fx*6 za-aWWC4M%bF1yoVFD}n`S-Mp6_q!m0FP@*C%zi3)VXfwC{reOCh1{JL6#A~i7N}0e zGt{;CSM7~6wY$xpcbbcxH$O4GV>k4)Th6c&6sx$vM zW**xYJ+5nRbptCxHBT4E5P}tw$P%R*uDu7?r<*V^Fno{<54<*I)~`vf^Uf);|E<34 zeQD#S%8BeuK)L_iR$*q(_rCOYys+PFqt5AXLSKNQ7vxTV%Q=@Vd|Is1s$1qu@_k)z z-&oIS?=SB-(agxe&~Sc}=r5DBs@Tk9`*w@4)K0SbnO4bGl6~seY4auZ!P}RGOtntp z2b$v<6nb$^oxEA`{dH$6AN77ZYIJv!p6xH)ZNKF1tTtq>Hd&hfd|Al~fv-Td28;Kp zOt#lJd!yX@^RXqa_D26F9+d()=D_m9-#0tz^KeeSpf6m1;Q#h`b`_v7L({+gdF~7J zStNw2fIK>p_4Kq1i(U0}^eYzYtLo_&)Yz7(Eb6no}qqVt(O>0{{x!< zN7Fy{d`YitIhy_lHvM}*tPkwsECSXV>VW_N0Kor(ZPu%uf4?wssi(8l zLH}s)$r(FoR*vgZf2jup00030%}&^@K}L+7nJ4>9Ug~L8t5#BHZ`QIH)FnqYN#lCe z)BU}&^#6QX#!Q&GEG7#8004#7v_bW>Z&jM@)~%f{$IZ++w~t*W(_LmkpCny3sgpyu zsh_pm)J*e6HI~(60RRA?utt47Bkv8Kn%iHPn8#mV`Xlq-S*Ae`0002|IDFq6vr#g0 z2D4Bx<^r?CIDQ8VbNvo50001tNkln$)*n00000Dx+zG>KXO*jHRB=QkVGq zL#AepR;5cl5C8xG_+QYzRcYQGGggh=YmE*e9U+TdC006*$vlDh}kP%~N=E**jmwH;&s+H84Z?!B2b;*%U z(zssrbbqfb{Xd_UF%xDki^&2206?KNZBRY!Ta{+Jb!+F#aWiwy?PHh8beCDsCrQ^$ z>g3RE>SygXHPgINjb$}i0000etWjUj$a{mQ=JppR=JD5;{>c1ymTAxf0000#4&OHi zv(Yf~2eVKyJ^{1DIDQ8VF+Kmb0001tNkly@`yrB%1gm-oK?ah|!eRZOrywoYW&|kY<$Fx*6 za-aWWC4M%bF1yoVFD}n`S-Mp6_q!m0FP@*C%zi3)VXfwC{reOCh1{JL6#A~i7N}0e zGt{;CSM7~6wY$xpcbbcxH$O4GV>k4)Th6c&6sx$vM zW**xYJ+5nRbptCxHBT4E5P}tw$P%R*uDu7?r<*V^Fno{<54<*I)~`vf^Uf);|E<34 zeQD#S%8BeuK)L_iR$*q(_rCOYys+PFqt5AXLSKNQ7vxTV%Q=@Vd|Is1s$1qu@_k)z z-&oIS?=SB-(agxe&~Sc}=r5DBs@Tk9`*w@4)K0SbnO4bGl6~seY4auZ!P}RGOtntp z2b$v<6nb$^oxEA`{dH$6AN77ZYIJv!p6xH)ZNKF1tTtq>Hd&hfd|Al~fv-Td28;Kp zOt#lJd!yX@^RXqa_D26F9+d()=D_m9-#0tz^KeeSpf6m1;Q#h`b`_v7L({+gdF~7J zStNw2fIK>p_4Kq1i(U0}^eYzYtLo_&)Yz7(Eb6no}qqVt(O>0{{x!< zN7Fy{d`YitIhy_lHvM}*tPkwsECSXy@`yrB%1gm-oK?ah|!eRZOrywoYW&|kY<$Fx*6 za-aWWC4M%bF1yoVFD}n`S-Mp6_q!m0FP@*C%zi3)VXfwC{reOCh1{JL6#A~i7N}0e zGt{;CSM7~6wY$xpcbbcxH$O4GV>k4)Th6c&6sx$vM zW**xYJ+5nRbptCxHBT4E5P}tw$P%R*uDu7?r<*V^Fno{<54<*I)~`vf^Uf);|E<34 zeQD#S%8BeuK)L_iR$*q(_rCOYys+PFqt5AXLSKNQ7vxTV%Q=@Vd|Is1s$1qu@_k)z z-&oIS?=SB-(agxe&~Sc}=r5DBs@Tk9`*w@4)K0SbnO4bGl6~seY4auZ!P}RGOtntp z2b$v<6nb$^oxEA`{dH$6AN77ZYIJv!p6xH)ZNKF1tTtq>Hd&hfd|Al~fv-Td28;Kp zOt#lJd!yX@^RXqa_D26F9+d()=D_m9-#0tz^KeeSpf6m1;Q#h`b`_v7L({+gdF~7J zStNw2fIK>p_4Kq1i(U0}^eYzYtLo_&)Yz7(Eb6no}qqVt(O>0{{x!< zN7Fy{d`YitIhy_lHvM}*tPkwsECSX`Xw}|J*>f>fCE~RgKFxA8@>% zc(wNO2G8F-@2;0OvNMAeoMrp__}CPa_p|s`zu9`=@~ZI2`pBID`%XXDt6o3t)1|=7 z?U&Rtcb?(Oyi@bC)i4sMMPtj$`2O=tHp-`eVgDO+X-{<6-G852jqbLJeepDU^>?@N zqx(7*V8MZVYi;4p024K(-EWTe_#{fX!^%Ylk^lBs_EaW v`@?<)21Z^_7sn7vitvFh|C6Yh{T4FBFL#{yRwe?}B4O}!^>bP0l+XkKn;KW& delta 2425 zcmaFe#Q3U-ae@A1F=O@m1+09(CZ(-4{`*>A{9FbD1H*&;cfPDYzI;jLY}R?_nAmGi zmu07XdhRS%p#YTpus`9_jsDB4?#|-2nG4i;E?a);#pbx!2aQ0<1OJ*4-SG9)NgkDzr#@V?CxcUwW@VLYyI-{zCG^ww;Mpv;5g5364= zGB7M?V6g>qMJ6m@-`rp{lWlW>VH8vSzyG(_GYbL5865w|Z&$t`&IEMvgbU1cBJ1gC z85XF8H1)*q;+Ur=MSenLInVj8RU7wYMi(6C$2Tu-NTj>CF}(eyvC32-$1<4T$I z5g)SYzh3!^GXn!7kEe@c2n9)apv(Ux3fzuabp^04aGbb|<=_WUd&1Mz&t;ucLK6V7 CHGuB` diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-colorblind-linux.png index c9d3bf663dfb0d920e3e0d8e8cb7bc425e33d1b5..234d98f4b4168a2e207e97fc387431027f9103ee 100644 GIT binary patch delta 257 zcmV+c0sj7mdWL$ip(=l%1rGY^+LBb1H7uOb0002M|G0{>hE&&;K2X@0KosUrTWxo>h#i#{pf2D^hxr}+vVxsy&-EaS(jCQ-5XL>?ub1A001OO zRYhYKozcvFyEW$Nx5^jFbW6JSSahM)_n=<&8PKC4J-aldV}+;(004k#wI!K2r8Hwd zD$QFTF8Go8&n(oS2LJ#7z8t=Xv+*qu2(z#(d;+rpHt_}&bh%h=wI}ZK00000NkvXX Hu0mjfa%*^A delta 260 zcmV+f0sH=jdWL$ip(>M*EGU0yfrGxfwj>p04GU*90002+Kdz#zA=R}d3p||#4*E$` zOVX*bae)T{00030Kj>81m`PK=20{PE2W45jm!Jm#0D$&byk}$H_@Hcor?bF8KlY=t zR8KF-l6~qIcrX9}0Pw$TsXq0YI=wVwKl&O3eUd!$c6s`DZ^+t9)}>Wn_l8uJJ7Nz2 z002o+RneG5XEbx)ZjE{Rt@4F3-IA_77F}rdJ*ZcG2J~o1&n^w=SRv{G003ZGZAm6h zDb3iAO7qr-3w~t&GYd870RRAiFNg1;vvDkt36roa)UyFL@dgyr16Xb=IP+=%0000< KMNUMnLSTY}C2*1e diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-high-contrast-linux.png index b37a7ec3f2b7eab625b29f1006f8b313982648b1..043d7fa29b179aef7e45cad87ff235587946e54a 100644 GIT binary patch delta 283 zcmV+$0p$MMdfR%i+bVxc9Q32Uo|z`~y)OU&0033dv_bWZ`g-OPPiKis{DUFWvRbRs zB_0R>008_qXy2+d?+>1~#M4>gpug+IiP?JXT1z|-0002^Z?MgJweznRCob`HmN@7i z?>#x=Ce6-qJJ(<0!2kdN!2f3_?$#h9#?8u8eI_sQw5nArsWWeTX$R>~dezgt z-;@maa(c#2n6)$}3jhEBh1Rq|^|WtQnr+vuonhl=&;tMf06z`iHwUwEE%XSp hKrE;Mvt>5o1{A=Wq8bWx>vjMD002ovPDHLkV1j3-h&uoP delta 292 zcmV+<0o(rDdfR%i+bWZgEhm4_5(oXLuVg68~Vx zw5-;ubcqK7000304cfOV&HIC=E%9`gIOy+sabmV!yVep91ONa4{u^wwUhVwr#feKi zoh1(X$9qrCxJk2f+|KovcrX9}0Pz3WiMut(h;g&>RG-O9JgsWgO6q^iUK)e?+fhx@ zxL);i?>8j_zMP)16J{-q$pQcXK%q5lP(AHim1f&@YiHQ_SvmX8aZ6>oOD*V=q)Vqd zIc%HyS-VZmG;dU6X-yUY000VW)Ymi9@AGN7^TmmI@{J|mGylD%8uS1F0KiYf_sszS q06+l=dH?_bC?G)(006QqM-deASE3qfxjZcZ0000hE&&;K2X@0KosUrTWxo>h#i#{pf2D^hxr}+vVxsy&-EaS(jCQ-5XL>?ub1A001OO zRYhYKozcvFyEW$Nx5^jFbW6JSSahM)_n=<&8PKC4J-aldV}+;(004k#wI!K2r8Hwd zD$QFTF8Go8&n(oS2LJ#7z8t=Xv+*qu2(z#(d;+rpHt_}&bh%h=wI}ZK00000NkvXX Hu0mjfa%*^A delta 260 zcmV+f0sH=jdWL$ip(>M*EGU0yfrGxfwj>p04GU*90002+Kdz#zA=R}d3p||#4*E$` zOVX*bae)T{00030Kj>81m`PK=20{PE2W45jm!Jm#0D$&byk}$H_@Hcor?bF8KlY=t zR8KF-l6~qIcrX9}0Pw$TsXq0YI=wVwKl&O3eUd!$c6s`DZ^+t9)}>Wn_l8uJJ7Nz2 z002o+RneG5XEbx)ZjE{Rt@4F3-IA_77F}rdJ*ZcG2J~o1&n^w=SRv{G003ZGZAm6h zDb3iAO7qr-3w~t&GYd870RRAiFNg1;vvDkt36roa)UyFL@dgyr16Xb=IP+=%0000< KMNUMnLSTY}C2*1e diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-dark-tritanopia-linux.png index c9d3bf663dfb0d920e3e0d8e8cb7bc425e33d1b5..234d98f4b4168a2e207e97fc387431027f9103ee 100644 GIT binary patch delta 257 zcmV+c0sj7mdWL$ip(=l%1rGY^+LBb1H7uOb0002M|G0{>hE&&;K2X@0KosUrTWxo>h#i#{pf2D^hxr}+vVxsy&-EaS(jCQ-5XL>?ub1A001OO zRYhYKozcvFyEW$Nx5^jFbW6JSSahM)_n=<&8PKC4J-aldV}+;(004k#wI!K2r8Hwd zD$QFTF8Go8&n(oS2LJ#7z8t=Xv+*qu2(z#(d;+rpHt_}&bh%h=wI}ZK00000NkvXX Hu0mjfa%*^A delta 260 zcmV+f0sH=jdWL$ip(>M*EGU0yfrGxfwj>p04GU*90002+Kdz#zA=R}d3p||#4*E$` zOVX*bae)T{00030Kj>81m`PK=20{PE2W45jm!Jm#0D$&byk}$H_@Hcor?bF8KlY=t zR8KF-l6~qIcrX9}0Pw$TsXq0YI=wVwKl&O3eUd!$c6s`DZ^+t9)}>Wn_l8uJJ7Nz2 z002o+RneG5XEbx)ZjE{Rt@4F3-IA_77F}rdJ*ZcG2J~o1&n^w=SRv{G003ZGZAm6h zDb3iAO7qr-3w~t&GYd870RRAiFNg1;vvDkt36roa)UyFL@dgyr16Xb=IP+=%0000< KMNUMnLSTY}C2*1e diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-DismissibleWithHiddenTitleAndSecondaryAction-light-high-contrast-linux.png index 2ed48cfcd1a4226b5ddfb86875ead2f7acb44b13..ba88fc8601d9e49f5274c7d927fff8e8088d3e8c 100644 GIT binary patch delta 42 xcmexg^}lL^f%fKbZ6)r>4|LQwSDJld6KTBjCAZ^9xhew?c)I$ztaD0e0sxo=5i9@z delta 41 wcmexg^}lL^f%e1$>YEL;mAE%ontfsuQNQ{n_l&E|9tI%rboFyt=akR{0Dn6WR{#J2 diff --git a/packages/react/src/Banner/Banner.module.css b/packages/react/src/Banner/Banner.module.css index 5e20ad6cb73..2bef4bbe4ed 100644 --- a/packages/react/src/Banner/Banner.module.css +++ b/packages/react/src/Banner/Banner.module.css @@ -143,7 +143,7 @@ } } -.Banner[data-dismissible] .BannerActions { +.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions { margin-block-end: var(--base-size-6); } diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx index 2a9bbfd459b..d1061e966ed 100644 --- a/packages/react/src/Banner/Banner.tsx +++ b/packages/react/src/Banner/Banner.tsx @@ -338,7 +338,7 @@ const StyledBanner = toggleStyledComponent( } } - &[data-dismissible] .BannerActions { + &[data-dismissible]:not([data-title-hidden]) .BannerActions { margin-block-end: var(--base-size-6, 0.375rem); }