feat(avatar): add xxsmall size (#29697)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/api.txt

@@ -185,7 +185,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,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | 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

core/src/components.d.ts

@@ -340,9 +340,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5596,9 +5596,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/avatar/avatar.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar";
+@import "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -30,6 +30,20 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: #{globals.$ionic-space-050};
+  --padding-start: #{globals.$ionic-space-050};
+
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ionic-space-050};
   --padding-start: #{globals.$ionic-space-050};
@@ -39,9 +53,10 @@
 
   font-size: globals.$ionic-font-size-300;
 
-  line-height: globals.$ionic-line-height-400;
+  line-height: globals.$ionic-line-height-500;
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ionic-space-150};
   --padding-start: #{globals.$ionic-space-150};
@@ -54,6 +69,7 @@
   line-height: globals.$ionic-line-height-600;
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-200};
@@ -64,6 +80,7 @@
   font-size: globals.$ionic-font-size-450;
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ionic-space-250};
   --padding-start: #{globals.$ionic-space-250};
@@ -74,6 +91,7 @@
   font-size: globals.$ionic-font-size-500;
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ionic-space-300};
   --padding-start: #{globals.$ionic-space-300};
@@ -87,6 +105,7 @@
 // Avatar Shapes
 // --------------------------------------------------
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: #{globals.$ionic-border-radius-100};

core/src/components/avatar/avatar.ios.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.ios.vars";
 
 // iOS Avatar

core/src/components/avatar/avatar.md.scss

@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.md.vars";
 
 // Material Design Avatar

core/src/components/avatar/avatar.tsx

@@ -20,13 +20,16 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
+   * Set to `"xxsmall"` for the smallest size.
-   * for the default height and width, `"large"` for a larger size, or `"xlarge"` for
+   * Set to `"xsmall"` for a very small size.
-   * the largest dimensions.
+   * Set to `"small"` for a compact size.
+   * Set to `"medium"` for the default height and width.
+   * Set to `"large"` for a larger size.
+   * Set to `"xlarge"` for the largest dimensions.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
    * Set to `"soft"` for an avatar with slightly rounded corners,

core/src/components/avatar/test/shape/avatar.e2e.ts

@@ -108,6 +108,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
             <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
             <ion-avatar shape="soft" size="small">AB</ion-avatar>
             <ion-avatar shape="soft">AB</ion-avatar>
@@ -132,6 +133,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <ion-icon name="person-outline"></ion-icon>
             </ion-avatar>
@@ -162,6 +166,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <img src="/src/components/avatar/test/avatar.svg"/>
             </ion-avatar>

core/src/components/avatar/test/shape/index.html

@@ -43,6 +43,7 @@
 
         <h2>Soft</h2>
         <div class="container">
+          <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="soft" size="small">AB</ion-avatar>
           <ion-avatar shape="soft" size="medium">AB</ion-avatar>
@@ -52,6 +53,7 @@
 
         <h2>Round</h2>
         <div class="container">
+          <ion-avatar shape="round" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="round" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="round" size="small">AB</ion-avatar>
           <ion-avatar shape="round" size="medium">AB</ion-avatar>
@@ -61,6 +63,7 @@
 
         <h2>Rectangular</h2>
         <div class="container">
+          <ion-avatar shape="rectangular" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="rectangular" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="small">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="medium">AB</ion-avatar>

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('xxsmall', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">A</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-image`));
+      });
+    });
+
     test.describe('xsmall', () => {
       test('should not have visual regressions when containing text', async ({ page }) => {
         await page.setContent(

core/src/components/avatar/test/size/index.html

@@ -43,6 +43,7 @@
 
         <h2>Text</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">A</ion-avatar>
           <ion-avatar size="xsmall">AB</ion-avatar>
           <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
@@ -52,6 +53,9 @@
 
         <h2>Icons</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
@@ -71,6 +75,9 @@
 
         <h2>Images</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>