Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Avatar): add 2xs Avatar size #1721

Merged
merged 17 commits into from
Sep 13, 2024
Merged

feat(Avatar): add 2xs Avatar size #1721

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
606bab1
feat(Avatar): add 2xs Avatar size
PahaN47 Jul 26, 2024
d49c17c
fix(Avatar): showcase visual tests
PahaN47 Jul 30, 2024
146d298
feat(User): add 2xs size
PahaN47 Jul 31, 2024
194ddb8
Merge branch 'main' into avatar-2xs
PahaN47 Jul 31, 2024
627c2f9
chore: fix lint
PahaN47 Jul 31, 2024
c3aa5e0
Merge branch 'main' into avatar-2xs
PahaN47 Aug 1, 2024
c40fe81
fix: css code style
PahaN47 Aug 6, 2024
80d468d
Merge branch 'main' into avatar-2xs
PahaN47 Aug 20, 2024
b4c2e5e
fix: added css api
PahaN47 Aug 20, 2024
614aaf3
fix: tests
PahaN47 Aug 20, 2024
277b548
Merge branch 'main' into avatar-2xs
PahaN47 Sep 3, 2024
f899e6d
Merge branch 'main' into avatar-2xs
PahaN47 Sep 5, 2024
9aa79bc
fix: code style
PahaN47 Sep 5, 2024
6e4cb0b
Merge branch 'main' into avatar-2xs
PahaN47 Sep 11, 2024
3cee714
Merge branch 'main' into avatar-2xs
PahaN47 Sep 13, 2024
d3cf87e
fix: text size
PahaN47 Sep 13, 2024
264c96e
Merge branch 'main' into avatar-2xs
PahaN47 Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/Avatar/Avatar.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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);
PahaN47 marked this conversation as resolved.
Show resolved Hide resolved
}

#{$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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not correct to use code-inline variant for that. It should inherit font from parent.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we shouldn't allow 2xs in User and UserLabel components

}

#{$block}__avatar + #{$block}__info {
margin-inline-start: 6px;
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/User/User.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading