Style prop for Avatar (#3117)

skeletonlabs · Jan 23, 2025 · d57f7fa · d57f7fa
1 parent 38044f0
commit d57f7fa
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/twelve-pets-hide.md b/.changeset/twelve-pets-hide.md
@@ -0,0 +1,6 @@
+---
+'@skeletonlabs/skeleton-svelte': patch
+'@skeletonlabs/skeleton-react': patch
+---
+
+Implement `style` prop for Avatar component.
diff --git a/packages/skeleton-react/src/lib/components/Accordion/types.ts b/packages/skeleton-react/src/lib/components/Accordion/types.ts
@@ -63,7 +63,7 @@ export interface AccordionItemProps extends React.PropsWithChildren, accordion.I
 
 export interface AccordionControlProps extends React.PropsWithChildren {
 	/** The heading element. */
-	headingElement?: keyof JSX.IntrinsicElements;
+	headingElement?: keyof React.JSX.IntrinsicElements;
 	/** Set a disabled state for the item. */
 	disabled?: boolean;
 

diff --git a/packages/skeleton-react/src/lib/components/Avatar/Avatar.test.tsx b/packages/skeleton-react/src/lib/components/Avatar/Avatar.test.tsx
@@ -43,6 +43,12 @@ describe('Avatar', () => {
 					expect(component.getByTestId(testId)).toHaveClass(value);
 				});
 			}
+
+			it('Correctly applies the `style` prop', () => {
+				const value = { 'background-color': 'rgb(0, 128, 0)', opacity: 0.5 };
+				const component = render(<Avatar name="name" src="src" style={value}></Avatar>);
+				expect(component.getByTestId(testId)).toHaveStyle('background-color: rgb(0, 128, 0); opacity: 0.5;');
+			});
 		});
 
 		describe('Fallback', () => {

diff --git a/packages/skeleton-react/src/lib/components/Avatar/Avatar.tsx b/packages/skeleton-react/src/lib/components/Avatar/Avatar.tsx
@@ -22,6 +22,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 	// Image
 	imageBase = 'w-full object-cover',
 	imageClasses = '',
+	style,
 	// Fallback
 	fallbackBase = 'w-full h-full flex justify-center items-center',
 	fallbackClasses = '',
@@ -53,7 +54,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 					srcSet={srcSet}
 					alt={name}
 					className={`${imageBase} ${imageClasses}`}
-					style={{ filter: filter ? `url(${filter})` : undefined }}
+					style={{ ...style, filter: filter ? `url(${filter})` : undefined }}
 					data-testid="avatar-image"
 				/>
 			)}

diff --git a/packages/skeleton-react/src/lib/components/Avatar/types.ts b/packages/skeleton-react/src/lib/components/Avatar/types.ts
@@ -31,6 +31,8 @@ export interface AvatarProps extends React.PropsWithChildren {
 	imageBase?: string;
 	/** Provide avatar image arbitrary CSS classes. */
 	imageClasses?: string;
+	/** Set avatar image styles. */
+	style?: React.CSSProperties;
 
 	// Fallback ---
 	/** Set base classes for the fallback element. */

diff --git a/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte b/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte
@@ -21,6 +21,7 @@
 		// Image
 		imageBase = 'w-full object-cover',
 		imageClasses = '',
+		style = '',
 		// Fallback
 		fallbackBase = 'w-full h-full flex justify-center items-center',
 		fallbackClasses = '',
@@ -54,6 +55,7 @@
 			class="{imageBase} {imageClasses}"
 			style:filter={filter && `url(${filter})`}
 			data-testid="avatar-image"
+			{style}
 		/>
 	{/if}
 	<!-- Fallback -->

diff --git a/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.test.ts b/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.test.ts
@@ -46,6 +46,13 @@ describe('Avatar', () => {
 				expect(component).toHaveClass(value);
 			});
 		}
+
+		it('Correctly applies the `style` prop', () => {
+			const value = 'background-color: rgb(0, 128, 0); opacity: 0.5;';
+			render(Avatar, { src: test.src, name: test.name, style: value });
+			const component = screen.getByTestId(testIds.image);
+			expect(component).toHaveStyle(value);
+		});
 	});
 
 	describe('Fallback', () => {

diff --git a/packages/skeleton-svelte/src/lib/components/Avatar/types.ts b/packages/skeleton-svelte/src/lib/components/Avatar/types.ts
@@ -33,6 +33,8 @@ export interface AvatarProps {
 	imageBase?: string;
 	/** Provide avatar image arbitrary CSS classes. */
 	imageClasses?: string;
+	/** Set avatar image styles. */
+	style?: string;
 
 	// Fallback ---
 	/** Set base classes for the fallback element. */