From b9ef7203c591cf627ad6817ffeded37d4bebc6dc Mon Sep 17 00:00:00 2001
From: iamargentum <rajat.rj97@gmail.com>
Date: Mon, 10 Oct 2022 01:33:19 +0530
Subject: [PATCH 1/4] feat: allow using initials as `Avatar` placeholder

Add new prop, `placeholderInitials`, to the `Avatar` component.
String passed in this prop will be displayed as `Avatar`'s placeholder, if image is not provided.

Refs: #357
---
 src/lib/components/Avatar/index.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/components/Avatar/index.tsx b/src/lib/components/Avatar/index.tsx
index 6ed5889e7..6bbfa6196 100644
--- a/src/lib/components/Avatar/index.tsx
+++ b/src/lib/components/Avatar/index.tsx
@@ -15,6 +15,7 @@ export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'
   stacked?: boolean;
   status?: 'away' | 'busy' | 'offline' | 'online';
   statusPosition?: keyof FlowbitePositions;
+  placeholderInitials?: string;
 }
 
 export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
@@ -31,6 +32,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   stacked = false,
   status,
   statusPosition = 'top-left',
+  placeholderInitials = '',
   ...props
 }) => {
   const theirProps = excludeClassName(props);
@@ -52,6 +54,10 @@ const AvatarComponent: FC<AvatarProps> = ({
             data-testid="flowbite-avatar-img"
             src={img}
           />
+        ) : placeholderInitials ? (
+          <div className="inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600">
+            <span className="font-medium text-gray-600 dark:text-gray-300">{placeholderInitials}</span>
+          </div>
         ) : (
           <div
             className={classNames(

From 3eb64548bce523f52beaf597a1f246405288971e Mon Sep 17 00:00:00 2001
From: iamargentum <rajat.rj97@gmail.com>
Date: Mon, 10 Oct 2022 01:51:59 +0530
Subject: [PATCH 2/4] docs(avatar): update docs with `Placeholder Initials` for
 `Avatar`

Update the docs with newly added feature, that allows usage of initials as a placeholder for
`Avatar` component

#357
---
 src/docs/pages/AvatarPage.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx
index 076a0e952..301b8089f 100644
--- a/src/docs/pages/AvatarPage.tsx
+++ b/src/docs/pages/AvatarPage.tsx
@@ -32,6 +32,14 @@ const AvatarPage: FC = () => {
         </div>
       ),
     },
+    {
+      title: 'Placeholder Initials',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar placeholderInitials="RR" />
+        </div>
+      ),
+    },
     {
       title: 'Dot indicator',
       code: (

From 744042e0dae8cb03b611a1eafa3ab127d9226f44 Mon Sep 17 00:00:00 2001
From: iamargentum <rajat.rj97@gmail.com>
Date: Tue, 11 Oct 2022 10:09:56 +0530
Subject: [PATCH 3/4] refactor(avatar): move styles to Theme

#357
---
 src/lib/components/Avatar/index.tsx          | 12 ++++++++++--
 src/lib/components/Flowbite/FlowbiteTheme.ts |  8 ++++++++
 src/lib/theme/default.ts                     |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Avatar/index.tsx b/src/lib/components/Avatar/index.tsx
index 6bbfa6196..006057a2e 100644
--- a/src/lib/components/Avatar/index.tsx
+++ b/src/lib/components/Avatar/index.tsx
@@ -55,8 +55,16 @@ const AvatarComponent: FC<AvatarProps> = ({
             src={img}
           />
         ) : placeholderInitials ? (
-          <div className="inline-flex overflow-hidden relative justify-center items-center w-10 h-10 bg-gray-100 rounded-full dark:bg-gray-600">
-            <span className="font-medium text-gray-600 dark:text-gray-300">{placeholderInitials}</span>
+          <div
+            className={classNames(
+              theme.img.off,
+              theme.initials.base,
+              rounded && theme.rounded,
+              stacked && theme.stacked,
+              bordered && theme.bordered,
+            )}
+          >
+            <span className={classNames(theme.initials.text)}>{placeholderInitials}</span>
           </div>
         ) : (
           <div
diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
index b7836a3bc..2533a6d80 100644
--- a/src/lib/components/Flowbite/FlowbiteTheme.ts
+++ b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -80,6 +80,10 @@ export interface FlowbiteTheme extends Record<string, unknown> {
       online: string;
     };
     statusPosition: FlowbitePositions;
+    initials: {
+      base: string;
+      text: string;
+    };
   };
   badge: {
     base: string;
@@ -557,3 +561,7 @@ export interface FlowbiteSizes {
   '6xl': string;
   '7xl': string;
 }
+
+export interface FlowbiteContentPositions {
+  center: string;
+}
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index a94d07e2b..df053eb0a 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -90,6 +90,10 @@ const theme: FlowbiteTheme = {
       center: 'center center',
       'center-left': 'center -left-1',
     },
+    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',
+    },
   },
   badge: {
     base: 'flex h-fit items-center gap-1 font-semibold',

From 922eb83a7b3b54d4dbe512fbfdc7aae1ccfdd12a Mon Sep 17 00:00:00 2001
From: iamargentum <rajat.rj97@gmail.com>
Date: Tue, 11 Oct 2022 18:47:54 +0530
Subject: [PATCH 4/4] test(avatar): add test for initials placeholder

#357
---
 src/lib/components/Avatar/Avatar.spec.tsx | 16 ++++++++++++++--
 src/lib/components/Avatar/index.tsx       |  4 +++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
index 4d16e6b48..52188f906 100644
--- a/src/lib/components/Avatar/Avatar.spec.tsx
+++ b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -4,8 +4,8 @@ import { Avatar } from '.';
 import { Flowbite } from '../Flowbite';
 import type { CustomFlowbiteTheme } from '../Flowbite/FlowbiteTheme';
 
-describe.concurrent('Components / Avatar', () => {
-  describe.concurrent('Theme', () => {
+describe('Components / Avatar', () => {
+  describe('Theme', () => {
     it('should use custom classes', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
@@ -23,6 +23,18 @@ describe.concurrent('Components / Avatar', () => {
       expect(img()).toHaveClass('h-64 w-64');
     });
   });
+  describe('Placeholder', () => {
+    it('should display placeholder initials', () => {
+      render(
+        <Flowbite>
+          <Avatar placeholderInitials="RR" />
+        </Flowbite>,
+      );
+
+      expect(initialsPlaceholder()).toHaveTextContent('RR');
+    });
+  });
 });
 
 const img = () => screen.getByTestId('flowbite-avatar-img');
+const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
diff --git a/src/lib/components/Avatar/index.tsx b/src/lib/components/Avatar/index.tsx
index 006057a2e..ef2d321cf 100644
--- a/src/lib/components/Avatar/index.tsx
+++ b/src/lib/components/Avatar/index.tsx
@@ -64,7 +64,9 @@ const AvatarComponent: FC<AvatarProps> = ({
               bordered && theme.bordered,
             )}
           >
-            <span className={classNames(theme.initials.text)}>{placeholderInitials}</span>
+            <span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder">
+              {placeholderInitials}
+            </span>
           </div>
         ) : (
           <div