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";