From 854bf748f7c0f1382a5116d1abe9216ac0bb8e9c Mon Sep 17 00:00:00 2001
From: David Janas <davidjanasr@gmail.com>
Date: Thu, 18 Aug 2022 14:27:30 -0400
Subject: [PATCH] [@mantine/core] Group: use css selectors to style children

---
 docs/src/docs/core/Group.mdx               | 13 -------------
 src/mantine-core/src/Group/Group.styles.ts | 21 ++++++++++-----------
 src/mantine-core/src/Group/Group.test.tsx  |  2 +-
 src/mantine-core/src/Group/Group.tsx       | 12 +-----------
 4 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/docs/src/docs/core/Group.mdx b/docs/src/docs/core/Group.mdx
index f7c86aa9868..1f034775573 100644
--- a/docs/src/docs/core/Group.mdx
+++ b/docs/src/docs/core/Group.mdx
@@ -20,19 +20,6 @@ import { GroupDemos } from '@mantine/demos';
 
 ## Group children
 
-Group component uses `className` prop to add styles to its children, child components must accept it::
-
-```tsx
-// Will not work with Group – component does not handle className
-const MyButton = ({ label }) => <button>{label}</button>;
-
-// Will work with Group – handles className
-const MyButton = ({ label, className }) => <button className={className}>{label}</button>;
-
-// Will work with Group – handles className
-const MyButton = ({ label, ...others }) => <button {...others}>{label}</button>;
-```
-
 **!important** Group will work only with React elements. Strings, numbers, fragments and other parts will
 not have correct styles:
 
diff --git a/src/mantine-core/src/Group/Group.styles.ts b/src/mantine-core/src/Group/Group.styles.ts
index 9d50a3b6c80..516c8f7f22e 100644
--- a/src/mantine-core/src/Group/Group.styles.ts
+++ b/src/mantine-core/src/Group/Group.styles.ts
@@ -29,17 +29,16 @@ export default createStyles(
       flexWrap: noWrap ? 'nowrap' : 'wrap',
       justifyContent: GROUP_POSITIONS[position],
       gap: theme.fn.size({ size: spacing, sizes: theme.spacing }),
-    },
-
-    child: {
-      boxSizing: 'border-box',
-      maxWidth: grow
-        ? `calc(${100 / count}% - ${
-            theme.fn.size({ size: spacing, sizes: theme.spacing }) -
-            theme.fn.size({ size: spacing, sizes: theme.spacing }) / count
-          }px)`
-        : undefined,
-      flexGrow: grow ? 1 : 0,
+      '& > *': {
+        boxSizing: 'border-box',
+        maxWidth: grow
+          ? `calc(${100 / count}% - ${
+              theme.fn.size({ size: spacing, sizes: theme.spacing }) -
+              theme.fn.size({ size: spacing, sizes: theme.spacing }) / count
+            }px)`
+          : undefined,
+        flexGrow: grow ? 1 : 0,
+      },
     },
   })
 );
diff --git a/src/mantine-core/src/Group/Group.test.tsx b/src/mantine-core/src/Group/Group.test.tsx
index dad18ff1f92..55c46138c3f 100644
--- a/src/mantine-core/src/Group/Group.test.tsx
+++ b/src/mantine-core/src/Group/Group.test.tsx
@@ -17,6 +17,6 @@ describe('@mantine/core/Group', () => {
   it('has no falsy children', () => {
     const children = [undefined, null, <div key="1" />];
     const { container } = render(<Group>{children}</Group>);
-    expect(container.querySelectorAll('.mantine-Group-child')).toHaveLength(1);
+    expect(container.querySelectorAll('.mantine-Group-root > *')).toHaveLength(1);
   });
 });
diff --git a/src/mantine-core/src/Group/Group.tsx b/src/mantine-core/src/Group/Group.tsx
index eeaec5e86e7..c37deb074dc 100644
--- a/src/mantine-core/src/Group/Group.tsx
+++ b/src/mantine-core/src/Group/Group.tsx
@@ -43,19 +43,9 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>((props: GroupProps,
     { unstyled, name: 'Group' }
   );
 
-  const items = filteredChildren.map((child) => {
-    if (typeof child === 'object' && child !== null && 'props' in child) {
-      return React.cloneElement(child, {
-        className: cx(classes.child, child.props?.className),
-      });
-    }
-
-    return child;
-  });
-
   return (
     <Box className={cx(classes.root, className)} ref={ref} {...others}>
-      {items}
+      {filteredChildren}
     </Box>
   );
 });