From 6cecdf41451a5c7aa908494dfad9fab1496a0c6c Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 24 Mar 2023 11:32:14 -0700 Subject: [PATCH] fix(item): use thumbnail's size when present (#27014) resolves #22935 --------- Co-authored-by: ionitron Co-authored-by: liamdebeasi --- .../item-divider/item-divider.md.scss | 4 +--- core/src/components/item/item.ios.scss | 12 +++++++---- core/src/components/item/item.ios.vars.scss | 7 ++---- core/src/components/item/item.md.scss | 5 +---- core/src/components/item/item.md.vars.scss | 7 ++---- .../thumbnail/test/basic/thumbnail.e2e.ts | 20 ++++++++++++++++++ ...-size-diff-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 709 bytes ...size-diff-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 993 bytes ...-size-diff-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 839 bytes ...m-size-diff-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 722 bytes ...-size-diff-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1035 bytes ...m-size-diff-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 857 bytes 12 files changed, 34 insertions(+), 21 deletions(-) create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index d6f19f27a0..fb5e19dc08 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -96,13 +96,11 @@ height: $item-md-avatar-height; } - // Material Design Item Divider Thumbnail // -------------------------------------------------- ::slotted(ion-thumbnail) { - width: $item-md-thumbnail-width; - height: $item-md-thumbnail-height; + --size: #{$item-md-thumbnail-size}; } // Material Design Item Divider Avatar/Thumbnail diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index d6aa6e76fb..9be8327870 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -154,8 +154,7 @@ font-size: 13px; } - -// iOS Item Avatar & Thumbnail +// iOS Item Avatar // -------------------------------------------------- ::slotted(ion-avatar) { @@ -163,11 +162,16 @@ height: $item-ios-avatar-height; } +// iOS Item Thumbnail +// -------------------------------------------------- + ::slotted(ion-thumbnail) { - width: $item-ios-thumbnail-width; - height: $item-ios-thumbnail-height; + --size: #{$item-ios-thumbnail-size}; } +// iOS Item Avatar/Thumbnail +// -------------------------------------------------- + ::slotted(ion-avatar[slot="end"]), ::slotted(ion-thumbnail[slot="end"]) { @include margin(($item-ios-padding-end * 0.5)); diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index c565676e68..e5e5b2aa80 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -33,11 +33,8 @@ $item-ios-avatar-width: 36px !default; /// @prop - Height of the avatar in the item $item-ios-avatar-height: $item-ios-avatar-width !default; -/// @prop - Width of the thumbnail in the item -$item-ios-thumbnail-width: 56px !default; - -/// @prop - Height of the thumbnail in the item -$item-ios-thumbnail-height: $item-ios-thumbnail-width !default; +/// @prop - Size of the thumbnail in the item +$item-ios-thumbnail-size: 56px !default; /// @prop - Color of the detail arrow icon $item-ios-detail-icon-color: $item-ios-border-color !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 66570ae0b4..2802d7950e 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -258,7 +258,6 @@ @include padding-horizontal($item-md-note-end-slot-padding-start, $item-md-note-end-slot-padding-end); } - // Material Design Item Avatar // -------------------------------------------------- @@ -267,13 +266,11 @@ height: $item-md-avatar-height; } - // Material Design Item Thumbnail // -------------------------------------------------- ::slotted(ion-thumbnail) { - width: $item-md-thumbnail-width; - height: $item-md-thumbnail-height; + --size: #{$item-md-thumbnail-size}; } // Material Design Item Avatar/Thumbnail diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 848480d257..8d225813e7 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -18,11 +18,8 @@ $item-md-avatar-width: 40px !default; /// @prop - Height of the avatar in the item $item-md-avatar-height: $item-md-avatar-width !default; -/// @prop - Width of the thumbnail in the item -$item-md-thumbnail-width: 56px !default; - -/// @prop - Height of the thumbnail in the item -$item-md-thumbnail-height: $item-md-thumbnail-width !default; +/// @prop - Size of the thumbnail in the item +$item-md-thumbnail-size: 56px !default; /// @prop - Color of the detail arrow icon $item-md-detail-icon-color: $item-md-border-color !default; diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts index 79b200d561..4ddf1bba07 100644 --- a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts +++ b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts @@ -24,4 +24,24 @@ test.describe('thumbnail: basic', () => { await expect(referenceEl).toHaveScreenshot(`thumbnail-ion-item-diff-${page.getSnapshotSettings()}.png`); }); + + test('size should be customizable in ', async ({ page, skip }) => { + skip.rtl(); + + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/22935', + }); + + await page.setContent(` + + + + + + `); + + const item = page.locator('ion-item'); + await expect(item).toHaveScreenshot(`thumbnail-ion-item-size-diff-${page.getSnapshotSettings()}.png`); + }); }); diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2b49479546ff05999808dc36a5d2f5a81ed72fb8 GIT binary patch literal 709 zcmeAS@N?(olHy`uVBq!ia0y~yVC)34bvW37TrBx}zWjH8wJ5Jep~uDDb6>)YO9ksn3n%UT za-hk!TCB#dAmO~FHUIN>rz>x#{rX#H&+ve8b1FYW!%I~ah7&?U3@MzP44Yb57$TjR z8gvvH9i~lSQ1JF(m;jSL+yA@Odj7HB``%7}Tr1D8*myF7LiQWu&N-h~cYMn{a`I?F z?P|G=mwGaE{IXOSdRBdy@Zy_N8Gn$6&66ieQ;#Jbd6wmpy6%M_qrobt>9cq3?f5?b zGh^ZPpP|36Zcio^|PkU`nKQo&L63F>HSO#YFb;5Jbd}#^Q|D4RI{Y#j~C?WE169T zzJ2dvLA)Ykz&@Z6e(&cbtqQ%&^XTyOFMB?zOzjA{zRF!EMD888L#0{~%eHL>7Qc3V zQh9Xsvt#scovl|_3C?||;>LVnMa(j0g={6`&eQWVCs)1KI4hHPw=VDMWmjv4W!{O# zooTfner}pPZHn2n%f-KQ1O%i{uYCJ1=+Zuwia!T#c^ z|CUVEHT(4$o@(o;NOiBgb8qU7m#%MWdo%32GHm=x-)`=I=q!8xtI@vUW#EsO%TC1{xmFcbW@WRt zK5$*6f3?8084SzLANl8hD31BS|Kq7v44Xg^zyFORgTdT0#6^1VU-p0Z_Enm{3ug+L abicfAlKqbCQWapjWbkzLb6Mw<&;$StR7oNL literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f814c6f397f18c7940a144dba958389fbbb90b32 GIT binary patch literal 993 zcmeAS@N?(olHy`uVBq!ia0y~yVC)34bvW37SS<`cWMVWN9Tma;q}|EFJNcoGJ){x#Cu>-gUgr)ZKzZK*6EmfEiP=)1e(e7DMA)mX?-{jtvZqOx9c+oXyQZ22jKh zD8%Waul9C(2`^A~uib+Ph;*55}Fp3UY};yo1M+ z=uA(bJ6^H0i3z>8ci$7y8S(EzzD=#oqdOr-o?LwU_N>Y(>B(Gb4hbzRUF}D1^>-Xi z7t~bwSGHurjJ*Pd1@-mXiiS>$kFFI^2$<_|ae@b9;rq-Z%dgs8Pkt=;S^RgilgE>r znXW)9gqU2Nl~|9=H||JoR}PX`qTG6X`TD=9OC?>oy51?Oc$MtV76Q7-e?f%Dk^&FK zi?)1kx@TBQPQ0ct&AzN|?z|Uk0(JIw{`j}~x>>7Bc`wl1(j{TQ0MSqk&{273{#rnL zw%AJj`FV26rj8#Uq}EGbKj*f_l=0(_()Zt2s(Gw4e=Yn{KuC4hT~kg0g$e3FO?kTC z@)T^7W?9Q`{IKEk?VZAN>*M#_=4e_yH}d$asP}VbZ+22z&%IU2p~1njabe4ml_xto z(`1#-iUm2uSYFnAadEX@z>-L}Dx0m9&lFWomG06O26`YI7^q&E?m!=Nv9<{bWtv}( z*?jClVQ{Om&q)@JKi8R#IvqOnwcb|mjtwxfud#Nu9+{@Q;q2@yucH&px9weKzi*$c zS#D$P?VQHkxIM4swjGd~3-qQ0Z)1|;#8bE5rSAIZeAZgP-RkK6|Ciom{JO^fFm=~O z35j=2z=YzOF7)!z>-kS3Zv6`T>h~pc^_xFE=Zhp}fea9BTx8st7x3f2{S_tKe*=@B zgLUI0#fy9AZgKm#=V!=|XXT2Q{x99W`uy*ZirsOSX910K7Lthac(YAz{?i+4=X?gH znGf%ooF3ihjco)y)SxZDfNVII%Bv3SHE2tDL-J%S1ODmJpqCbJjZMESJ<*LK?AefmxTq M)78&qol`;+0IbTEIsgCw literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..e59497e1d407296116f0ad039fd19d331acf0176 GIT binary patch literal 839 zcmeAS@N?(olHy`uVBq!ia0y~yU~B`jbvT%S|H*Yfr06d zr;B4q#hkZyqVuI)W!fKJZ|~*5vG%b{ijZoqhl7X6O7W>$KmM)S;mX>nG;3As6swKG z@|TW$y%nin#sli9b>`pNs*+#*~hQ8n8etr!x3!7(04Ua1I^Jj!yuD^d&=Idth zDOr=MO+0-{_Qp;!0 zTY2U)j(j`M=ZyJLF8OCtPGu>-HQse(?><%CNv4w?{rsx^KdSYj>VdG?yG!3) zyP3t@qqj2r-uwvy=ks>-sZ6w;n@To=nL)9MTMwRJfBE0k6CPl1ZMf$n{c+A=J^uHX*BH(; znt5r>=MQrFyRI)@!n=Rklr0f_`FF~$SJqBDry)C6=={&D_9DRqv*(r5CkNiz9Fb6N zTkYuSt=;aiD*VRnCmUw}vym&ZQPEn@7pTmupW}Wz z_g((8Am2-uPUYTwJN>pvw$1x{ANuN-o~dhJdv%W&FhVNx{5IWPcKK1tk(ZW}B^E?2 zyPNX3FaM^>U9WS|JEnG(M3qGSj0?T=-*uTsRQ8`@dCy&YohI#g<`bkb=kY`l0cFo1 zhaMGAM#D)etVcX1;SexdTWI}u{?k(VNi2UDS99#s4iVaO2beP$JYD@<);T3K0RRX0 Bh(7=T literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac78f4d53d8697115f1b2b8a771141bfa78d3d5 GIT binary patch literal 722 zcmeAS@N?(olHy`uVBq!ia0y~yVC)344LI0<&Fr-jD>_%xmfb|eEEO;bY6=>Pg~!lnu7*QFUGunq*DB{ z@r3ao*7MBl->lQqt;^-l-8M6p>UCpe_&%fd4I@K9tP@j%jv}MOvf{*ypYvgASi^o^rRdyxrK;tE>f)2X zdav!c>gTfCaBV)@f+>#_4JF*($S#?%u=qUJoC!B zZ9nUcwhF_l6Egz5LRdhkIvV_g-6ak*^_3+idcS zEyvdD|IYNxELOGse(o6K#+{RH<>{N=eaG!kDl*%1&l{gShw}c*n#<;zKmOaf^xAvn z4aduWGX>Zlby{@S){V#TT@9FY8bJgp)u3zf!+~;q2rMatc@7A*KVWt1w zk6gSS@{gw@&Gswff>~W{F1dP1)qmfovAuPxS}*^DdBwU%%V%d53*MH_y!rCOmv^o^ z{j}dYMkFz<*thcU{Fc3J4gcqZ{BX9%ZSloqex`;jqsc_YIV?%o{#br!_uahCLWTgx b{R}H^PHKB}BG((3NEtj`{an^LB{Ts5{y0Z( literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..05ff9c24039b790d7292aa6a5ed9decac93d67fb GIT binary patch literal 1035 zcmeAS@N?(olHy`uVBq!ia0y~yVC)344LI0<mmGq2ElezFbYPaRe*6C2)#C~+3%GSvMVBg0nVPcQc(>lJm&eXk-MKdRd?n{K zwu+ z5)=?RTC&xNQ$S&YzJki9vs)A#8XOFnoEFVk7p4JJ@QJm>W#3FOphX&P4=yNf{Ie)- z^>6dnf9>wOH304X3pD@V+bt>%4F^te%S3wQ)O1F~_DB4_l4((_m{ew!^y<&SZD~Tv z_RmB-8V(o=t*}+uR`0fEPnU<{$MwpsM-F}MxU6n{UP$P8#+M%}SvY$3IILBi$n@yq z>5j8&@7+;5raUdLgspYLi?inA0JX_x$qJ3OmEs z`Y&J?E-ppId8Iz47b&SI6fn?6^FuG$;4{w#p3( zDpjwI(ghV95(=2yg@mRrS5jMD+F=sy!C3e^YxRQk{AkCCX_7C$UAZ^2eS$>H^4&r} z2UUp*2<`Q<><8My$|d9JvE;5#_f@Ip+rF%Q8mhty20=_)TU%ORPm~hxQUpd>@Pcg< zZfs}WRyAqYPS&#Y+u6G!imh{QG5ub6iz(W+;<{Z*ANa!iNr*9JVz0qXkShSF9#`#9yn?bx-~ueD&^%%V9T{R<3_)AObRA z4b#?hDz_XTveqBIb+=9<x&x_&dKny)1R~^{dc_)$?0D>b?EL&sT<4#OYhk272JX z=YtbYi|$wLnYK9I@+~Ma?r)f|;{FwLAz+xKu<*$WDJw4&0Hx*|>cDi(1!BDzpcH;F kBjms6TyWNN3wpr+W_FpZ#^Mh@ftj4a)78&qol`;+01iH(7ytkO literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f23ccdcce525a6a68b02c1ab01e7ce249650cd05 GIT binary patch literal 857 zcmeAS@N?(olHy`uVBq!ia0y~yU~B`j4LF#9|H*Yfq|LN z)5S5QV$R#U-u}|z3=R(;i`QN8>tQ_2>gcpEbjgw+v5AYm{nviA%}d)fw0Y{5C5AH| zurnS{HjXU`l4=R5_PM(HSIz3g8P{LE_|=y_r}MFdCztcL{rea^cO^|yVLhVa$<^UG zNkm|>il%~^XOM%>q$LeAR6H3CJtr|?DEL`fUh&QQ*W}vW^XuY0Pba)nxtmes`QBDu zsUfNH>iH9ve-n(a? zUEj~YQy$y(Z;RZ$`Glm3?({G7*H=BasV{Zz|7W!G$?xlP<}I~rUb1v@(G-*3%70y_ z`{l23Rc^b!BD`Z^{kiqAi!>c%K0nT{`8+k)ds5mYBhhyC9`%z&YtLM+-6YA^mmxp# z?5C3XS(-oJw|5+#e0xWbr?t1zLdQENr`?wF!HC7oX zq$fYrp1OtQQqQDEGd2fqy0gNl>jj^tc*UmUlWkA2?s9fZ4qJWFteN|dsEFrgkI73i zs!C7qk4Y(D+;HOZO>zUSHxFq*uPxW@dmE!p zWj1%z=CjW5sl55HVnWW$vl}+oX;0UB`CmVEl9p@PY?+ct_Wi$PzG^;c@Lx8e;jUWh z{F2Egv%eJE?DpLzHGfU#vg_4bu0E(U{tAqgxvg@$Yd5&AJ#+dT@An_!pWbY}5fl65 z!=!2F7U`?s%(}3u*yh1q$;BKCrYsLke%x1nQ|0VivABoRPG4Ged6j;his$LPcPeW` z|5r+TdZ`N^x2spv6gl_ZgM