Extend props for User component from Badge

src/harmony/Badge/Badge.module.css

@@ -51,8 +51,17 @@
 .Badge:hover .BadgeAction {
     opacity: 1;
 }
+.BadgeText {
+    font-size: 1em;
+}
 
 .Badge:hover .BadgeTextInteractive {
     color: var(--text-primary);
     cursor: pointer;
 }
+
+.BadgeTextEllipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--text-line-clamp);
+    -webkit-box-orient: vertical;
+}

src/harmony/Badge/Badge.tsx

@@ -50,7 +50,7 @@
 export const Badge = forwardRef(
     <T extends keyof AllowedHTMLElements>(
         props: BadgeProps & { as?: T } & AllowedHTMLElements[T],
         ref: React.ForwardedRef<any>,
     ) => {
         const {
             iconLeft,
@@ -63,6 +63,7 @@
             as = defaultTagName,
             action = 'static',
             onClick,
+            ellipsis,
             ...rest
         } = props;
 
@@ -73,14 +74,22 @@
                 weight={weight}
                 size={size}
                 onClick={onClick}
+                ellipsis={ellipsis}
                 {...rest}
                 className={cn(s.Badge, className, view ? viewMap[view] : '', sizeMap[size])}
             >
                 {nullable(iconLeft, (icon) => (
                     <span className={cn(s.BadgeIcon, { [s.BadgeIconLeft]: text })}>{icon}</span>
                 ))}
                 {nullable(text, (t) => (
-                    <span className={cn(s.BadgeText, { [s.BadgeTextInteractive]: Boolean(onClick) })}>{t}</span>
+                    <span
+                        className={cn(s.BadgeText, {
+                            [s.BadgeTextInteractive]: Boolean(onClick),
+                            [s.BadgeTextEllipsis]: ellipsis,
+                        })}
+                    >
+                        {t}
+                    </span>
                 ))}
                 {nullable(iconRight, (icon) => (
                     <span

src/harmony/Text/Text.tsx

@@ -101,21 +101,19 @@ export const Text = React.forwardRef(function <T extends keyof AllowedHTMLElemen
     const additionalStyles: React.CSSProperties = useMemo(() => {
         const styles: Record<string, unknown> = {};
 
-        switch (true) {
-            case !!wordBreak:
-                styles['--text-breaked'] = wordBreak;
-                break;
-            case !!wordWrap:
-                styles['--text-wrapped'] = wordWrap;
-                break;
-            case !!lines:
-                styles['--text-line-clamp'] = lines;
-                break;
-            case !!color:
-                styles['--text-custom-color'] = color;
-                break;
-            default:
-                break;
+        if (wordBreak) {
+            styles['--text-breaked'] = wordBreak;
+        }
+
+        if (wordWrap) {
+            styles['--text-wrapped'] = wordWrap;
+        }
+
+        if (lines) {
+            styles['--text-line-clamp'] = lines;
+        }
+        if (color) {
+            styles['--text-custom-color'] = color;
         }
 
         return styles;

src/harmony/User/User.module.css

@@ -33,3 +33,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
 }
+
+.UserOutlined {
+    padding: 0;
+    padding-right: var(--gap-s);
+}

src/harmony/User/User.tsx

@@ -10,14 +10,9 @@ import { Gravatar } from '../Gravatar/Gravatar';
 
 import classes from './User.module.css';
 
-interface AllowedBadgeProps {
-    iconRight?: ComponentProps<typeof Badge>['iconRight'];
-    action?: ComponentProps<typeof Badge>['action'];
-    view?: ComponentProps<typeof Badge>['view'];
-    as?: ComponentProps<typeof Badge>['as'];
-}
+type BannedBadgeProps = keyof Pick<ComponentProps<typeof Badge>, 'iconLeft' | 'text' | 'size' | 'lines'>;
 
-interface UserProps extends AllowedBadgeProps {
+interface UserProps extends Omit<ComponentProps<typeof Badge>, BannedBadgeProps> {
     name?: string | null;
     email?: string | null;
     src?: string | null;
@@ -55,7 +50,7 @@ export const Avatar: React.FC<
 };
 
 export const User = forwardRef<HTMLDivElement, UserProps>(
-    ({ email, name, src, short, size = 's', as = 'div', className, ...props }, ref) => {
+    ({ email, name, src, short, size = 's', as = 'div', className, ellipsis, ...props }, ref) => {
         return (
             <Badge
                 className={cn(
@@ -65,9 +60,12 @@ export const User = forwardRef<HTMLDivElement, UserProps>(
                         [classes.UserSizeS]: size === 's',
                         [classes.UserSizeM]: size === 'm',
                         [classes.User_short]: short,
+                        [classes.UserOutlined]: props.view === 'outline',
                     },
                     className,
                 )}
+                ellipsis={ellipsis}
+                lines={ellipsis ? 1 : undefined}
                 as={as}
                 ref={ref}
                 iconLeft={<Avatar src={src} name={name} email={email} size={size} />}

src/harmony/UserGroup/UserGroup.stories.tsx

@@ -10,14 +10,17 @@ const meta: Meta<typeof UserGroup> = {
 
 export default meta;
 
+const userPic =
+    'https://secure.gravatar.com/avatar/51d3c935ea5453b2915e6180a9944c11/?default=https%3A%2F%2Fvanillicon.com%2F8fff907b6502f8011495fb154ec1c0a2_200.png&rating=g&size=560';
+
 const users = [
     { name: 'User 1', email: 'user1@example.com' },
     { name: 'User 2', email: 'user2@example.com' },
     { name: 'User 3', email: 'user3@example.com' },
     { name: 'User 4', email: 'user4@example.com' },
     { name: 'User 5', email: 'user5@example.com' },
     { name: 'User 6', email: 'user6@example.com' },
-];
+].map((user) => ({ ...user, image: userPic }));
 
 export const Default: StoryObj<typeof UserGroup> = {
     render: (args) => (