Skip to content

Commit 3aa12c6

Browse files
adamgruberrluders
andauthored
fix: render border colors in Avatar with placeholder initials (#521)
fix: render border colors in Avatar without image Fixes the Avatar component so that the `color` prop is respected and the border is rendered in the expected color when using `placeholderInitials`. Co-authored-by: Ricardo Lüders <ricardo@luders.com.br>
1 parent 89d2ff8 commit 3aa12c6

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/lib/components/Avatar/Avatar.spec.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,17 @@ describe('Components / Avatar', () => {
5353
</Flowbite>,
5454
);
5555

56-
expect(initialsPlaceholder()).toHaveTextContent('RR');
56+
expect(initialsPlaceholderText()).toHaveTextContent('RR');
57+
});
58+
59+
it('should support border color with placeholder initials', () => {
60+
render(
61+
<Flowbite>
62+
<Avatar placeholderInitials="RR" bordered color="success" />
63+
</Flowbite>,
64+
);
65+
66+
expect(initialsPlaceholder()).toHaveClass('ring-green-500 dark:ring-green-500');
5767
});
5868
});
5969
describe('Image', () => {
@@ -71,3 +81,4 @@ describe('Components / Avatar', () => {
7181

7282
const img = () => screen.getByTestId('flowbite-avatar-img');
7383
const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
84+
const initialsPlaceholderText = () => screen.getByTestId('flowbite-avatar-initials-placeholder-text');

src/lib/components/Avatar/Avatar.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,11 @@ const AvatarComponent: FC<AvatarProps> = ({
102102
rounded && theme.rounded,
103103
stacked && theme.stacked,
104104
bordered && theme.bordered,
105+
bordered && theme.color[color],
105106
)}
107+
data-testid="flowbite-avatar-initials-placeholder"
106108
>
107-
<span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder">
109+
<span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder-text">
108110
{placeholderInitials}
109111
</span>
110112
</div>

0 commit comments

Comments
 (0)