feat(Avatar): add 2xs Avatar size

src/components/Avatar/Avatar.scss

@@ -72,6 +72,12 @@ $block: '.#{variables.$ns}avatar';
             }
         }
 
+        &_2xs {
+            --_--font-size: var(--g-text-caption-1-font-size);
+            --_--line-height: var(--g-text-caption-1-line-height);
+            --_--font-weight: var(--g-text-caption-font-weight);
+        }
+
         &_xs,
         &_s {
             --_--font-size: var(--g-text-caption-1-font-size);

src/components/Avatar/AvatarIcon/AvatarIcon.tsx

@@ -6,6 +6,7 @@ import type {AvatarSize} from '../types/common';
 import type {AvatarIconProps} from './types';
 
 const avatarSizeToIconSize: Record<AvatarSize, number> = {
+    '2xs': 12,
     xs: 14,
     s: 16,
     m: 16,

src/components/Avatar/README.md

@@ -141,19 +141,21 @@ LANDING_BLOCK-->
 
 ### Size
 
-To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `xs`, `s`, `m`, `l`, `xl`.
+To control the size of the `Avatar` use the `size` property. The default size is `m`. Possible values: `2xs`, `xs`, `s`, `m`, `l`, `xl`.
 
 <!--LANDING_BLOCK
 
 <ExampleBlock
     code={`
+<Avatar text="Charles Darwin" theme="brand" size="2xs" />
 <Avatar text="Charles Darwin" theme="brand" size="xs" />
 <Avatar text="Charles Darwin" theme="brand" size="s" />
 <Avatar text="Charles Darwin" theme="brand" size="m" />
 <Avatar text="Charles Darwin" theme="brand" size="l" />
 <Avatar text="Charles Darwin" theme="brand" size="xl" />
 `}
 >
+    <UIKit.Avatar text="Charles Darwin" theme="brand" size="2xs" />
     <UIKit.Avatar text="Charles Darwin" theme="brand" size="xs" />
     <UIKit.Avatar text="Charles Darwin" theme="brand" size="s" />
     <UIKit.Avatar text="Charles Darwin" theme="brand" size="m" />
@@ -167,19 +169,19 @@ LANDING_BLOCK-->
 
 ### Common
 
-| Name            | Description                             |              Type               | Default  |
-| :-------------- | :-------------------------------------- | :-----------------------------: | :------: |
-| size            | Avatar size                             | `'xs'` `'s'` `'m'` `'l'` `'xl'` |   `m`    |
-| theme           | Avatar theme                            |      `'normal'` `'brand'`       | `normal` |
-| view            | Avatar view                             |     `'filled'` `'outlined'`     | `filled` |
-| backgroundColor | Custom background color                 |            `string`             |          |
-| borderColor     | Custom border color                     |            `string`             |          |
-| title           | HTML `title` attributes                 |            `string`             |          |
-| aria-label      | `aria-label` for avatar block           |            `string`             |          |
-| aria-labelledby | `aria-labelledby` for avatar block      |            `string`             |          |
-| className       | Custom CSS class for root element       |            `string`             |          |
-| style           | HTML style attribute                    |      `React.CSSProperties`      |          |
-| qa              | HTML `data-qa` attribute, used in tests |            `string`             |          |
+| Name            | Description                             |                  Type                   | Default  |
+| :-------------- | :-------------------------------------- | :-------------------------------------: | :------: |
+| size            | Avatar size                             | `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` |   `m`    |
+| theme           | Avatar theme                            |          `'normal'` `'brand'`           | `normal` |
+| view            | Avatar view                             |         `'filled'` `'outlined'`         | `filled` |
+| backgroundColor | Custom background color                 |                `string`                 |          |
+| borderColor     | Custom border color                     |                `string`                 |          |
+| title           | HTML `title` attributes                 |                `string`                 |          |
+| aria-label      | `aria-label` for avatar block           |                `string`                 |          |
+| aria-labelledby | `aria-labelledby` for avatar block      |                `string`                 |          |
+| className       | Custom CSS class for root element       |                `string`                 |          |
+| style           | HTML style attribute                    |          `React.CSSProperties`          |          |
+| qa              | HTML `data-qa` attribute, used in tests |                `string`                 |          |
 
 ### Image-specific
 

src/components/Avatar/__stories__/Avatar.stories.tsx

@@ -145,6 +145,14 @@ export const AvatarShowcase: Story = {
         return (
             <React.Fragment>
                 <Showcase title="Image">
+                    <ShowcaseItem title="2xs">
+                        <Avatar
+                            {...imageProps}
+                            size="2xs"
+                            alt="Sample image"
+                            aria-label="Avatar with 2XS size"
+                        />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar
                             {...imageProps}
@@ -185,6 +193,15 @@ export const AvatarShowcase: Story = {
                             aria-label="Avatar with XL size"
                         />
                     </ShowcaseItem>
+                    <ShowcaseItem title="2xs">
+                        <Avatar
+                            {...imageProps}
+                            size="2xs"
+                            borderColor={BORDER_COLOR}
+                            alt="Sample image"
+                            aria-label="Avatar with 2XS size and border"
+                        />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar
                             {...imageProps}
@@ -232,6 +249,9 @@ export const AvatarShowcase: Story = {
                     </ShowcaseItem>
                 </Showcase>
                 <Showcase title="Icon">
+                    <ShowcaseItem title="2xs">
+                        <Avatar {...iconProps} size="2xs" aria-label="Sample icon" />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar {...iconProps} size="xs" aria-label="Sample icon" />
                     </ShowcaseItem>
@@ -247,6 +267,14 @@ export const AvatarShowcase: Story = {
                     <ShowcaseItem title="xl">
                         <Avatar {...iconProps} size="xl" aria-label="Sample icon" />
                     </ShowcaseItem>
+                    <ShowcaseItem title="2xs">
+                        <Avatar
+                            {...iconProps}
+                            size="2xs"
+                            borderColor={BORDER_COLOR}
+                            aria-label="Sample icon"
+                        />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar
                             {...iconProps}
@@ -289,6 +317,9 @@ export const AvatarShowcase: Story = {
                     </ShowcaseItem>
                 </Showcase>
                 <Showcase title="Text">
+                    <ShowcaseItem title="2xs">
+                        <Avatar {...textProps} size="2xs" aria-label="CD" />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar {...textProps} size="xs" aria-label="CD" />
                     </ShowcaseItem>
@@ -304,6 +335,14 @@ export const AvatarShowcase: Story = {
                     <ShowcaseItem title="xl">
                         <Avatar {...textProps} size="xl" aria-label="CD" />
                     </ShowcaseItem>
+                    <ShowcaseItem title="2xs">
+                        <Avatar
+                            {...textProps}
+                            size="2xs"
+                            borderColor={BORDER_COLOR}
+                            aria-label="CD"
+                        />
+                    </ShowcaseItem>
                     <ShowcaseItem title="xs">
                         <Avatar
                             {...textProps}

src/components/Avatar/_variables.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 $sizes: (
+    '2xs': 20px,
     'xs': 24px,
     's': 28px,
     'm': 32px,

src/components/Avatar/constants.ts

@@ -1,6 +1,7 @@
 import type {AvatarSize} from './types/common';
 
 export const AVATAR_SIZES: Record<AvatarSize, number> = {
+    '2xs': 20,
     xs: 24,
     s: 28,
     m: 32,

src/components/Avatar/types/common.ts

@@ -1,4 +1,4 @@
-export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type AvatarSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 
 export interface AvatarCommonProps {
     size: AvatarSize;

src/components/User/README.md

@@ -28,21 +28,23 @@ LANDING_BLOCK-->
 
 ## Size
 
-To control the size of the `User` use the `size` property. The default size is `m`. Possible values: `xs`, `s`, `m`, `l`, `xl`.
+To control the size of the `User` use the `size` property. The default size is `m`. Possible values: `2xs`, `xs`, `s`, `m`, `l`, `xl`.
 
 This propeperty passes to the internal `Avatar` component too.
 
 <!--LANDING_BLOCK
 
 <ExampleBlock
     code={`
+<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="2xs" />
 <User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xs" />
 <User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="s" />
 <User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="m" />
 <User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="l" />
 <User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xl" />
 `}
 >
+    <UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="2xs" />
     <UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xs" />
     <UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="s" />
     <UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="m" />
@@ -59,9 +61,18 @@ LANDING_BLOCK-->
 | avatar          | User avatar                             | [AvatarProps](../Avatar/README.md#properties) `React.ReactElement` |         |
 | name            | User name                               |                         `React.ReactNode`                          |         |
 | description     | User description                        |                         `React.ReactNode`                          |         |
-| size            | User block size                         |                  `'xs'` `'s'` `'m'` `'l'` `'xl'`                   |   `m`   |
+| size            | User block size                         |              `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'`               |   `m`   |
 | aria-label      | `aria-label` for user block             |                              `string`                              |         |
 | aria-labelledby | `aria-labelledby` for user block        |                              `string`                              |         |
 | className       | Custom CSS class for root element       |                              `string`                              |         |
 | style           | HTML style attribute                    |                       `React.CSSProperties`                        |         |
 | qa              | HTML `data-qa` attribute, used in tests |                              `string`                              |         |
+
+## CSS API
+
+| Name                         | Description                                                |
+| :--------------------------- | :--------------------------------------------------------- |
+| `--g-user-font-size`         | Name and description font size for `size='s'` and larger   |
+| `--g-user-line-height`       | Name and description line height for `size='s'` and larger |
+| `--g-user-small-font-size`   | Name font size for `size='xs'` and smaller                 |
+| `--g-user-small-line-height` | Name line height for `size='xs'` and smaller               |

src/components/User/User.scss

@@ -3,6 +3,19 @@
 
 $block: '.#{variables.$ns}user';
 
+@mixin user-text() {
+    @include mixins.text-body-short();
+
+    font-size: var(--g-user-font-size, var(--g-text-body-short-font-size));
+    line-height: var(--g-user-line-height, var(--g-text-body-short-line-height));
+}
+
+@mixin user-text-small() {
+    font-size: var(--g-user-small-font-size, var(--g-text-code-inline-1-font-size));
+    line-height: var(--g-user-small-line-height, var(--g-text-code-inline-1-line-height));
+    font-weight: var(--g-text-body-font-weight);
+}
+
 #{$block} {
     display: flex;
     align-items: center;
@@ -18,7 +31,7 @@ $block: '.#{variables.$ns}user';
         flex-direction: column;
         min-width: 0;
 
-        @include mixins.text-body-short();
+        @include user-text();
 
         #{$block}__name {
             color: var(--g-color-text-primary);
@@ -36,7 +49,10 @@ $block: '.#{variables.$ns}user';
     }
 
     &_size {
-        &_xs {
+        &_xs,
+        &_2xs {
+            @include user-text-small();
+
             #{$block}__avatar + #{$block}__info {
                 margin-inline-start: 6px;
             }

src/components/User/User.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {Avatar} from '../Avatar';
 import {block} from '../utils/cn';
 
+import {DEFAULT_USER_SIZE, NO_DESCRIPTION_SIZES} from './constants';
 import type {UserProps} from './types';
 
 import './User.scss';
@@ -20,7 +21,7 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
             avatar,
             name,
             description,
-            size,
+            size = DEFAULT_USER_SIZE,
             'aria-label': ariaLabel,
             'aria-labelledby': ariaLabelledby,
             className,
@@ -29,7 +30,7 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
         },
         ref,
     ) => {
-        const showDescription = Boolean(size !== 'xs' && description);
+        const showDescription = Boolean(description && !NO_DESCRIPTION_SIZES.includes(size));
 
         return (
             <div

src/components/User/constants.ts

@@ -0,0 +1,4 @@
+import type {UserSize} from './types';
+
+export const NO_DESCRIPTION_SIZES: UserSize[] = ['xs', '2xs'];
+export const DEFAULT_USER_SIZE: UserSize = 'm';

src/components/User/types.ts

@@ -4,7 +4,7 @@ import type {DistributiveOmit} from '../../types/utils';
 import type {AvatarProps} from '../Avatar';
 import type {DOMProps, QAProps} from '../types';
 
-export type UserSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type UserSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 
 export interface UserProps extends DOMProps, QAProps {
     avatar?: DistributiveOmit<AvatarProps, 'size' | 'className'> | React.ReactElement<unknown>;