feat(avatar): add styles for small size in ionic theme (#29540)

Issue number: internal

---------

## What is the current behavior?
Avatar does not have styles for the `"small"` size in the ionic theme.

## What is the new behavior?
- Adds the styles for the small size (width, height, padding, font size)
- Adds e2e test for small 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-10734-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)

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,"medium" | undefined,undefined,false,false
+ion-avatar,prop,size,"medium" | "small" | 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

@@ -336,9 +336,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"medium"` for the default height and width.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a compact size, or to `"medium"` for the default height and width.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'medium';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5568,9 +5568,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Set to `"medium"` for the default height and width.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"small"` for a compact size, or to `"medium"` for the default height and width.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: 'medium';
+        "size"?: 'small' | 'medium';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -5,6 +5,9 @@
 // --------------------------------------------------
 
 :host {
+  --padding-top: #{globals.$ionic-space-0};
+  --padding-bottom: #{globals.$ionic-space-0};
+
   display: flex;
 
   align-items: center;
@@ -25,10 +28,18 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+:host(.avatar-small) {
+  --padding-end: #{globals.$ionic-space-150};
+  --padding-start: #{globals.$ionic-space-150};
+
+  width: globals.$ionic-scale-800;
+  height: globals.$ionic-scale-800;
+
+  font-size: globals.$ionic-font-size-350;
+}
+
 :host(.avatar-medium) {
-  --padding-top: #{globals.$ionic-space-0};
   --padding-end: #{globals.$ionic-space-200};
-  --padding-bottom: #{globals.$ionic-space-0};
   --padding-start: #{globals.$ionic-space-200};
 
   width: globals.$ionic-scale-1000;

core/src/components/avatar/avatar.tsx

@@ -20,11 +20,11 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * Set to `"medium"` for the default height and width.
+   * Set to `"small"` for a compact size, or to `"medium"` for the default height and width.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: 'medium';
+  @Prop() size?: 'small' | 'medium';
 
   get hasImage() {
     return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');

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

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

@@ -30,15 +30,26 @@
       </ion-header>
 
       <ion-content class="ion-padding" id="content" no-bounce>
-        <h2>Text</h2>
+        <h2>Default</h2>
         <div class="container">
           <ion-avatar>AB</ion-avatar>
+          <ion-avatar>
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+          <ion-avatar>
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
+        </div>
+
+        <h2>Text</h2>
+        <div class="container">
+          <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
         </div>
 
         <h2>Icons</h2>
         <div class="container">
-          <ion-avatar>
+          <ion-avatar size="small">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
           <ion-avatar size="medium">
@@ -48,7 +59,7 @@
 
         <h2>Images</h2>
         <div class="container">
-          <ion-avatar>
+          <ion-avatar size="small">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
           <ion-avatar size="medium">