From b4ce7129b23f06de1eca98884703c99a49b186cb Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 28 May 2024 09:48:02 -0400 Subject: [PATCH] feat(avatar): add styles for xsmall size in ionic theme (#29548) Issue number: internal --------- ## What is the current behavior? Avatar does not have styles for the `"xsmall"` size in the ionic theme. ## What is the new behavior? - Adds the styles for the xsmall size (width, height, padding, font size, font weight and line height) - Adds e2e test for xsmall size to the existing avatar test for sizes ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information [Preview](https://ionic-framework-git-rou-10733-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic) --- core/api.txt | 2 +- core/src/components.d.ts | 8 ++-- core/src/components/avatar/avatar.ionic.scss | 14 ++++++ core/src/components/avatar/avatar.tsx | 6 +-- .../components/avatar/test/size/avatar.e2e.ts | 45 ++++++++++++++++++ ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 390 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 396 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 384 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 438 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 376 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 418 bytes ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 490 bytes ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 525 bytes ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 456 bytes .../components/avatar/test/size/index.html | 7 +++ 15 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png create mode 100644 core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png diff --git a/core/api.txt b/core/api.txt index f97c5a7328..4eeea12614 100644 --- a/core/api.txt +++ b/core/api.txt @@ -184,7 +184,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-avatar,shadow ion-avatar,prop,mode,"ios" | "md",undefined,false,false -ion-avatar,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false +ion-avatar,prop,size,"large" | "medium" | "small" | "xsmall" | undefined,undefined,false,false ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-avatar,css-prop,--border-radius,ionic ion-avatar,css-prop,--border-radius,ios diff --git a/core/src/components.d.ts b/core/src/components.d.ts index fdef0c5812..be9bca602a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -336,9 +336,9 @@ export namespace Components { */ "mode"?: "ios" | "md"; /** - * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small' | 'medium' | 'large'; + "size"?: `xsmall` | 'small' | 'medium' | 'large'; /** * The theme determines the visual appearance of the component. */ @@ -5568,9 +5568,9 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - "size"?: 'small' | 'medium' | 'large'; + "size"?: `xsmall` | 'small' | 'medium' | 'large'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss index 83f703fb0a..fbb2af9a6b 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -28,6 +28,20 @@ // Avatar Sizes // -------------------------------------------------- +:host(.avatar-xsmall) { + --padding-end: #{globals.$ionic-space-050}; + --padding-start: #{globals.$ionic-space-050}; + + width: globals.$ionic-scale-600; + height: globals.$ionic-scale-600; + + font-size: globals.$ionic-font-size-300; + + font-weight: globals.$ionic-font-weight-medium; + + line-height: globals.$ionic-line-height-500; +} + :host(.avatar-small) { --padding-end: #{globals.$ionic-space-150}; --padding-start: #{globals.$ionic-space-150}; diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 982f28b91b..7628a19d94 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -20,12 +20,12 @@ export class Avatar implements ComponentInterface { @Element() el!: HTMLElement; /** - * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to - * `"large"` for a larger size. + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` + * for the default height and width, or to `"large"` for a larger size. * * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. */ - @Prop() size?: 'small' | 'medium' | 'large'; + @Prop() size?: `xsmall` | 'small' | 'medium' | 'large'; get hasImage() { return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts index 7502a0fa48..75f65222d7 100644 --- a/core/src/components/avatar/test/size/avatar.e2e.ts +++ b/core/src/components/avatar/test/size/avatar.e2e.ts @@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('avatar: size'), () => { + test.describe('xsmall', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-image`)); + }); + }); + test.describe('small', () => { test('should not have visual regressions when containing text', async ({ page }) => { await page.setContent( diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..cc70a57b5c4cffacf6dc4014d0e1afdd2d9e6c45 GIT binary patch literal 390 zcmV;10eSw3P)Px$KuJVFR7i>KmZ6TqKoEw%p*TpYFkrAK3>7>8NgE^y2FDxlB)kJ5JOQ#*71bE9 zg#<7lDlh~xXD-}vcj+x$n_P1DyUEVXxARZ3Ss4z8N{%W5jK||#nvX^!3b}NCr++}U zfc1J!9LEm3 zFrUv6kz1^)hzQ+o_h$fAWipx2>2#=8t9NJH?Uw0u%3v_KgMU=&l6~LDahy-h0cy1x z&1RDz2%ekZdcBe)2_nLNzyC5vRY{WMX4yjk%d+r1kIiP2dc$_RooZ3)4oamGjYcCC k@ST3wYx*|2LJ#707*qoM6N<$f;ldxbpQYW literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..ce9e4960f9d1226f079a58e90931d1f4dd3da689 GIT binary patch literal 396 zcmV;70dxL|P)w5z-p4-|um|-7uX_sc0C67>~!8OeX#GV7J?WWm%}IN(DEY4R!Ln zL;V1Qk>^GE|&`hh@uEV z5c+Gf@B3gF<{?P(C*Ou)bc=`xxvq=ZYz9e^p2X5LMI6UityWL)zeSA^ZMR#DMk6SS zQu)%u;ehk`3|-eN?`r`?QNZ&&@I3$Wg~TCg{(L^KtZ8&WHurQo)#gkVj^nuZ9W;(e qi-JZ6Ei}4K(HHROLDwki{{I0(Z`hHRy-fxH0000{`dTN#h`-PF2Va2gkwHKs^V!Od9 zKZZKySZjSgp82&(2*fgW- z^-3xI+S|5WRh6OG1i7x8=lT79zuj*8{eC{R*84pp e?+1}reMg_-JY>AIVwPe60000ZykS literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bbb8b4aabdb46335be06fbca122f63722b9b58bd GIT binary patch literal 438 zcmV;n0ZIOeP)Px$a7jc#R7i=vm0eH5FcgNLjc+nEq9_^-5%Cuo2D%PZI~axQ&Y9EulhnJ zLu#If1$s-m!Q|6q8<{ID6&#mWThlw=S)^jySK~c9-;$- zjothG&c5^AWsd5@At_eoe*yfLk(b4JcTaz{Xz&j8TWCE-Mazq@wFcQ4JIo4D@#6+O z_kR}2dr+&|Ay&Zo4cz(m4p)n?vu<8v1Zek%7j9nf@5TV=K-C_XQkzVJH-16t0PXzX z%%y*bWsyp!I%EX|F>Ojrdxn_iB&L-FF%2P?t;x7*Jh#gU588O&sr)M3#vJ1u=$5W{ z@4w0n5qbCQ3#3Ni~*O`L zbi5zxINYVR7d3Dc(fKU{ zH?1N>DXs@he2$wCmVYo>+cKv=;?eyUdAcD?PnbRt2KgVtVRJLI3~& literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..bfc3fa1a8ad968977cbef63ea4258ecc7d302292 GIT binary patch literal 490 zcmVPx$q)9|UR7i>Kmc7d2Koo`_bX zD#0sA#J@&Mi9aY-=>&C~-LQ-K78}_uobH@=cpuK0Gs8qI%X;v}^##!D_1-_(32X21CU50C>D#aSKzuX@pv3nRmo&Bh@$w^rfRiHyWOVQY!Zvb7!HT8RdBstSuU4c zuU8t4Mvz}D7E~&gAQl7xNs^Ex30>Di&nXn}%e+>rkxHciI3AA-1_M^B73p*uevYf> zdHBB1d_I4gvTp&d>mtiChG7IbRaF^}$2g7?0BqaFwrvDKAe+rnE|)_A5zDe3pXd4m g_`d;>cYj-c0FGal+sDo!+W-In07*qoM6N<$f@7}RkpKVy literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6423dfa3396176120ece250b9a5d8a6153b5f571 GIT binary patch literal 525 zcmV+o0`mQdP)~Pu_K{+dWKir@A0>=4(>ySWqTbtR`hrl8=<+-riGA zo!ooR>E7<<-Okf<-rxKD{_jhLLZJ`*sQ!`yJVA7T4<)KA#T`hl2%BDwVKU zEVx`Q7!HS!$z+JdV*CNigw^BIjs0|J2n(P)$(fM_9l+-^7Qb~`ee46IfwJRT1N zcxFHfLZJ}ha2Q&xmLFg?n}GyOw8-UhbUGbuw_BvsX;2hJPoP$-;c~g~cswu~jj-8l zkV>T>5{Vedw;|VRHLTa`munb_M4;2@Sc*u~YPCYM*<@)X^)CU3!vV!&kyc_dnP><( zCCR~THX|4e(g2c&&1S>xcEe;c!EU!hp-|wSU_2h9-|r)r%RwrYGE;QBT`U$08eT4! znRh^xs8lL=y_XM0K8AY6(e`xpw#=;k%C#nJ7 P00000NkvXXu0mjf;U?{D literal 0 HcmV?d00001 diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..01b707b35bb5935c5035b73ea702524d9175a413 GIT binary patch literal 456 zcmV;(0XP1MP){|K)O+>rtRtWwB2i;oHI|QT@vBPz{p6Q&EoFCtpKoZk+9X=5P08FRTKT-yR z!Othu004YJ(ILF-P9~FhJU$wYczHgb$Kx^25kjh}w%hGQA`t;{UH5c40RUr6lB8!} z)3j2lbUYpxiv>cc*=z=TCL%5*zflRL72^E?-cpI?>LU@8}oIfRUJRNruV*0000Text
+ AB AB AB AB @@ -50,6 +51,9 @@

Icons

+ + + @@ -63,6 +67,9 @@

Images

+ + +