RHIDP-3430: Use the primary color as default color for Checkboxes and…

… Tabs in MUI v4 (similar to MUI v5) (#46) * Checkbox: Use the primary color as default prop in MUI v4 (similar to MUI v5) * Tabs: Use the primary color as default prop in MUI v4 (similar to MUI v5)
redhat-developer · Oct 2, 2024 · 68a1c8e · 68a1c8e
1 parent f346fae
commit 68a1c8e
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 37 deletions.
diff --git a/src/stories/mui-v4/Checkbox.stories.tsx b/src/stories/mui-v4/Checkbox.stories.tsx
@@ -6,6 +6,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormGroup from "@material-ui/core/FormGroup";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import FormLabel from "@material-ui/core/FormLabel";
+import Grid from "@material-ui/core/Grid";
 import type { Meta, StoryObj } from "@storybook/react";
 
 export default {
@@ -16,22 +17,38 @@ export default {
 } satisfies Meta;
 
 export const WithLabels: StoryObj = {
-  render: (args) => (
-    <FormGroup>
-      <FormControlLabel
-        control={<Checkbox defaultChecked />}
-        label="Label"
-        {...args}
-      />
-      <FormControlLabel control={<Checkbox />} label="Required" {...args} />
-      <FormControlLabel
-        disabled
-        control={<Checkbox />}
-        label="Disabled"
-        {...args}
-      />
-    </FormGroup>
-  ),
+  render: (args) => {
+    const colors = [undefined, "default", "primary", "secondary"] as const;
+    return (
+      <Grid container spacing={2}>
+        {colors.map((color) => (
+          <Grid key={color} item>
+            <h1>
+              Color: {color === undefined ? "undefined" : JSON.stringify(color)}
+            </h1>
+            <FormGroup>
+              <FormControlLabel
+                control={<Checkbox color={color} defaultChecked />}
+                label="Label"
+                {...args}
+              />
+              <FormControlLabel
+                control={<Checkbox color={color} />}
+                label="Required"
+                {...args}
+              />
+              <FormControlLabel
+                disabled
+                control={<Checkbox color={color} />}
+                label="Disabled"
+                {...args}
+              />
+            </FormGroup>
+          </Grid>
+        ))}
+      </Grid>
+    );
+  },
 };
 
 export const FormGroupExample: StoryObj = {

diff --git a/src/stories/mui-v5/Checkbox.stories.tsx b/src/stories/mui-v5/Checkbox.stories.tsx
@@ -6,6 +6,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 import FormHelperText from "@mui/material/FormHelperText";
 import FormLabel from "@mui/material/FormLabel";
+import Stack from "@mui/material/Stack";
 import type { Meta, StoryObj } from "@storybook/react";
 
 export default {
@@ -16,27 +17,49 @@ export default {
 } satisfies Meta;
 
 export const WithLabels: StoryObj = {
-  render: (args) => (
-    <FormGroup>
-      <FormControlLabel
-        control={<Checkbox defaultChecked />}
-        label="Label"
-        {...args}
-      />
-      <FormControlLabel
-        required
-        control={<Checkbox />}
-        label="Required"
-        {...args}
-      />
-      <FormControlLabel
-        disabled
-        control={<Checkbox />}
-        label="Disabled"
-        {...args}
-      />
-    </FormGroup>
-  ),
+  render: (args) => {
+    const colors = [
+      undefined,
+      "primary",
+      "secondary",
+      "error",
+      "info",
+      "success",
+      "warning",
+      "default",
+    ] as const;
+
+    return (
+      <Stack spacing={2} direction="row">
+        {colors.map((color) => (
+          <Stack key={color} spacing={2} direction="column">
+            <h1>
+              Color: {color === undefined ? "undefined" : JSON.stringify(color)}
+            </h1>
+            <FormGroup>
+              <FormControlLabel
+                control={<Checkbox color={color} defaultChecked />}
+                label="Label"
+                {...args}
+              />
+              <FormControlLabel
+                required
+                control={<Checkbox color={color} />}
+                label="Required"
+                {...args}
+              />
+              <FormControlLabel
+                disabled
+                control={<Checkbox color={color} />}
+                label="Disabled"
+                {...args}
+              />
+            </FormGroup>
+          </Stack>
+        ))}
+      </Stack>
+    );
+  },
 };
 
 export const FormGroupExample: StoryObj = {

diff --git a/src/themes/rhdh/components.ts b/src/themes/rhdh/components.ts
@@ -215,6 +215,14 @@ export const components = (themeConfig: ThemeConfig): Components => {
     };
   }
 
+  if (options.inputs !== "mui") {
+    components.MuiCheckbox = {
+      defaultProps: {
+        color: "primary",
+      },
+    };
+  }
+
   // MUI accordion
   if (options.accordions !== "mui") {
     components.MuiAccordion = {
@@ -390,6 +398,9 @@ export const components = (themeConfig: ThemeConfig): Components => {
   // MUI tabs
   if (options.tabs !== "mui") {
     components.MuiTabs = {
+      defaultProps: {
+        indicatorColor: "primary",
+      },
       styleOverrides: {
         root: {
           boxShadow: `0 -1px ${general.tabsBottomBorderColor} inset`,

diff --git a/src/types.ts b/src/types.ts
@@ -66,6 +66,8 @@ export interface ThemeOptions {
 
   inputs?: "patternfly" | "mui";
 
+  checkbox?: "patternfly" | "mui";
+
   accordions?: "patternfly" | "mui";
 
   sidebars?: "patternfly" | "mui";