fix(/src/components/avatar): enable explicit sizing of placeholder in…

…itials (themesberg#659)
rpocklin · Mar 7, 2023 · 8157b8e · 8157b8e
1 parent 329cb5a
commit 8157b8e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx
@@ -130,19 +130,22 @@ const AvatarPage: FC = () => {
       ),
     },
     {
-      title: 'Placeholder',
+      title: 'Placeholder Initials',
       code: (
         <div className="flex flex-wrap gap-2">
-          <Avatar />
-          <Avatar rounded />
+          <Avatar placeholderInitials="RR" />
         </div>
       ),
     },
     {
-      title: 'Placeholder Initials',
+      title: 'Placeholder Initials - Sizing',
       code: (
-        <div className="flex flex-wrap gap-2">
-          <Avatar placeholderInitials="RR" />
+        <div className="flex flex-wrap items-center gap-2">
+          <Avatar placeholderInitials="RR" size="xs" />
+          <Avatar placeholderInitials="RR" size="sm" />
+          <Avatar placeholderInitials="RR" size="md" />
+          <Avatar placeholderInitials="RR" size="lg" />
+          <Avatar placeholderInitials="RR" size="xl" />
         </div>
       ),
     },

diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -60,6 +60,15 @@ describe('Components / Avatar', () => {
       expect(initialsPlaceholderText()).toHaveTextContent('RR');
     });
 
+    it('should support explicit sizes with placeholder initials', () => {
+      render(
+        <Flowbite>
+          <Avatar placeholderInitials="RR" size="xxl" />
+        </Flowbite>,
+      );
+
+      expect(initialsPlaceholder()).toHaveClass('h-64 w-64');
+    });
     it('should support border color with placeholder initials', () => {
       render(
         <Flowbite>

diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
@@ -124,6 +124,7 @@ const AvatarComponent: FC<AvatarProps> = ({
               stacked && theme.root.stacked,
               bordered && theme.root.bordered,
               bordered && theme.root.color[color],
+              theme.root.size[size],
             )}
             data-testid="flowbite-avatar-initials-placeholder"
           >

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -138,7 +138,7 @@ const theme: FlowbiteTheme = {
       },
       initials: {
         text: 'font-medium text-gray-600 dark:text-gray-300',
-        base: 'inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 dark:bg-gray-600',
+        base: 'inline-flex overflow-hidden relative justify-center items-center bg-gray-100 dark:bg-gray-600',
       },
     },
     group: {