feat(avatar): adds color prop and test case for it (#439)

* feat(avatar): adds color prop and test case for it Adds color property to Avatar component to change image ring color. Works only if border property is true. Adds 'color' test case to the Avatar`s Theme test case #409 * docs(avatar): adds doc example for avatar color prop Adds 5 examples of rounded and bordered avatars and 5 examples of bordered avatars for Avatar component #409
themesberg · Nov 27, 2022 · 104d6fb · 104d6fb
1 parent dadd5b9
commit 104d6fb
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 5 deletions.
diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx
@@ -23,6 +23,52 @@ const AvatarPage: FC = () => {
         </div>
       ),
     },
+    {
+      title: 'Colored Avatar',
+      code: (
+        <>
+          <div className="flex flex-wrap gap-2">
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded bordered color="gray" />
+            <Avatar
+              img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+              rounded
+              bordered
+              color="light"
+            />
+            <Avatar
+              img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+              rounded
+              bordered
+              color="purple"
+            />
+            <Avatar
+              img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+              rounded
+              bordered
+              color="success"
+            />
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded bordered color="pink" />
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered color="gray" />
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered color="light" />
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered color="purple" />
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered color="success" />
+            <Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered color="pink" />
+          </div>
+        </>
+      ),
+    },
+    {
+      title: 'Placeholder',
+      code: (
+        <div className="flex flex-wrap gap-2">
+          <Avatar />
+          <Avatar rounded />
+        </div>
+      ),
+    },
     {
       title: 'Placeholder',
       code: (

diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -6,7 +6,7 @@ import { Avatar } from './Avatar';
 
 describe('Components / Avatar', () => {
   describe('Theme', () => {
-    it('should use custom classes', () => {
+    it('should use custom sizes', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
           size: {
@@ -22,6 +22,28 @@ describe('Components / Avatar', () => {
 
       expect(img()).toHaveClass('h-64 w-64');
     });
+
+    it('should use custom colors', () => {
+      const theme: CustomFlowbiteTheme = {
+        avatar: {
+          color: {
+            rose: 'ring-rose-500 dark:ring-rose-400',
+          },
+        },
+      };
+      render(
+        <Flowbite theme={{ theme }}>
+          <Avatar
+            bordered
+            color="rose"
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="Your avatar"
+          />
+        </Flowbite>,
+      );
+
+      expect(img()).toHaveClass('ring-rose-500 dark:ring-rose-400');
+    });
   });
   describe('Placeholder', () => {
     it('should display placeholder initials', () => {

diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx
@@ -1,14 +1,15 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import type { FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import type { FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
 
-export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
+export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'color'>> {
   alt?: string;
   bordered?: boolean;
   img?: string;
+  color?: keyof AvatarColors;
   rounded?: boolean;
   size?: keyof AvatarSizes;
   stacked?: boolean;
@@ -17,6 +18,11 @@ export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
   placeholderInitials?: string;
 }
 
+export interface AvatarColors
+  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'pink' | 'purple' | 'success' | 'warning'> {
+  [key: string]: string;
+}
+
 export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
   [key: string]: string;
 }
@@ -26,6 +32,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   bordered = false,
   children,
   img,
+  color = 'light',
   rounded = false,
   size = 'md',
   stacked = false,
@@ -38,6 +45,7 @@ const AvatarComponent: FC<AvatarProps> = ({
   const theme = useTheme().theme.avatar;
   const imgClassName = classNames(
     bordered && theme.bordered,
+    bordered && theme.color[color],
     rounded && theme.rounded,
     stacked && theme.stacked,
     theme.img.on,

diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -1,6 +1,6 @@
 import { DeepPartial } from '..';
 import type { AlertColors } from '../Alert/Alert';
-import type { AvatarSizes } from '../Avatar/Avatar';
+import type { AvatarColors, AvatarSizes } from '../Avatar/Avatar';
 import type { BadgeColors, BadgeSizes } from '../Badge';
 import type {
   ButtonColors,
@@ -72,6 +72,7 @@ export interface FlowbiteTheme extends Record<string, unknown> {
       on: string;
       placeholder: string;
     };
+    color: AvatarColors;
     rounded: string;
     size: AvatarSizes;
     stacked: string;

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -60,13 +60,24 @@ const theme: FlowbiteTheme = {
   },
   avatar: {
     base: 'flex justify-center items-center space-x-4',
-    bordered: 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
+    bordered: 'p-1 ring-2',
     img: {
       off: 'rounded relative overflow-hidden bg-gray-100 dark:bg-gray-600',
       on: 'rounded',
       placeholder: 'absolute w-auto h-auto text-gray-400 -bottom-1',
     },
     rounded: '!rounded-full',
+    color: {
+      dark: 'ring-gray-800 dark:ring-gray-800',
+      failure: 'ring-red-500 dark:ring-red-700',
+      gray: 'ring-gray-500 dark:ring-gray-400',
+      info: 'ring-blue-400 dark:ring-blue-800',
+      light: 'ring-gray-300 dark:ring-gray-500',
+      purple: 'ring-purple-500 dark:ring-purple-600',
+      success: 'ring-green-500 dark:ring-green-500',
+      warning: 'ring-yellow-300 dark:ring-yellow-500',
+      pink: 'ring-pink-500 dark:ring-pink-500',
+    },
     size: {
       xs: 'w-6 h-6',
       sm: 'w-8 h-8',