[@mantine/core] Add mod prop support to all components

mantinedev · Jan 19, 2024 · 58d10fe · 58d10fe
1 parent e4e1d5f
commit 58d10fe
Show file tree

Hide file tree

Showing 51 changed files with 240 additions and 94 deletions.
diff --git a/packages/@mantine/carousel/src/CarouselSlide/CarouselSlide.tsx b/packages/@mantine/carousel/src/CarouselSlide/CarouselSlide.tsx
@@ -28,7 +28,7 @@ export type CarouselSlideFactory = Factory<{
 const defaultProps: Partial<CarouselSlideProps> = {};
 
 export const CarouselSlide = factory<CarouselSlideFactory>((props, ref) => {
-  const { classNames, className, style, styles, vars, ...others } = useProps(
+  const { classNames, className, style, styles, vars, mod, ...others } = useProps(
     'CarouselSlide',
     defaultProps,
     props
@@ -39,7 +39,7 @@ export const CarouselSlide = factory<CarouselSlideFactory>((props, ref) => {
   return (
     <Box
       ref={ref}
-      mod={{ orientation: ctx.orientation }}
+      mod={[{ orientation: ctx.orientation }, mod]}
       {...ctx.getStyles('slide', { className, style, classNames, styles })}
       {...others}
     />

diff --git a/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx b/packages/@mantine/charts/src/ChartLegend/ChartLegend.tsx
@@ -47,6 +47,7 @@ export const ChartLegend = factory<ChartLegendFactory>((_props, ref) => {
     payload,
     onHighlight,
     legendPosition,
+    mod,
     ...others
   } = props;
 
@@ -85,7 +86,7 @@ export const ChartLegend = factory<ChartLegendFactory>((_props, ref) => {
   ));
 
   return (
-    <Box ref={ref} mod={{ position: legendPosition }} {...getStyles('legend')} {...others}>
+    <Box ref={ref} mod={[{ position: legendPosition }, mod]} {...getStyles('legend')} {...others}>
       {items}
     </Box>
   );

diff --git a/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx b/packages/@mantine/charts/src/ChartTooltip/ChartTooltip.tsx
@@ -86,6 +86,7 @@ export const ChartTooltip = factory<ChartTooltipFactory>((_props, ref) => {
     unit,
     type,
     segmentId,
+    mod,
     ...others
   } = props;
 
@@ -127,7 +128,7 @@ export const ChartTooltip = factory<ChartTooltipFactory>((_props, ref) => {
   ));
 
   return (
-    <Box {...getStyles('tooltip')} mod={{ type }} ref={ref} {...others}>
+    <Box {...getStyles('tooltip')} mod={[{ type }, mod]} ref={ref} {...others}>
       {label && <div {...getStyles('tooltipLabel')}>{label}</div>}
       <div {...getStyles('tooltipBody')}>{items}</div>
     </Box>

diff --git a/packages/@mantine/code-highlight/src/CodeHighlightTabs.tsx b/packages/@mantine/code-highlight/src/CodeHighlightTabs.tsx
@@ -145,6 +145,7 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
     expandCodeLabel,
     collapseCodeLabel,
     withExpandButton,
+    mod,
     ...others
   } = props;
 
@@ -200,7 +201,13 @@ export const CodeHighlightTabs = factory<CodeHighlightTabsFactory>((_props, ref)
   ));
 
   return (
-    <Box {...getStyles('root')} mod={{ collapsed: !_expanded }} ref={ref} {...others} dir="ltr">
+    <Box
+      {...getStyles('root')}
+      mod={[{ collapsed: !_expanded }, mod]}
+      ref={ref}
+      {...others}
+      dir="ltr"
+    >
       {withHeader && (
         <div {...getStyles('header')}>
           <ScrollArea type="never" dir="ltr" offsetScrollbars={false}>

diff --git a/packages/@mantine/core/src/components/Accordion/AccordionItem/AccordionItem.tsx b/packages/@mantine/core/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -32,7 +32,7 @@ export type AccordionItemFactory = Factory<{
 const defaultProps: Partial<AccordionItemProps> = {};
 
 export const AccordionItem = factory<AccordionItemFactory>((props, ref) => {
-  const { classNames, className, style, styles, vars, value, ...others } = useProps(
+  const { classNames, className, style, styles, vars, value, mod, ...others } = useProps(
     'AccordionItem',
     defaultProps,
     props
@@ -43,7 +43,7 @@ export const AccordionItem = factory<AccordionItemFactory>((props, ref) => {
     <AccordionItemProvider value={{ value }}>
       <Box
         ref={ref}
-        mod={{ active: ctx.isItemActive(value) }}
+        mod={[{ active: ctx.isItemActive(value) }, mod]}
         {...ctx.getStyles('item', { className, classNames, styles, style, variant: ctx.variant })}
         {...others}
       />

diff --git a/packages/@mantine/core/src/components/ActionIcon/ActionIconGroup/ActionIconGroup.tsx b/packages/@mantine/core/src/components/ActionIcon/ActionIconGroup/ActionIconGroup.tsx
@@ -55,6 +55,7 @@ export const ActionIconGroup = factory<ActionIconGroupFactory>((_props, ref) =>
     vars,
     borderWidth,
     variant,
+    mod,
     ...others
   } = useProps('ActionIconGroup', defaultProps, _props);
 
@@ -77,7 +78,7 @@ export const ActionIconGroup = factory<ActionIconGroupFactory>((_props, ref) =>
       {...getStyles('group')}
       ref={ref}
       variant={variant}
-      mod={{ 'data-orientation': orientation }}
+      mod={[{ 'data-orientation': orientation }, mod]}
       role="group"
       {...others}
     />

diff --git a/packages/@mantine/core/src/components/AppShell/AppShell.tsx b/packages/@mantine/core/src/components/AppShell/AppShell.tsx
@@ -138,6 +138,7 @@ export const AppShell = factory<AppShellFactory>((_props, ref) => {
     aside,
     footer,
     offsetScrollbars,
+    mod,
     ...others
   } = props;
 
@@ -165,7 +166,12 @@ export const AppShell = factory<AppShellFactory>((_props, ref) => {
         footer={footer}
         padding={padding}
       />
-      <Box ref={ref} {...getStyles('root')} mod={{ resizing, layout, disabled }} {...others} />
+      <Box
+        ref={ref}
+        {...getStyles('root')}
+        mod={[{ resizing, layout, disabled }, mod]}
+        {...others}
+      />
     </AppShellProvider>
   );
 });

diff --git a/packages/@mantine/core/src/components/AppShell/AppShellAside/AppShellAside.tsx b/packages/@mantine/core/src/components/AppShell/AppShellAside/AppShellAside.tsx
@@ -34,8 +34,18 @@ const defaultProps: Partial<AppShellAsideProps> = {};
 
 export const AppShellAside = factory<AppShellAsideFactory>((_props, ref) => {
   const props = useProps('AppShellAside', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, ...others } =
-    props;
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    withBorder,
+    zIndex,
+    mod,
+    ...others
+  } = props;
   const ctx = useAppShellContext();
 
   if (ctx.disabled) {
@@ -46,7 +56,7 @@ export const AppShellAside = factory<AppShellAsideFactory>((_props, ref) => {
     <Box
       component="aside"
       ref={ref}
-      mod={{ 'with-border': withBorder ?? ctx.withBorder }}
+      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}
       {...ctx.getStyles('aside', { className, classNames, styles, style })}
       {...others}
       __vars={{

diff --git a/packages/@mantine/core/src/components/AppShell/AppShellFooter/AppShellFooter.tsx b/packages/@mantine/core/src/components/AppShell/AppShellFooter/AppShellFooter.tsx
@@ -36,8 +36,18 @@ const defaultProps: Partial<AppShellFooterProps> = {};
 
 export const AppShellFooter = factory<AppShellFooterFactory>((_props, ref) => {
   const props = useProps('AppShellFooter', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, ...others } =
-    props;
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    withBorder,
+    zIndex,
+    mod,
+    ...others
+  } = props;
   const ctx = useAppShellContext();
 
   if (ctx.disabled) {
@@ -48,7 +58,7 @@ export const AppShellFooter = factory<AppShellFooterFactory>((_props, ref) => {
     <Box
       component="footer"
       ref={ref}
-      mod={{ 'with-border': withBorder ?? ctx.withBorder }}
+      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}
       {...ctx.getStyles('footer', {
         className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
         classNames,

diff --git a/packages/@mantine/core/src/components/AppShell/AppShellHeader/AppShellHeader.tsx b/packages/@mantine/core/src/components/AppShell/AppShellHeader/AppShellHeader.tsx
@@ -36,8 +36,18 @@ const defaultProps: Partial<AppShellHeaderProps> = {};
 
 export const AppShellHeader = factory<AppShellHeaderFactory>((_props, ref) => {
   const props = useProps('AppShellHeader', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, ...others } =
-    props;
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    withBorder,
+    zIndex,
+    mod,
+    ...others
+  } = props;
   const ctx = useAppShellContext();
 
   if (ctx.disabled) {
@@ -48,7 +58,7 @@ export const AppShellHeader = factory<AppShellHeaderFactory>((_props, ref) => {
     <Box
       component="header"
       ref={ref}
-      mod={{ 'with-border': withBorder ?? ctx.withBorder }}
+      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}
       {...ctx.getStyles('header', {
         className: cx({ [RemoveScroll.classNames.zeroRight]: ctx.offsetScrollbars }, className),
         classNames,

diff --git a/packages/@mantine/core/src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx b/packages/@mantine/core/src/components/AppShell/AppShellNavbar/AppShellNavbar.tsx
@@ -34,8 +34,18 @@ const defaultProps: Partial<AppShellNavbarProps> = {};
 
 export const AppShellNavbar = factory<AppShellNavbarFactory>((_props, ref) => {
   const props = useProps('AppShellNavbar', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, withBorder, zIndex, ...others } =
-    props;
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    withBorder,
+    zIndex,
+    mod,
+    ...others
+  } = props;
   const ctx = useAppShellContext();
 
   if (ctx.disabled) {
@@ -46,7 +56,7 @@ export const AppShellNavbar = factory<AppShellNavbarFactory>((_props, ref) => {
     <Box
       component="nav"
       ref={ref}
-      mod={{ 'with-border': withBorder ?? ctx.withBorder }}
+      mod={[{ 'with-border': withBorder ?? ctx.withBorder }, mod]}
       {...ctx.getStyles('navbar', { className, classNames, styles, style })}
       {...others}
       __vars={{

diff --git a/packages/@mantine/core/src/components/AppShell/AppShellSection/AppShellSection.tsx b/packages/@mantine/core/src/components/AppShell/AppShellSection/AppShellSection.tsx
@@ -31,13 +31,13 @@ const defaultProps: Partial<AppShellSectionProps> = {};
 
 export const AppShellSection = polymorphicFactory<AppShellSectionFactory>((_props, ref) => {
   const props = useProps('AppShellSection', defaultProps, _props);
-  const { classNames, className, style, styles, vars, grow, ...others } = props;
+  const { classNames, className, style, styles, vars, grow, mod, ...others } = props;
   const ctx = useAppShellContext();
 
   return (
     <Box
       ref={ref}
-      mod={{ grow }}
+      mod={[{ grow }, mod]}
       {...ctx.getStyles('section', { className, style, classNames, styles })}
       {...others}
     />

diff --git a/packages/@mantine/core/src/components/Avatar/Avatar.tsx b/packages/@mantine/core/src/components/Avatar/Avatar.tsx
@@ -116,6 +116,7 @@ export const Avatar = polymorphicFactory<AvatarFactory>((_props, ref) => {
     imageProps,
     children,
     autoContrast,
+    mod,
     ...others
   } = props;
   const ctx = useAvatarGroupContext();
@@ -137,7 +138,12 @@ export const Avatar = polymorphicFactory<AvatarFactory>((_props, ref) => {
   useEffect(() => setError(!src), [src]);
 
   return (
-    <Box {...getStyles('root')} mod={{ 'within-group': ctx.withinGroup }} ref={ref} {...others}>
+    <Box
+      {...getStyles('root')}
+      mod={[{ 'within-group': ctx.withinGroup }, mod]}
+      ref={ref}
+      {...others}
+    >
       {error ? (
         <span {...getStyles('placeholder')} title={alt}>
           {children || <AvatarPlaceholderIcon />}

diff --git a/packages/@mantine/core/src/components/Badge/Badge.tsx b/packages/@mantine/core/src/components/Badge/Badge.tsx
@@ -128,6 +128,7 @@ export const Badge = polymorphicFactory<BadgeFactory>((_props, ref) => {
     fullWidth,
     autoContrast,
     circle,
+    mod,
     ...others
   } = props;
 
@@ -147,7 +148,7 @@ export const Badge = polymorphicFactory<BadgeFactory>((_props, ref) => {
   return (
     <Box
       variant={variant}
-      mod={{ block: fullWidth, circle }}
+      mod={[{ block: fullWidth, circle }, mod]}
       {...getStyles('root', { variant })}
       ref={ref}
       {...others}

diff --git a/packages/@mantine/core/src/components/Button/Button.tsx b/packages/@mantine/core/src/components/Button/Button.tsx
@@ -154,6 +154,7 @@ export const Button = polymorphicFactory<ButtonFactory>((_props, ref) => {
     unstyled,
     'data-disabled': dataDisabled,
     autoContrast,
+    mod,
     ...others
   } = props;
 
@@ -180,13 +181,16 @@ export const Button = polymorphicFactory<ButtonFactory>((_props, ref) => {
       unstyled={unstyled}
       variant={variant}
       disabled={disabled || loading}
-      mod={{
-        disabled: disabled || dataDisabled,
-        loading,
-        block: fullWidth,
-        'with-left-section': hasLeftSection,
-        'with-right-section': hasRightSection,
-      }}
+      mod={[
+        {
+          disabled: disabled || dataDisabled,
+          loading,
+          block: fullWidth,
+          'with-left-section': hasLeftSection,
+          'with-right-section': hasRightSection,
+        },
+        mod,
+      ]}
       {...others}
     >
       <Box component="span" {...getStyles('loader')} aria-hidden>

diff --git a/packages/@mantine/core/src/components/Button/ButtonGroup/ButtonGroup.tsx b/packages/@mantine/core/src/components/Button/ButtonGroup/ButtonGroup.tsx
@@ -55,6 +55,7 @@ export const ButtonGroup = factory<ButtonGroupFactory>((_props, ref) => {
     vars,
     borderWidth,
     variant,
+    mod,
     ...others
   } = useProps('ButtonGroup', defaultProps, _props);
 
@@ -77,7 +78,7 @@ export const ButtonGroup = factory<ButtonGroupFactory>((_props, ref) => {
       {...getStyles('group')}
       ref={ref}
       variant={variant}
-      mod={{ 'data-orientation': orientation }}
+      mod={[{ 'data-orientation': orientation }, mod]}
       role="group"
       {...others}
     />

diff --git a/packages/@mantine/core/src/components/Card/CardSection/CardSection.tsx b/packages/@mantine/core/src/components/Card/CardSection/CardSection.tsx
@@ -32,14 +32,14 @@ const defaultProps: Partial<CardSectionProps> = {};
 
 export const CardSection = polymorphicFactory<CardSectionFactory>((_props, ref) => {
   const props = useProps('CardSection', defaultProps, _props);
-  const { classNames, className, style, styles, vars, withBorder, inheritPadding, ...others } =
+  const { classNames, className, style, styles, vars, withBorder, inheritPadding, mod, ...others } =
     props;
   const ctx = useCardContext();
 
   return (
     <Box
       ref={ref}
-      mod={{ 'with-border': withBorder, 'inherit-padding': inheritPadding }}
+      mod={[{ 'with-border': withBorder, 'inherit-padding': inheritPadding }, mod]}
       {...ctx.getStyles('section', { className, style, styles, classNames })}
       {...others}
     />

diff --git a/packages/@mantine/core/src/components/Center/Center.tsx b/packages/@mantine/core/src/components/Center/Center.tsx
@@ -31,7 +31,7 @@ const defaultProps: Partial<CenterProps> = {};
 
 export const Center = polymorphicFactory<CenterFactory>((_props, ref) => {
   const props = useProps('Center', defaultProps, _props);
-  const { classNames, className, style, styles, unstyled, vars, inline, ...others } = props;
+  const { classNames, className, style, styles, unstyled, vars, inline, mod, ...others } = props;
 
   const getStyles = useStyles<CenterFactory>({
     name: 'Center',
@@ -45,7 +45,7 @@ export const Center = polymorphicFactory<CenterFactory>((_props, ref) => {
     vars,
   });
 
-  return <Box ref={ref} mod={{ inline }} {...getStyles('root')} {...others} />;
+  return <Box ref={ref} mod={[{ inline }, mod]} {...getStyles('root')} {...others} />;
 });
 
 Center.classes = classes;