feat(userLabel_size): add size property

gravity-ui · Jun 17, 2024 · 417a470 · 417a470
1 parent edf6473
commit 417a470
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 4 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         | UserLabel size                              |                       `'xs'` `'s'` `'m'` `'l'` `'xl'`                       |    `'m'`     |
 
 ## CSS API
 

diff --git a/src/components/UserLabel/UserLabel.scss b/src/components/UserLabel/UserLabel.scss
@@ -114,4 +114,12 @@ $block: '.#{variables.$ns}user-label';
             outline: 2px solid var(--g-color-line-focus);
         }
     }
+
+    &_size {
+        @each $size-name, $size-value in variables.$sizes {
+            &_#{$size-name} {
+                height: #{$size-value};
+            }
+        }
+    }
 }
diff --git a/src/components/UserLabel/UserLabel.tsx b/src/components/UserLabel/UserLabel.tsx
@@ -13,7 +13,7 @@ import type {UserLabelProps} from './types';
 import './UserLabel.scss';
 
 const COMMON_AVATAR_PROPS: Partial<AvatarProps> = {
-    size: 's',
+    size: 'm',
 };
 
 const b = block('user-label');
@@ -30,6 +30,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>(
             className,
             style,
             qa,
+            size = COMMON_AVATAR_PROPS.size,
         },
         ref,
     ) => {
@@ -55,7 +56,12 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>(
         switch (type) {
             case 'email':
                 avatarView = (
-                    <Avatar icon={Envelope} {...(avatarProps || {})} {...COMMON_AVATAR_PROPS} />
+                    <Avatar
+                        icon={Envelope}
+                        {...(avatarProps || {})}
+                        {...COMMON_AVATAR_PROPS}
+                        size={size}
+                    />
                 );
                 break;
             case 'empty':
@@ -66,7 +72,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} {...COMMON_AVATAR_PROPS} size={size} />;
                 }
                 break;
         }
@@ -79,6 +85,7 @@ export const UserLabel = React.forwardRef<HTMLDivElement, UserLabelProps>(
                         empty: !avatarView,
                         clickable,
                         closeable,
+                        size,
                     },
                     className,
                 )}

diff --git a/src/components/UserLabel/_variables.scss b/src/components/UserLabel/_variables.scss
@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+$sizes: (
+    'xs': 24px,
+    's': 28px,
+    'm': 32px,
+    'l': 42px,
+    'xl': 50px,
+);
+
+$default-size: map.get($sizes, 's');
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;
 }
diff --git a/src/components/variables.scss b/src/components/variables.scss
@@ -1,5 +1,13 @@
 $ns: 'g-';
 
+$sizes: (
+    'xs': 24px,
+    's': 28px,
+    'm': 32px,
+    'l': 42px,
+    'xl': 50px,
+);
+
 $xs-height: 20px;
 $s-height: 24px;
 $m-height: 28px;