fead: Added noPadding option to Radio.

leemonade · Jan 17, 2024 · a04fec5 · a04fec5
1 parent 36d96af
commit a04fec5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/components/src/form/Radio/Radio.js b/packages/components/src/form/Radio/Radio.js
@@ -24,13 +24,14 @@ const Radio = forwardRef(
       size,
       useAria,
       onChange,
+      noRootPadding,
       ...props
     },
-    ref
+    ref,
   ) => {
     const { classes, cx } = RadioStyles(
-      { checked, variant, help, helpPosition, icon, image, children, label },
-      { name: 'Radio' }
+      { checked, variant, help, helpPosition, icon, image, children, label, noRootPadding },
+      { name: 'Radio' },
     );
 
     const handleOnChange = () => {
@@ -73,7 +74,7 @@ const Radio = forwardRef(
         />
       </Box>
     );
-  }
+  },
 );
 
 Radio.defaultProps = {

diff --git a/packages/components/src/form/Radio/Radio.styles.js b/packages/components/src/form/Radio/Radio.styles.js
@@ -1,8 +1,11 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { getFontProductive, pxToRem } from '../../theme.mixins';
 
 export const RadioStyles = createStyles(
-  (theme, { variant, help, helpPosition, checked, icon, image, children, label }) => {
+  (
+    theme,
+    { variant, help, helpPosition, checked, icon, image, children, label, noRootPadding },
+  ) => {
     const isIcon = variant === 'icon';
     const isDefault = variant === 'default';
     const isImage = variant === 'image';
@@ -22,7 +25,7 @@ export const RadioStyles = createStyles(
         cursor: isImage && 'pointer',
       },
       root: {
-        padding: 14,
+        padding: noRootPadding ? 0 : 14,
         display: isIcon && 'flex',
         justifyContent: isIcon && 'center',
         alignItems: isIcon && 'center',
@@ -76,5 +79,5 @@ export const RadioStyles = createStyles(
         display: isIcon && 'none',
       },
     };
-  }
+  },
 );