fix: consistently use outlined input variant in React Material

Use outlined input variant as the default to align with Material UI

Author: LukasBoll

MIGRATION.md

@@ -1,5 +1,43 @@
 # Migration guide
 
+## Migrating to JSON Forms 3.2
+
+### Material Renderers using Outlined Inputs
+
+JSON Forms now uses the `outlined` input variant as the default, aligning with the default style of Material UI since version 5.
+If you would like to use the `standard` input variant, as was default in previous versions of JSON Forms, then this can be accomplished using the Material UI `ThemeProvider`:
+
+```ts
+import { JsonForms } from '@jsonforms/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const theme = createTheme({
+  components: {
+    MuiFormControl: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+  },
+});
+
+...
+
+<ThemeProvider theme={theme}>
+  <JsonForms {...props} />
+</ThemeProvider>;
+```
+
 ## Migrating to JSON Forms 3.0
 
 ### Additional parameter for testers

packages/material-renderers/src/util/theme.ts

@@ -52,7 +52,7 @@ const variantToInput = {
   outlined: OutlinedInput,
 };
 
-export const defaultInputVariant: TextFieldProps['variant'] = 'standard';
+export const defaultInputVariant: TextFieldProps['variant'] = 'outlined';
 
 export function useInputVariant(): TextFieldProps['variant'] {
   const { variant = defaultInputVariant } = useThemeProps({

packages/material-renderers/test/renderers/MaterialTextControl.test.tsx

@@ -30,7 +30,7 @@ import { MaterialInputControl } from '../../src/controls/MaterialInputControl';
 import { MuiInputText } from '../../src/mui-controls/MuiInputText';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement, ControlProps } from '@jsonforms/core';
-import { Input, InputAdornment } from '@mui/material';
+import { InputAdornment, OutlinedInput } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -99,7 +99,7 @@ describe('Material text control', () => {
     const props = defaultControlProps();
     wrapper = mount(createMaterialTextControl(props));
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
-    wrapper.find(Input).props().onPointerEnter?.call(this);
+    wrapper.find(OutlinedInput).props().onPointerEnter?.call(this);
     wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).not.toHaveProperty(
       'display',
@@ -112,7 +112,7 @@ describe('Material text control', () => {
     delete props.data;
     wrapper = mount(createMaterialTextControl(props));
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
-    wrapper.find(Input).props().onPointerEnter?.call(this);
+    wrapper.find(OutlinedInput).props().onPointerEnter?.call(this);
     wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).toHaveProperty(
       'display',