From 3aa12c660a4327c043fae26966b273bbae28ba66 Mon Sep 17 00:00:00 2001
From: Adam Gruber <talknmime@gmail.com>
Date: Sun, 8 Jan 2023 10:16:46 -0500
Subject: [PATCH] fix: render border colors in Avatar with placeholder initials
 (#521)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/lib/components/Avatar/Avatar.spec.tsx | 13 ++++++++++++-
 src/lib/components/Avatar/Avatar.tsx      |  4 +++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
index 94d750f6d..95851c313 100644
--- a/src/lib/components/Avatar/Avatar.spec.tsx
+++ b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -53,7 +53,17 @@ describe('Components / Avatar', () => {
         </Flowbite>,
       );
 
-      expect(initialsPlaceholder()).toHaveTextContent('RR');
+      expect(initialsPlaceholderText()).toHaveTextContent('RR');
+    });
+
+    it('should support border color with placeholder initials', () => {
+      render(
+        <Flowbite>
+          <Avatar placeholderInitials="RR" bordered color="success" />
+        </Flowbite>,
+      );
+
+      expect(initialsPlaceholder()).toHaveClass('ring-green-500 dark:ring-green-500');
     });
   });
   describe('Image', () => {
@@ -71,3 +81,4 @@ describe('Components / Avatar', () => {
 
 const img = () => screen.getByTestId('flowbite-avatar-img');
 const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
+const initialsPlaceholderText = () => screen.getByTestId('flowbite-avatar-initials-placeholder-text');
diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
index 0fcfb67e3..404b47754 100644
--- a/src/lib/components/Avatar/Avatar.tsx
+++ b/src/lib/components/Avatar/Avatar.tsx
@@ -102,9 +102,11 @@ const AvatarComponent: FC<AvatarProps> = ({
               rounded && theme.rounded,
               stacked && theme.stacked,
               bordered && theme.bordered,
+              bordered && theme.color[color],
             )}
+            data-testid="flowbite-avatar-initials-placeholder"
           >
-            <span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder">
+            <span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder-text">
               {placeholderInitials}
             </span>
           </div>