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 11 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
15 changes: 13 additions & 2 deletions src/components/User/README.md
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="[email protected]" size="2xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="s" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="m" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="l" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="xl" />
`}
>
<UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="2xs" />
<UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="xs" />
<UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="s" />
<UIKit.User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="[email protected]" size="m" />
Expand All @@ -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 |
Copy link
Contributor

Choose a reason for hiding this comment

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

CSS API is designed to ignore all props, so only 2 vars are relevant: --g-user-font-size, --g-user-line-height. There should not be CSS API for props variants

20 changes: 18 additions & 2 deletions src/components/User/User.scss
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-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);
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,10 @@ $block: '.#{variables.$ns}user';
}

&_size {
&_xs {
&_xs,
&_2xs {
@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
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