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.

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
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
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
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
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
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
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: 12 additions & 1 deletion src/components/User/User.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@

$block: '.#{variables.$ns}user';

@mixin user-text-small() {
font-size: var(--g-text-code-inline-1-font-size);
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 Down Expand Up @@ -36,10 +42,15 @@ $block: '.#{variables.$ns}user';
}

&_size {
&_xs {
&_xs,
&_2xs {
#{$block}__avatar + #{$block}__info {
margin-inline-start: 6px;
}

#{$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

}
}
}
}
5 changes: 3 additions & 2 deletions src/components/User/User.tsx
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 {DEFAULT_USER_SIZE, NO_DESCRIPTION_SIZES} 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_USER_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 && !NO_DESCRIPTION_SIZES.includes(size));

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

export const NO_DESCRIPTION_SIZES: UserSize[] = ['xs', '2xs'];
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export const NO_DESCRIPTION_SIZES: UserSize[] = ['xs', '2xs'];
export const COMPACT_SIZES: UserSize[] = ['xs', '2xs'];

export const DEFAULT_USER_SIZE: UserSize = 'm';
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
export const DEFAULT_USER_SIZE: UserSize = 'm';
export const DEFAULT_SIZE: UserSize = 'm';

2 changes: 1 addition & 1 deletion src/components/User/types.ts
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