[@mantine/core] Radio: Fix checked icon clipping and not being center…

…ed with some sizes (#5064) * [@mantine/core] Radio: fix radio icon size * [@mantine/core] Radio: icon readability
mantinedev · Oct 19, 2023 · 2e49cd4 · 2e49cd4
1 parent 5b861a7
commit 2e49cd4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/mantine-core/src/components/Radio/Radio.module.css b/src/mantine-core/src/components/Radio/Radio.module.css
@@ -6,7 +6,12 @@
   --radio-size-xl: rem(36px);
   --radio-size: var(--radio-size-sm);
 
-  --radio-icon-size: calc(var(--radio-size) / 2.25);
+  --radio-icon-size-xs: rem(6px);
+  --radio-icon-size-sm: rem(8px);
+  --radio-icon-size-md: rem(10px);
+  --radio-icon-size-lg: rem(14px);
+  --radio-icon-size-xl: rem(16px);
+  --radio-icon-size: var(--radio-icon-size-sm);
 }
 
 .inner {

diff --git a/src/mantine-core/src/components/Radio/Radio.tsx b/src/mantine-core/src/components/Radio/Radio.tsx
@@ -83,6 +83,7 @@ const varsResolver = createVarsResolver<RadioFactory>((theme, { size, radius, co
     '--radio-size': getSize(size, 'radio-size'),
     '--radio-radius': radius === undefined ? undefined : getRadius(radius),
     '--radio-color': color ? getThemeColor(color, theme) : undefined,
+    '--radio-icon-size': getSize(size, 'radio-icon-size'),
   },
 }));
 

diff --git a/src/mantine-core/src/components/Radio/RadioIcon.tsx b/src/mantine-core/src/components/Radio/RadioIcon.tsx
@@ -14,7 +14,7 @@ export function RadioIcon({ size, style, ...others }: RadioIconProps) {
       style={{ width: rem(size), height: rem(size), ...style }}
       {...others}
     >
-      <path fill="currentColor" d="M0 2.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z" />
+      <circle cx="2.5" cy="2.5" r="2.5" fill="currentColor" />
     </svg>
   );
 }