Make changes to Checkbox based on Text component changes (#33099)

frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx

@@ -2,7 +2,22 @@ import { Canvas, Story, Meta } from "@storybook/addon-docs";
 import { Checkbox } from "./";
 
 
-<Meta title="Inputs/Checkbox & Checkbox Group" component={Checkbox}  />
+<Meta title="Inputs/Checkbox & Checkbox Group" component={Checkbox}
+      argTypes={
+        {
+          size: {
+            options: ["xs", "sm", "md", "lg", "xl"],
+            control: { type: 'inline-radio' }
+          },
+        }
+      }
+/>
+
+export const Template = args => <Checkbox.Group defaultValue={["yes"]} {...args}>
+  <Checkbox label="Yes" value="yes" />
+  <Checkbox label="No" value="no" />
+  <Checkbox label="I'm not sure" indeterminate />
+</Checkbox.Group>
 
 # Checkbox & Checkbox.Group
 
@@ -19,7 +34,6 @@ Checkbox buttons allow users to select a single option from a list of mutually e
 
 ## Caveats
 
-- As of right now, don't use the size prop.
 - Please don't use the `error` prop on Checkbox components (We'll standardize on this as other inputs get converted).
 
 ## Usage guidelines
@@ -32,11 +46,7 @@ Checkbox buttons allow users to select a single option from a list of mutually e
 
 <Canvas>
   <Story name="Default">
-    <Checkbox.Group defaultValue="yes">
-      <Checkbox label="Yes" value="yes" />
-      <Checkbox label="No" value="no" />
-      <Checkbox label="I'm not sure" indeterminate />
-    </Checkbox.Group>
+    {Template.bind({})}
   </Story>
 </Canvas>
 

frontend/src/metabase/ui/theme.ts

@@ -50,6 +50,7 @@ export const theme: MantineThemeOverride = {
     Checkbox: {
       defaultProps: {
         icon: CheckboxIcon,
+        size: "md",
       },
       styles(theme, params) {
         return {
@@ -60,7 +61,7 @@ export const theme: MantineThemeOverride = {
             fontWeight: 700,
             color: theme.colors.text[2],
             [`padding${params.labelPosition === "left" ? "Right" : "Left"}`]:
-              theme.spacing.xs,
+              "8px",
           },
           input: {
             "&:focus": {
@@ -78,18 +79,22 @@ export const theme: MantineThemeOverride = {
               background: theme.colors.brand[1],
               border: `1px solid ${theme.colors.brand[1]}`,
             }),
+            transform: `scale(0.75)`,
           },
-          ...(params.indeterminate && {
-            icon: {
+          icon: {
+            ...(params.indeterminate && {
               "& > *": {
                 fill: color("white"),
               },
-            },
-          }),
+            }),
+          },
         };
       },
     },
     CheckboxGroup: {
+      defaultProps: {
+        size: "md",
+      },
       styles(theme) {
         /* Note: we need the ':has' selector to target the space just
          * above the first checkbox since we don't seem to have selector