diff --git a/src/stories/mui-v4/Checkbox.stories.tsx b/src/stories/mui-v4/Checkbox.stories.tsx
index 733ca60..824d211 100644
--- 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) => (
-
- }
- label="Label"
- {...args}
- />
- } label="Required" {...args} />
- }
- label="Disabled"
- {...args}
- />
-
- ),
+ render: (args) => {
+ const colors = [undefined, "default", "primary", "secondary"] as const;
+ return (
+
+ {colors.map((color) => (
+
+
+ Color: {color === undefined ? "undefined" : JSON.stringify(color)}
+
+
+ }
+ label="Label"
+ {...args}
+ />
+ }
+ label="Required"
+ {...args}
+ />
+ }
+ label="Disabled"
+ {...args}
+ />
+
+
+ ))}
+
+ );
+ },
};
export const FormGroupExample: StoryObj = {
diff --git a/src/stories/mui-v5/Checkbox.stories.tsx b/src/stories/mui-v5/Checkbox.stories.tsx
index 15deceb..6f9a355 100644
--- 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) => (
-
- }
- label="Label"
- {...args}
- />
- }
- label="Required"
- {...args}
- />
- }
- label="Disabled"
- {...args}
- />
-
- ),
+ render: (args) => {
+ const colors = [
+ undefined,
+ "primary",
+ "secondary",
+ "error",
+ "info",
+ "success",
+ "warning",
+ "default",
+ ] as const;
+
+ return (
+
+ {colors.map((color) => (
+
+
+ Color: {color === undefined ? "undefined" : JSON.stringify(color)}
+
+
+ }
+ label="Label"
+ {...args}
+ />
+ }
+ label="Required"
+ {...args}
+ />
+ }
+ label="Disabled"
+ {...args}
+ />
+
+
+ ))}
+
+ );
+ },
};
export const FormGroupExample: StoryObj = {
diff --git a/src/themes/rhdh/components.ts b/src/themes/rhdh/components.ts
index f28583a..0e99216 100644
--- 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
index 253e389..0f61764 100644
--- 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";