refactor: use Avatar for button content

gravity-ui · May 30, 2024 · 8f98aaa · 8f98aaa
1 parent 5315821
commit 8f98aaa
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 28 deletions.
diff --git a/src/components/AvatarStack/AvatarStack.scss b/src/components/AvatarStack/AvatarStack.scss
@@ -40,11 +40,8 @@ $block: '.#{variables.$ns}avatar-stack';
     &__more-button {
         @include mixins.button-reset;
 
-        border: solid var(--_--more-button-border-width) var(--g-color-line-generic-solid);
         border-radius: 100%;
 
-        background-color: var(--g-color-base-generic);
-
         width: var(--_--more-button-size);
         height: var(--_--more-button-size);
 
@@ -59,23 +56,6 @@ $block: '.#{variables.$ns}avatar-stack';
                     --_--more-button-size: #{$size-value};
                 }
             }
-
-            &_xs {
-                font-size: var(--g-text-caption-1-font-size);
-            }
-
-            &_s {
-                font-size: var(--g-text-caption-2-font-size);
-            }
-
-            &_m,
-            &_l {
-                font-size: var(--g-text-body-1-font-size);
-            }
-
-            &_xl {
-                font-size: var(--g-text-body-2-font-size);
-            }
         }
     }
 }
diff --git a/src/components/AvatarStack/AvatarStackMoreButton.tsx b/src/components/AvatarStack/AvatarStackMoreButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type {AvatarSize} from '../Avatar';
-import {DEFAULT_AVATAR_SIZE} from '../Avatar';
+import {Avatar, DEFAULT_AVATAR_SIZE} from '../Avatar';
 import {block} from '../utils/cn';
 
 const b = block('avatar-stack');
@@ -14,13 +14,8 @@ type Props = Pick<React.HTMLProps<HTMLButtonElement>, 'className' | 'onClick' |
 export const AvatarStackMoreButton = React.forwardRef<HTMLButtonElement, Props>(
     ({className, size = DEFAULT_AVATAR_SIZE, onClick, count, 'aria-label': ariaLabel}, ref) => {
         return (
-            <button
-                ref={ref}
-                className={b('more-button', {size}, className)}
-                onClick={onClick}
-                aria-label={ariaLabel}
-            >
-                +{count}
+            <button ref={ref} className={b('more-button', {size}, className)} onClick={onClick}>
+                <Avatar text={`+${count}`} size={size} alt={ariaLabel} />
             </button>
         );
     },