feat(AvatarGroup): add optional space prop (#202)

daisyui · Aug 24, 2022 · f1814fd · f1814fd
1 parent 73cd798
commit f1814fd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Story, Meta } from '@storybook/react'
 
 import Avatar, { AvatarProps } from '.'
+import { AvatarGroupProps } from './AvatarGroup'
 
 export default {
   title: 'Data Display/Avatar',
@@ -42,9 +43,9 @@ CustomSize.argTypes = {
   },
 }
 
-export const Group: Story<AvatarProps> = (args) => {
+export const Group: Story<AvatarProps & AvatarGroupProps> = (args) => {
   return (
-    <Avatar.Group>
+    <Avatar.Group space={args.space}>
       <Avatar {...args} />
       <Avatar {...args} />
       <Avatar {...args} />
@@ -53,6 +54,7 @@ export const Group: Story<AvatarProps> = (args) => {
 }
 Group.args = {
   src: 'http://daisyui.com/tailwind-css-component-profile-1@94w.png',
+  space: -6
 }
 
 export const Ring = Template.bind({})

diff --git a/src/Avatar/AvatarGroup.tsx b/src/Avatar/AvatarGroup.tsx
@@ -3,13 +3,15 @@ import clsx from 'clsx'
 
 import { AvatarProps } from '../Avatar'
 
-type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
   children: ReactElement<AvatarProps>[]
+  space?: number
 }
 
 const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ children, className, ...props }, ref): JSX.Element => {
-    const classes = clsx('avatar-group', '-space-x-6', className)
+  ({ children, space = -6, className, ...props }, ref): JSX.Element => {
+    const spacingClassName = `${space < 0 ? '-':''}space-x-${Math.abs(space)}`
+    const classes = clsx('avatar-group', spacingClassName, className)
 
     return (
       <div