[@mantine/core] Radio: Fix size prop not being respected when used wi…

…thin Radio.Group (#2913)
mantinedev · Nov 12, 2022 · fa44806 · fa44806
1 parent 35c3f62
commit fa44806
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/mantine-core/src/Radio/Radio.story.tsx b/src/mantine-core/src/Radio/Radio.story.tsx
@@ -30,13 +30,43 @@ export function RadioGroup() {
 
 export function Sizes() {
   const items = MANTINE_SIZES.map((size) => (
-    <Radio.Group defaultValue="ng" key={size} size={size} mt="xl">
+    <Radio.Group defaultValue="ng" key={size} size={size}>
       <Radio label="React" value="react" />
       <Radio label="Angular" value="ng" />
       <Radio label="Svelte" value="sv" disabled />
     </Radio.Group>
   ));
-  return <div style={{ padding: 20 }}>{items}</div>;
+
+  return (
+    <div style={{ padding: 20 }}>
+      <Stack>
+        <div>
+          Independent Radio buttons:
+          <Radio label="React" value="react" size="xs" />
+          <Radio label="React" value="react" size="sm" />
+          <Radio label="React" value="react" size="md" />
+          <Radio label="React" value="react" size="lg" />
+          <Radio label="React" value="react" size="xl" />
+        </div>
+        <div>
+          Radio Group:
+          {items}
+        </div>
+        <div>
+          Override size of specific radio button in group:
+          <Radio.Group size="sm">
+            <Radio label="default" value="def1" />
+            <Radio label="xs" value="xs" size="xs" />
+            <Radio label="sm" value="sm" size="sm" />
+            <Radio label="md" value="md" size="md" />
+            <Radio label="lg" value="lg" size="lg" />
+            <Radio label="xl" value="xl" size="xl" />
+            <Radio label="default" value="def2" />
+          </Radio.Group>
+        </div>
+      </Stack>
+    </div>
+  );
 }
 
 export function ComparedToCheckbox() {

diff --git a/src/mantine-core/src/Radio/Radio.tsx b/src/mantine-core/src/Radio/Radio.tsx
@@ -84,8 +84,11 @@ export const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((p
   } = useComponentDefaultProps('Radio', defaultProps, props);
   const ctx = useRadioGroupContext();
 
+  const contextSize = ctx?.size ?? size;
+  const componentSize = props.size ? size : contextSize;
+
   const { classes } = useStyles(
-    { color, size: ctx?.size || size, transitionDuration, labelPosition, error: !!error },
+    { color, size: componentSize, transitionDuration, labelPosition, error: !!error },
     { classNames, styles, unstyled, name: 'Radio' }
   );
 
@@ -106,7 +109,7 @@ export const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((p
       sx={sx}
       style={style}
       id={uuid}
-      size={ctx?.size || size}
+      size={componentSize}
       labelPosition={labelPosition}
       label={label}
       description={description}