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>

Author: adamgruber

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');

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>