feat(UserLabel): add size property (#1658)

Co-authored-by: Andrey Morozov <[email protected]>
gravity-ui · Jun 24, 2024 · 39cd8ad · 39cd8ad
1 parent ea320f7
commit 39cd8ad
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }