diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx index 9cb39f3acb..eac109c653 100644 --- 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: (
- - +
), }, { - title: 'Placeholder Initials', + title: 'Placeholder Initials - Sizing', code: ( -
- +
+ + + + +
), }, diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx index f9c3372ed6..e3753c7a41 100644 --- 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( + + + , + ); + + expect(initialsPlaceholder()).toHaveClass('h-64 w-64'); + }); it('should support border color with placeholder initials', () => { render( diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx index fae52498e3..ea3334e41c 100644 --- a/src/lib/components/Avatar/Avatar.tsx +++ b/src/lib/components/Avatar/Avatar.tsx @@ -124,6 +124,7 @@ const AvatarComponent: FC = ({ 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 index 52a7660f53..9b4bd71308 100644 --- 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: {