Skip to content

Commit

Permalink
feat(Avatar): add 2xs Avatar size (#1721)
Browse files Browse the repository at this point in the history
  • Loading branch information
@PahaN47
PahaN47 authored Sep 13, 2024
1 parent a232e3b commit 1698d51
Show file tree
Hide file tree
Showing 14 changed files with 104 additions and 22 deletions.
6 changes: 6 additions & 0 deletions src/components/Avatar/Avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/components/Avatar/AvatarIcon/AvatarIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
30 changes: 16 additions & 14 deletions src/components/Avatar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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

Expand Down
Binary file modified ...tar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...vatar.visual.test.tsx-snapshots/Avatar-render-story-Showcase-1-webkit-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions src/components/Avatar/__stories__/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/components/Avatar/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use 'sass:map';

$sizes: (
'2xs': 20px,
'xs': 24px,
's': 28px,
'm': 32px,
Expand Down
1 change: 1 addition & 0 deletions src/components/Avatar/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Avatar/types/common.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
13 changes: 11 additions & 2 deletions src/components/User/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -59,9 +61,16 @@ 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 |
| `--g-user-line-height` | Name and description line height |
22 changes: 20 additions & 2 deletions src/components/User/User.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-font-size, var(--g-text-code-inline-1-font-size));
line-height: var(--g-user-line-height, var(--g-text-code-inline-1-line-height));
font-weight: var(--g-text-body-font-weight);
}

#{$block} {
display: flex;
align-items: center;
Expand All @@ -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);
Expand All @@ -36,7 +49,12 @@ $block: '.#{variables.$ns}user';
}

&_size {
&_xs {
&_xs,
&_2xs {
#{$block}__info {
@include user-text-small();
}

#{$block}__avatar + #{$block}__info {
margin-inline-start: 6px;
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/User/User.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React from 'react';
import {Avatar} from '../Avatar';
import {block} from '../utils/cn';

import {COMPACT_SIZES, DEFAULT_SIZE} from './constants';
import type {UserProps} from './types';

import './User.scss';
Expand All @@ -20,7 +21,7 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
avatar,
name,
description,
size,
size = DEFAULT_SIZE,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
className,
Expand All @@ -29,7 +30,7 @@ export const User = React.forwardRef<HTMLDivElement, UserProps>(
},
ref,
) => {
const showDescription = Boolean(size !== 'xs' && description);
const showDescription = Boolean(description && !COMPACT_SIZES.includes(size));

return (
<div
Expand Down
4 changes: 4 additions & 0 deletions src/components/User/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import type {UserSize} from './types';

export const COMPACT_SIZES: UserSize[] = ['xs', '2xs'];
export const DEFAULT_SIZE: UserSize = 'm';
2 changes: 1 addition & 1 deletion src/components/User/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down

0 comments on commit 1698d51

Please sign in to comment.