Merge pull request #10854 from marmelab/bw-inputs

Fix B&W theme label is invisible for inputs with `standard` variant

Author: slax57

packages/ra-ui-materialui/src/theme/ThemeTester.stories.tsx

@@ -103,7 +103,7 @@ const Wrapper = ({ children, themeName, themeType }) => {
     );
 };
 
-export const ThemeTester = ({ themeName, themeType }) => (
+export const ThemeTester = ({ themeName, themeType, inputVariant }) => (
     <Wrapper themeName={themeName} themeType={themeType}>
         <Snackbar
             open
@@ -159,14 +159,15 @@ export const ThemeTester = ({ themeName, themeType }) => (
             <Section title="Form Inputs">
                 <ResourceContextProvider value="posts">
                     <SimpleForm>
-                        <TextInput source="text" />
-                        <DateInput source="date" />
+                        <TextInput source="text" variant={inputVariant} />
+                        <DateInput source="date" variant={inputVariant} />
                         <SelectInput
                             source="select"
                             choices={[
                                 { id: 1, name: 'One' },
                                 { id: 2, name: 'Two' },
                             ]}
+                            variant={inputVariant}
                         />
                         <SelectInput
                             source="select2"
@@ -175,24 +176,30 @@ export const ThemeTester = ({ themeName, themeType }) => (
                                 { id: 2, name: 'Two' },
                             ]}
                             isPending
+                            variant={inputVariant}
                         />
                         <RadioButtonGroupInput
                             source="radio"
                             choices={[
                                 { id: 1, name: 'One' },
                                 { id: 2, name: 'Two' },
                             ]}
+                            variant={inputVariant}
                         />
                         <CheckboxGroupInput
                             source="checkbox"
                             choices={[
                                 { id: 1, name: 'One' },
                                 { id: 2, name: 'Two' },
                             ]}
+                            variant={inputVariant}
                         />
-                        <BooleanInput source="boolean" />
-                        <PasswordInput source="password" />
-                        <SearchInput source="search" />
+                        <BooleanInput source="boolean" variant={inputVariant} />
+                        <PasswordInput
+                            source="password"
+                            variant={inputVariant}
+                        />
+                        <SearchInput source="search" variant={inputVariant} />
                     </SimpleForm>
                 </ResourceContextProvider>
             </Section>
@@ -228,6 +235,7 @@ export const ThemeTester = ({ themeName, themeType }) => (
 ThemeTester.args = {
     themeName: 'Default',
     themeType: 'light',
+    inputVariant: 'filled',
 };
 ThemeTester.argTypes = {
     themeName: {
@@ -238,6 +246,10 @@ ThemeTester.argTypes = {
         control: 'select',
         options: ['light', 'dark'],
     },
+    inputVariant: {
+        control: 'select',
+        options: ['standard', 'filled', 'outlined'],
+    },
 };
 
 const Separator = () => (

packages/ra-ui-materialui/src/theme/bwTheme.ts

@@ -179,7 +179,11 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
             MuiListItemButton: {
                 defaultProps: { disableRipple: true },
             },
-            MuiInputBase: {
+            MuiFormControl: {
+                defaultProps: {
+                    margin: 'dense' as const,
+                    fullWidth: true,
+                },
                 styleOverrides: {
                     root: {
                         backgroundColor: isDarkMode ? commonBlack : commonWhite,
@@ -277,12 +281,6 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
                     fullWidth: true,
                 },
             },
-            MuiFormControl: {
-                defaultProps: {
-                    margin: 'dense' as const,
-                    fullWidth: true,
-                },
-            },
             MuiTextField: {
                 defaultProps: {
                     variant: 'outlined' as const,