💄 Add option to target Avatar groups with CSS classes

Author: Frontendland

src/components/Avatar/Avatar.astro

@@ -13,18 +13,25 @@ const {
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 } = Astro.props
 
 const classes = [
     styles.avatar,
     borderless && styles.borderless,
     className
 ]
+
+const groupClasses = [
+    styles.group,
+    reverse && styles.reverse,
+    groupClassName
+]
 ---
 
 {Array.isArray(img) ? (
-    <div class:list={[styles.group, reverse && styles.reverse]}
+    <div class:list={groupClasses}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (

src/components/Avatar/Avatar.svelte

@@ -13,6 +13,7 @@
     export let borderless: AvatarProps['borderless'] = false
     export let reverse: AvatarProps['reverse'] = false
     export let className: AvatarProps['className'] = ''
+    export let groupClassName: AvatarProps['groupClassName'] = ''
 
     const classes = classNames([
         styles.avatar,
@@ -22,7 +23,8 @@
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 </script>
 

src/components/Avatar/Avatar.tsx

@@ -13,7 +13,8 @@ const Avatar = ({
     borderColor,
     borderless,
     reverse,
-    className
+    className,
+    groupClassName
 }: AvatarProps) => {
     const classes = classNames([
         styles.avatar,
@@ -23,7 +24,8 @@ const Avatar = ({
 
     const groupStyles = classNames([
         styles.group,
-        reverse && styles.reverse
+        reverse && styles.reverse,
+        groupClassName
     ])
 
     const borderColorStyle = borderColor

src/components/Avatar/avatar.ts

@@ -7,4 +7,5 @@ export type AvatarProps = {
     borderless?: boolean
     reverse?: boolean
     className?: string
+    groupClassName?: string
 }

src/pages/avatar.astro

@@ -95,8 +95,16 @@ const sections = getSections({
                 <section.component
                     size={[30, 40, 50, 40, 30]}
                     img={avatarGroup}
+                    groupClassName="group"
                 />
             </ComponentWrapper>
         </div>
     ))}
 </Layout>
+
+<style is:global>
+    .group {
+        width: 100%;
+        justify-content: center;
+    }
+</style>