diff --git a/src/components/UserLabel/README.md b/src/components/UserLabel/README.md index 191098bacc..bc3a610712 100644 --- a/src/components/UserLabel/README.md +++ b/src/components/UserLabel/README.md @@ -97,6 +97,7 @@ LANDING_BLOCK--> | className | Custom CSS class for root element | `string` | | | style | HTML style attribute | `React.CSSProperties` | | | qa | HTML `data-qa` attribute, used in tests | `string` | | +| size | Avatar size | `'xs'` `'s'` `'m'` `'l'` `'xl'` | `'s'` | ## CSS API diff --git a/src/components/UserLabel/UserLabel.scss b/src/components/UserLabel/UserLabel.scss index 0a44846819..f01d582877 100644 --- a/src/components/UserLabel/UserLabel.scss +++ b/src/components/UserLabel/UserLabel.scss @@ -1,5 +1,6 @@ @use '../../../styles/mixins'; @use '../variables'; +@use '../Avatar/variables' as avatar-variables; $block: '.#{variables.$ns}user-label'; @@ -114,4 +115,15 @@ $block: '.#{variables.$ns}user-label'; outline: 2px solid var(--g-color-line-focus); } } + + &_size { + @each $size-name, $size-value in avatar-variables.$sizes { + &_#{$size-name} { + height: #{$size-value}; + } + &_xl::after { + border-radius: 150px; + } + } + } } diff --git a/src/components/UserLabel/UserLabel.tsx b/src/components/UserLabel/UserLabel.tsx index d3e4e99f82..69eb3eaeb2 100644 --- a/src/components/UserLabel/UserLabel.tsx +++ b/src/components/UserLabel/UserLabel.tsx @@ -3,7 +3,6 @@ import React from 'react'; import {Envelope, Xmark} from '@gravity-ui/icons'; import {Avatar} from '../Avatar'; -import type {AvatarProps} from '../Avatar'; import {Icon} from '../Icon'; import {block} from '../utils/cn'; @@ -12,10 +11,6 @@ import type {UserLabelProps} from './types'; import './UserLabel.scss'; -const COMMON_AVATAR_PROPS: Partial<AvatarProps> = { - size: 's', -}; - const b = block('user-label'); export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>( @@ -30,6 +25,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>( className, style, qa, + size = 's', }, ref, ) => { @@ -54,9 +50,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>( switch (type) { case 'email': - avatarView = ( - <Avatar icon={Envelope} {...(avatarProps || {})} {...COMMON_AVATAR_PROPS} /> - ); + avatarView = <Avatar icon={Envelope} {...(avatarProps || {})} size={size} />; break; case 'empty': avatarView = null; @@ -66,7 +60,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>( if (React.isValidElement(avatar)) { avatarView = avatar; } else if (avatarProps) { - avatarView = <Avatar {...avatarProps} {...COMMON_AVATAR_PROPS} />; + avatarView = <Avatar {...avatarProps} size={size} />; } break; } @@ -79,6 +73,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>( empty: !avatarView, clickable, closeable, + size, }, className, )} diff --git a/src/components/UserLabel/types.ts b/src/components/UserLabel/types.ts index fc79942654..2bee2a95ca 100644 --- a/src/components/UserLabel/types.ts +++ b/src/components/UserLabel/types.ts @@ -1,7 +1,7 @@ import type React from 'react'; import type {DistributiveOmit} from '../../types/utils'; -import type {AvatarProps} from '../Avatar'; +import type {AvatarProps, AvatarSize} from '../Avatar'; import type {DOMProps, QAProps} from '../types'; export type UserLabelType = 'person' | 'email' | 'empty'; @@ -17,4 +17,5 @@ export interface UserLabelProps extends DOMProps, QAProps { view?: UserLabelView; onClick?: React.MouseEventHandler<HTMLElement>; onCloseClick?: React.MouseEventHandler<HTMLButtonElement>; + size?: AvatarSize; }