From 104d6fb83bd48de696c2b79138640e747e5b020f Mon Sep 17 00:00:00 2001
From: Yuri <118747540+sldk-yuri@users.noreply.github.com>
Date: Sun, 27 Nov 2022 13:57:21 +0300
Subject: [PATCH] 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
---
src/docs/pages/AvatarPage.tsx | 46 ++++++++++++++++++++
src/lib/components/Avatar/Avatar.spec.tsx | 24 +++++++++-
src/lib/components/Avatar/Avatar.tsx | 12 ++++-
src/lib/components/Flowbite/FlowbiteTheme.ts | 3 +-
src/lib/theme/default.ts | 13 +++++-
5 files changed, 93 insertions(+), 5 deletions(-)
diff --git a/src/docs/pages/AvatarPage.tsx b/src/docs/pages/AvatarPage.tsx
index 301b8089f..f2633d0cf 100644
--- a/src/docs/pages/AvatarPage.tsx
+++ b/src/docs/pages/AvatarPage.tsx
@@ -23,6 +23,52 @@ const AvatarPage: FC = () => {
),
},
+ {
+ title: 'Colored Avatar',
+ code: (
+ <>
+
+
+
+
+ ),
+ },
+ {
+ title: 'Placeholder',
+ code: (
+
+ ),
+ },
{
title: 'Placeholder',
code: (
diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
index cb83fd278..42a9f9757 100644
--- 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(
+
+
+ ,
+ );
+
+ 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
index 3d9bc0c05..d6fa405c5 100644
--- 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> {
+export interface AvatarProps extends PropsWithChildren, '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> {
placeholderInitials?: string;
}
+export interface AvatarColors
+ extends Pick {
+ [key: string]: string;
+}
+
export interface AvatarSizes extends Pick {
[key: string]: string;
}
@@ -26,6 +32,7 @@ const AvatarComponent: FC = ({
bordered = false,
children,
img,
+ color = 'light',
rounded = false,
size = 'md',
stacked = false,
@@ -38,6 +45,7 @@ const AvatarComponent: FC = ({
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
index 7cecc7734..11464729a 100644
--- 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 {
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
index bfa608695..93897981f 100644
--- 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',