From 1d2b867f2207d366e355265b081bc9aabe31ce7e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 13 Sep 2023 16:39:09 -0400 Subject: [PATCH] fix(range): add correct margin in item (#28161) --- core/src/components/range/range.scss | 9 +++++++++ core/src/components/range/range.vars.scss | 8 ++++++++ .../components/range/test/item/range.e2e.ts | 19 ++++++++++++++++++ ...bel-in-item-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1786 bytes ...el-in-item-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2419 bytes ...bel-in-item-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1469 bytes 6 files changed, 36 insertions(+) create mode 100644 core/src/components/range/range.vars.scss create mode 100644 core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index 94841652dc..17665ccdf6 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -1,4 +1,5 @@ @import "../../themes/ionic.globals"; +@import "./range.vars.scss"; // Range // -------------------------------------------------- @@ -338,3 +339,11 @@ */ max-width: calc(100% / #{$form-control-label-stacked-scale}); } + +:host(.in-item.range-label-placement-stacked) .label-text-wrapper { + @include margin($range-item-label-margin-top, null, $form-control-label-margin, null); +} + +:host(.in-item.range-label-placement-stacked) .native-wrapper { + @include margin(null, null, $range-item-label-margin-bottom, null); +} diff --git a/core/src/components/range/range.vars.scss b/core/src/components/range/range.vars.scss new file mode 100644 index 0000000000..69c46f7e9f --- /dev/null +++ b/core/src/components/range/range.vars.scss @@ -0,0 +1,8 @@ +/// @prop - Top margin of range's label when in an item +$range-item-label-margin-top: 10px !default; + +/// @prop - Bottom margin of range's label when in an item +// We don't add additional margin because the native container +// has additional white space. Otherwise there would be too +// much white space at the bottom of the item. +$range-item-label-margin-bottom: 0px !default; diff --git a/core/src/components/range/test/item/range.e2e.ts b/core/src/components/range/test/item/range.e2e.ts index 188bd6f6c4..26e17b12e5 100644 --- a/core/src/components/range/test/item/range.e2e.ts +++ b/core/src/components/range/test/item/range.e2e.ts @@ -50,3 +50,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { + test.describe(title('range: stacked label in item'), () => { + test('should render margins correctly when using stacked label in item', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + const list = page.locator('ion-list'); + await expect(list).toHaveScreenshot(screenshot(`range-stacked-label-in-item`)); + }); + }); +}); diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a9a19252bad4091bfd1ebdd39441066b74380deb GIT binary patch literal 1786 zcmb_dc~H|w6kb%c1gMH4HLcKMR5~agfJhJoiJEjcBoG7SzGzsA*D0mR$5aduG z+yrAd1d2$wqKu-bL6Jj35D_#GKn$2*fIxq(f44I|X5Q?#$J=jr-naW6>!{NaZ5SK| z0MN#uQCI-fSWw^ho0U+zqFT!Y0yR4J$U#sc{9z1$mA_$7c5b0LlLOA^w0ZqDS;y;< z8=R9C&jU^+ndj>{X@s+Cr0Wwo77pj$^m{hXEYI=zJin0J-S5L}O=z=}tN;QX zT6Gfug7!lQ0Ja*cfn94gzebP~ z;;Gs3XE#l`Nvpsqm-Y~yY>TtUc75jtSwuv`0<$INe*Urxw#c4LYGPs{>`H4Nc_k=A z2Y3<)1lNsgv{vHq_)#PRujGb<~e?T`5=!-6Bp`cH;sw`yu!S*U|J9PSByr@2)M zdUUAuO8C-Zlm7nDe38g=hlz>w<3NLSauP=-=eD=EBQR_>n;$mAiL}XsX=>`SP;MmB z4h-DD0Pp3MclYdI^T@Ljp*G+-KAJ@&>094cD1slJ*gZMe;$>}Z9j=@%$;!&=>g+6h z`O<}L6XiLtm~;&Y;GL+t@vVVP*?4cIF+A}$my6lvoZI#Iaa__SE6$9hBbpj)2JbGg zzY;X^c&)aUmM@b@ZU~v`X^NQrJSPt@H!~YuRL!Rr4-NeaO*y^vb+fm(M>3>tG)0Y1 zN04H|12cDq!=M0n1`)1|w3%H{&WsE9OfT27^%#?d78p@8Yjs9T1Ci z=)!tJ9i=`#9yUAFx=NBm&om*?R;|_#ij9q>v|iSxFqv;GC1Qc#ys?qdIZaK?4-@zA z+u_~aM>(aX5Tm1$6Q75#+}ay7^gz8AB8((@c}?*f8c5O6ExfWa2mPs!AA{v`xzKX9 z&tY5)?ud#Tsj4l`c{bhsb!T;9mk^kmni?pynF#34kYTV?YSrFAQE^Vr(!lHWy1IVe z-iK4uva@+&F%g3e3@oS7Xl8r&DjxPJmCEUPRcdi(CpJAJLn^qi{1=2yxLleZJSnQ3 z2v7!n$oxYk%;C)`d3lv=s}N~>y77~f0X=0dhACfMXKa`Yx9aOH%L#SD990C7X<=qo zoRP6Xu2A^*-wou4$_jJ$hfVjLNp73z9>4Ra;D=`siiy4=G@|g*C3W>!yK+*)F_lX7 zG)wm3`S*zl3FuUc_+A0@`l_p|D|4-p$lLPqUS470K`3<6v9T1oi87Kxsqpspb|aH3 zSS*c)!&FS?a9grzI0<~Remu%X;c)3lB(m$pi~Q779cY=<92w?e+DNWUGB{Ad<^JsG z;4rF~?4J(Z?`3VZ9_BaRQ!c7LeRXMH!uB zi|jWF?7Jqd2Ef?P(~Ah>4LjaELe6vjRKO}GLq76%L tC%O3KCU9OiZVHm>Mrggp-xYu{i+kA*y6lEd9)OA&z#MWyRUAAX^E)+vCO`lH literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5de09ca8c6d03a8f587e808b466dcd7b62eb8b03 GIT binary patch literal 2419 zcmeHJ`#;oq7atlKw;E$2Br_TYqiHLb+=o~rx0OmR!$c{naTyKG?8t3pT*rN}A#93m z$UR~rVXL(o_coVx7mB*>8w}@FZ8}Z{9bvurTei(uKM`LNn&CBL{x!#93jp@ zlbEe9cfi2r&(-WjVp-5P5mfd3x#1N00NwA1|;b^#==ne$iq62UU3{`H-x|PYfq3rRAPU}58nTne);C+s_!he&VQ76==%h2o-r#XjAx4! zf+G>Gm^p6joq+lNhf|Bgje;VpAE9$_5j0_E@dt@JQui+x#>?)y9!I?c{W5 zeQ7jHOh&CUN_6ie5PB?Nj5Ji|pU)CC^&c@BY78kqV92nI*`xH1wyl87)$?cQ&HR~f z+SnbsGMy-S&}eYD%_>nr)w?4pqnW++B1h+HacSwPqyzdY02boy@gx-6*ViX_;Dir3 zKEPiZX>#kzGbYI3?bAU;;!HN$Osuc$-*zLn9i;c%v$N~(Z)UTcb`8oy^{FDco-Fj_ zhb>a-d2X}1%+)Iz1VS2ZxZ&}wo?ITSBUw4?(#y=pB_hL&g+XjhO%2g~HKsh`JJ#B@ z^*4fFZKj^x-n&?``)Omy(%ZCflbTrvGSGb+LpS_F8o@|*X<3uOXWol z%dXBaWU;e}wO$;uH1f?5H{Pd9pMEtRbo~eD(qTYvnXotOOCqy}=YGjoj6g2r|Yh6%!wv5@~zh7%}(d5Vx2iYSYT8G_ggB|uc^W1&WC(m+bh`8vVNq7*ncdv@_^YI% z?yHA7vr??d&XmPzzF(i_>*RDz0%176wY8P$fI1l?87MIY_y%^o&IdJQ%*%r`XZ@ar zZ@gv5-mHFg$IzMR*}Py`ejLC;1O23yp~95&@P#eas~5)4mvP8Y`aKVLg_>R zsrknZ6;)N$!uX+vHL4gVAwhCoIwh>pdO%wn9SkI7yOni6_hTD$BXe}GyA~ziC%V^T zj{Cd{&-;!>i@`N6FJr{SWphj$|rSopj))iM)RSoME!{mn?efS#pvfa8D8k8g1RxFlPRJZRxS_`n>QHXoP4A zc)e@s{Pp0PAX^#gk!_J6dTLn;m)w>78anyDh`Bs!$dt3~BI~E8b{lFQZaB#`4|l%a zo|H#{NFfl#M!3+pSkgeY3gj*zojPg0YdjehmQ6HcF`)l7Kf+Drb_aBS%ZwULM6mhU z7yzWAzy`Cu?0tEME?EqTO7W9Rvjp(SeHdKir|D}Dfnqp literal 0 HcmV?d00001 diff --git a/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/item/range.e2e.ts-snapshots/range-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..06c5dbe27601c0649417175978b35bd5e594650f GIT binary patch literal 1469 zcmd5+ZB){C6#iLOMsKb*SHjW~DXY~Yweod_9rOG&%O8Cea>_5xi`W>0#+gH z5deTy5Z*r=0ILkRkGEL_=gVEyCb%p;5ftDLKK&h!<@wnFETKdGei0XQ4cbsVFAh~b zq4NDDXbEqtYgvIFGg#AvkczFpNH37P?%x`5Z!~N?tc2?qYW0~%yx#+FljDid^vy$l zudmfU#+?)9)!&@>J@7o{Ci|rG!gj%T{I9S@rA%`4q-xHR8_o7=nOFC#=QGeQBf}&+Wo6}xFL#bmVs)6*DjlV?qI=YAP8PQH zsJ#UC5?ZAx<@A7bZ*zE#NpUwsS?NDd9xbm1I<56r5>Hoyi60oBvk3fl01k6 z!cPlr0NuOH8CY+Efc5@I$h~03@hKbF9QdD*{b=xqn=ug~9J-wdlZoZ6CZj>jv+K{; zVsShFc)L+HCkpyn;dARQNS3co?G?|EEM~k#9{c_qpkP2LoX^cc-g9*Y5OCCINtitM zlPf{k5O6p zu)U79`qxDFFuij4eBWF9!M77k2>ACXSEV_km;W49TE F`~~2!k*ELw literal 0 HcmV?d00001