From 3f00e696ca1d3c4e9ade763d788ffaa6039c410a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com> Date: Fri, 20 Dec 2024 17:05:08 +0000 Subject: [PATCH] fix(select): ensure select sizes are respected when the label is empty (#30087) Issue number: internal --------- ## What is the current behavior? Currently, the experience planned for ionic select has the sizes fixed and should be respected even when the labels are not presented. https://stackblitz.com/edit/ku3fqz?file=src%2Fmain.tsx ## What is the new behavior? - When select is used with Ionic-theme, the select should respect the height sizes established. - https://stackblitz.com/edit/ku3fqz-2vnasdmx?file=package-lock.json,package.json - https://ionic-framework-cdtf7hsqy-ionic1.vercel.app/src/components/select/test/size?ionic:theme=ionic ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Maria Hutt --- core/src/components/select/select.common.scss | 21 ------------------ core/src/components/select/select.native.scss | 21 ++++++++++++++++++ .../components/select/test/size/index.html | 9 ++++++++ .../components/select/test/size/select.e2e.ts | 20 +++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2047 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2714 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2043 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2005 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2551 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2002 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 1959 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2469 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 1965 bytes 13 files changed, 50 insertions(+), 21 deletions(-) create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/src/components/select/select.common.scss b/core/src/components/select/select.common.scss index 380f75e134..ba17af1818 100644 --- a/core/src/components/select/select.common.scss +++ b/core/src/components/select/select.common.scss @@ -57,16 +57,6 @@ cursor: pointer; } -/** - * Since the label sits on top of the element, - * the component needs to be taller otherwise the - * label will appear too close to the select text. - */ -:host(.select-label-placement-floating), -:host(.select-label-placement-stacked) { - min-height: 56px; -} - :host(.ion-color) { --highlight-color-focused: #{current-color(base)}; } @@ -221,17 +211,6 @@ button { overflow: hidden; } -:host(.select-label-placement-stacked) .select-wrapper-inner, -:host(.select-label-placement-floating) .select-wrapper-inner { - /** - * When using a stacked/floating label, the inner wrapper is - * stacked vertically under the label container. This line - * ensures that the inner wrapper fills all the remaining height - * of the component. - */ - flex-grow: 1; -} - // Select Highlight // ---------------------------------------------------------------- diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss index 8c60a4f7cc..64002313ad 100644 --- a/core/src/components/select/select.native.scss +++ b/core/src/components/select/select.native.scss @@ -118,6 +118,27 @@ max-width: calc(100% / #{$form-control-label-stacked-scale}); } +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the select text. + */ +:host(.select-label-placement-floating), +:host(.select-label-placement-stacked) { + min-height: 56px; +} + +/** + * When using a stacked/floating label, the inner wrapper is + * stacked vertically under the label container. This line + * ensures that the inner wrapper fills all the remaining height + * of the component. + */ +:host(.select-label-placement-stacked) .select-wrapper-inner, +:host(.select-label-placement-floating) .select-wrapper-inner { + flex-grow: 1; +} + // Start/End Slots // ---------------------------------------------------------------- diff --git a/core/src/components/select/test/size/index.html b/core/src/components/select/test/size/index.html index 247509cd02..50441caa5b 100644 --- a/core/src/components/select/test/size/index.html +++ b/core/src/components/select/test/size/index.html @@ -47,6 +47,9 @@ Filled text + + Filled text +
@@ -54,6 +57,9 @@ Filled text + + Filled text +
@@ -61,6 +67,9 @@ Filled text + + Filled text +
diff --git a/core/src/components/select/test/size/select.e2e.ts b/core/src/components/select/test/size/select.e2e.ts index 927c2298ec..de33b71c2c 100644 --- a/core/src/components/select/test/size/select.e2e.ts +++ b/core/src/components/select/test/size/select.e2e.ts @@ -28,6 +28,26 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens await expect(select).toHaveScreenshot(screenshot(`select-size-${size}`)); }); + + test(`${size} - should not have visual regressions when label is unset`, async ({ page }) => { + await page.setContent( + ` + + Filled text + + `, + config + ); + + const select = page.locator('ion-select'); + + await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`)); + }); }); }); }); diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e68601a112196ba6e66d72b68d977cec7205453d GIT binary patch literal 2047 zcmZWqdpOf=AHS9JL!_**YStWEBAyY7#+-5};njgOJaQ<_P?STmB+ZpA_A*;+tY?hJ zp@n&*6MBp!HRc@2Swwlv>G}0u?_clx`Qvln_jTRZ{k^{5@8|ou(@(lPDl2L#0sxeq zo$NgUkV=R47V=vlPV=W`LW>m9(-8~G-@+#WkgIdHKkjuse|F%4)9K4_xq0GKjdpHV zTz?zaUh!giO(C*qU1LLA5i9=gJ~S^Hq!9zCJ32a@f?g3BO?2tpvg|g=3nU znygSkK>-4Ze7P)bBQ`TJF)=nS=$ga_2Hy7813VmtUdCqc*VEI}(P^4~a19d^6N7Vb z_$@eCrUnaq>m?G&vxLavIYR|J|j`C$jg6!Ok(M=e@sTFb-YOiHXnZ9Y0^u zP?F7cy%Vq{dHBSM6XzNe*I&O*tq;+r!?(2z4Yi>2r|VKfwdsQTdQ($VJ3n;*3Og^w z$H&X3s6vHIw@=xHmO{XtP-+wu^vHyec1V$g{O}zB^hy1l7a9}Q&!AyJJ3y)m345{9 z_kkNw_1~#T5=X$?+}xU)nn;4(AX!F{gbxdI399L;FroE%%7xKB9E9A_~cuY=F_q3L#rccFg@OP;U#Z5;?XLF6m=Vv4C?y-tBGdJHM zO<4TWo|Uz|qnR?;aATbAX6B|vZU%-**AXB!UFYfDZyBStuhLZZSw_DZ*s*V)hpK%- z!upqX`oAh_C6ai0d+fU8dx5favhj8&%ywyQnvhDRHdvA!0`Yi!bo7%U?fv`rU%q^~ zv$GS2!x?6~Ow7#8z~OLL50B-6xneH&uK?qo*&k4Vy%tw(dqO+HDTRfFm6eqgirS~l zDlXT#^dr<|(KQ6%$>wq5n42FlL|v)@5{cz{$r>-Z9E-F}+E}BTN3QLSmn==bxGfi& zH#a#cZcJ)?5ukc(Am2JJDk`d~xOl8J`+&dQowPKKJGo4zX!`q5W74vf0`8Qzw|58g z=ze(?6qv(t;Ce~6Nhf=cMAeo1H%Jyn9f$0olpyWRwY(FGdV1a*I!z!fbg~^IH{OXv zx=Z2w-tmq{tC*SCdY{sSg%Q%#vvF}N;_8qyIUg^XLCwU5`1$!kO6)#V!sA)TOg((} z!%CrJQDv`n50u&b{Jf~_9E1e9Eze61Ym(K~)n#wLs3zXL`6r9@@{*Y>CL}O0FnQSu zEp&HxSDe+MnM_Pi({pn#p82sb+9G}Y0gBr_4JBh^ZeDZktN*9`qM{<8t1ZuZ^5jWz zaWTZd|Ac;pP%1f@`*Eu4u}8N^#IztFj~?~wc{kZi)(Q>|4&z%6hi+}-9KG=aZj-oX z?!ja-bDU6rTxg744hjkJ@bGYSa40`lGv}eZT~kIz2Fi&7BYI zC#-M0#uM=P5u{y_C%3yQ{~2}di!Jy&BVf-KAn*7__x}l*>)K2>|GN+X-{*vUSKS?4 zFGG4eYzhwm%vg!-$+cHdP*8f6`X5hGdWAxv?v9L(W_}>F$YulYs zYBb?kR2|k&1ppHpn~udl?UCAXO!Hhd7(w127=K>R!Y#tnme zy|o1P{AkisanV+S&{sDuYep;at~Z&r>^bryia+y72AJ%!Q?5&ixlE%%2}S NaK^dYmtzA`{sE=y-9G>T literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..80b0c39499acb21716146adeea4adf302b842ed5 GIT binary patch literal 2714 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 literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..071c90c5b961e1404945053203937a20aeaeea05 GIT binary patch literal 2043 zcmZvddpy%^AIEh4Bj4`OZI z$|2+yrOat6v)D5;hs08w)22BKP0z3U-{-lm*Xw&-ukY*neqY!1eZ9Y*i+IM@W54`C zc>nbw3_Xhy--sA~uoQ*vfUS8DxXL!bk55KJ@$8Rq#$1iX!t{qyGy!x9hZ_TlmaxUMqYZ#kX%Gf0KAC7Pp~7i!lns>359(8 z>j7*teR}L=d;}hkN25znFja`Gnwz9@Q0kMCn&Qpu?uVnoiqg{3vNGzG5XzakMEj2YiS`#hmdj=i zV@{MlMGL2BsYg^jFD;3GCZf@3M~)nk&oyw>m3FxrZ>uBbbvh@`o#AIxk)yf$=OSg3>A+QBbyx?e{Dy+L_-`5Xj=aS5YjjJP$i*g76V zpgB?QO1az~60U39c_ZFDV14gBwmGE!?M^gMpp2lHJ3I5DEL9QJXN=b7IY;lh7tJ*Q zdP!GWJ}?-Jwl=$dL4s$Me;QO3P&G0!@i8d0t?<1{AlN%NIItyvOD&VZ*!sR@;l@cs zqtVoIsmuUUX{jg2Qm{^NGw}P{aa7|DE!0e1K37)S^>4?!+0~O2Wp%}yO*{wy(;+c0 zYsp=d1w3U7|JT4uQ1)@3GFQli)YQHDdz7FevG{0?nxmU*6?=DB8qMor2WV)UdC%L~}Ita|&i=uw{>9c^$ehh(JNmarb)x@Bt?C zoMp=AUSi;;3}AfCWb_{TrO)b)WVA8N%+z$MIWoUHJlv+`L1kq_LxZW2QFU$YiShw9 zmp~wFZ*SlC5^Rcjq+=_haf=Gy*@QNTzWXD;Dt}t)rYXSycxv*5V|V;`)5mclaqmXs z3Ay-?DO^lUV%vE~M@L;lr>iKEH;E657D)ewdgDgmeGUb?_xSN%)KdH|fh8ixXh7YZI--B_$(V zu1Q&OW#ynC!T2^N;xfY^r=X;yWOsLWWCZD z6(2s(ab5*+3qh%_ueZ|LXJTR^f&jf){x$7!(>>tB1}hxi;k=`p$2FjDu_mM!XTc_~ zbh@#g?~+>P_mSVhKJX-*M+kzvIhtU4{l~=HnT2rvz?rr zfP3>i-*x(QWygbRtd$@YkiApEo6aUft>rH)juk?XHlE zNOK~q5|Q6}-~jBw#G(cfc|QOSN~vd}1yHcikuHH3dl{FWvIeU?hXwSwb``#*r`#EW zgtEsnSuWHasmx(@h-_3@2~(g(W}P)s13@9;_5%K-@tDDZ0l{*Lnm+OgC%7I>W|4ks zk@{AeQ~AK#uY)KRL@%bvtLh*W>YEq=6x`0s%NxGhf`S1% zUH492SWr+OboY0dDd}8jD6S<$SJ9&;*EM$SfO6%U&Ff zTv^$%H2fK5kYm0t;za2&4e#{y4s@N5xA&chI$-Ijf~+*Qc^unZ!(Hg<>FJY%^r{y2 zuIxzMAH^pm_!|`R`TR>*?Cm$0EEgBQF_tWl9%!qBC3o3cSbRyezfuO)ggc)o+KFbD z+=Y#N{P=(~|9wTk1bH15f~`Ns03&qW{G_v7V5*=}m!A5C#582pgbw`x@?`wRV2aHg Q@HYoM-F%S^i12^?7m~{GX#fBK literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..07791fcc274643922da59821eecc5e8aa4c03e9d GIT binary patch literal 2005 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 literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..a9a4e163221df30de411274196d6b92224e781e1 GIT binary patch literal 1959 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 R1;1Ya3!IHvh3VzUe*v0oS{48R literal 0 HcmV?d00001 diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0a1f6326db59cf79ace5fd70382b9a42aa600a92 GIT binary patch literal 1965 zcmV;e2U7TnP)z6SV0g%XjmE)b)jL?Y1K5($x!QTo`F{QG!Y`i3^E`()H#dhC7mY@JKHv28G(}M~O-CY;SS+^0^#A}c zABJHfkw_wu;5e>OD3nU2P$*pDdfs9!DG&(QY&N&sy?*`rf`Wql{CufYDiVn>3|pPb z0RVrXSS%KaL_(pE-|zQ$JQPK#)oP>BD3i&OUZ12Tu`D|}I!clxK@fVqJ|`z<^~(kT zWQA}zJTWoha5!{2U1@14pU+=#!NQgl3+35o zFITJ88LAKfkX_tv_xtzn4;(lU|6A$jTs6zGuU@^<>-Er&003!ISXijlY6k}gS(fES zezv61(a|+)*1-K503gkZi;E=^$@usGk?dR|NpbUIv3Sq9`mB z3Q48XUy9tfZ=d#``uh41Li_jc9~c-w2$hwUaU<~$|LVz;Cp&lU{Pk}E0Qf`5WU^2w zB#1_%B9Z7h|s1X$u4ZWQtHIj7Fn^ zSS*&pej_-JYc!e#gU62_U!mFn09l96=d&!klA9kbaht|4%=PQn%gV}j?b>CrSh$DB zr>Cb+oH$WjTwGgQYqQxBv-R}!^!N8`wc79Bzb8%d?AbG;(dhH}5JFa~Rj1Rvd-pCe z5CE{Uyk4)%z-deZ`>fdGINr_pFGUcA`d-90%uIe(la$?op%`uh6BiJkvQkXqQOQ>Wt7+ly^j88Fp(mM55l_-oJmUK;U#bg+d{Z$6HPk?n59DKnR6G zq5qx=0I+=XyOKa4Sbjf3DYv9wQdCqFi9~|IAh-Dm%d*jElx10lVLTp>N~J;wC4DQw z{Dze@2|{Rca`M502iLA$>+0&Nsi{#al?ws^0INr<)tb%byLay*gwCHoPY}d16Q*N& zd-LYa)z#HaO-;kY!!DPrv9a;ity`NmZQ8M8M_XIlw{PFPUhn<;_Y(uidk zIywvn!`ZWEj~qE75C|?^x`YtAdGjX2FqM^+X0v(g)~$(AhYug-@pvaso(u+qNt5*S z^f;Z)#>Pg3P;+zh>({TJKYyMW2mn}B8jU99`Rq8BW%+zQ@8QFThYlTrod5s;nH3I) zdwY8^sZPfSc?x+DNV_OjV*g@uIzfdE4Y8I4AV z!$H$@rmF$~WFwlUNs{EAg2oU+GMP-L(~XRbWV$c_KsFj49wrEa+uru))7zz`r8G^) zUpNT>0O?`1S{a5ZDJkI&f3_q(pI=o~<#0IMZg<8?0{~Ix8zH`FuV%!kfR| zm7=J@!9kr)$KBKc0Kn=Q8yh1@vbwr@-MV%0LEeHT_zc4g4Grby=9)|1`Guu{U|u+3&8Ns=Ill9H16 z{aRd-mc(Hg#%i@rO-;$=a+OMzmzO7#$wVSi3a>K(0A#ILEXM70=J)%(UN1#ag@uJi zqj9m