[@mantine/core] Group: use css selectors to style children

mantinedev · Aug 18, 2022 · 854bf74 · 854bf74
1 parent 8a2b20e
commit 854bf74
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 });