feat(AvatarGroup): add highlight feature

lumada-design · Apr 5, 2024 · 2fd2b97 · 2fd2b97
1 parent 54151ea
commit 2fd2b97
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/src/AvatarGroup/AvatarGroup.tsx b/packages/core/src/AvatarGroup/AvatarGroup.tsx
@@ -33,6 +33,10 @@ export interface HvAvatarGroupProps extends HvBaseProps {
    * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.
    * */
   overflowComponent?: (overflowCount: number) => React.ReactNode;
+  /**
+   * If `true` the avatars will be brought to the front when hovered.
+   */
+  highlight?: boolean;
 }
 
 const getSpacingValue = (
@@ -70,6 +74,7 @@ export const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
@@ -89,9 +94,6 @@ export const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(
         {Children.map(children, (child: any, index: number) => {
           if (index < maxVisible) {
             return cloneElement(child, {
-              style: {
-                zIndex: 100 + index * zIndexMultiplier,
-              },
               classes: {
                 container: css({
                   marginLeft:
@@ -103,6 +105,14 @@ export const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(
                         : 0
                       : 0,
                 }),
+                root: css({
+                  zIndex: 100 + index * zIndexMultiplier,
+                  ...(highlight && {
+                    "&:hover": {
+                      zIndex: 100 + totalChildren + 1,
+                    },
+                  }),
+                }),
               },
               size,
             });

diff --git a/packages/core/src/AvatarGroup/stories/AvatarGroup.stories.tsx b/packages/core/src/AvatarGroup/stories/AvatarGroup.stories.tsx
@@ -30,6 +30,7 @@ export const Main: StoryObj<HvAvatarGroupProps> = {
     toBack: true,
     maxVisible: 5,
     direction: "row",
+    highlight: false,
   },
   argTypes: {
     classes: { control: { disable: true } },