diff --git a/MIGRATION.md b/MIGRATION.md index 9458c2f80..a99939325 100644 --- a/MIGRATION.md +++ b/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', + }, + }, + }, +}); + +... + + + +; +``` + ## Migrating to JSON Forms 3.0 ### Additional parameter for testers diff --git a/packages/material-renderers/src/util/theme.ts b/packages/material-renderers/src/util/theme.ts index 37789d9be..0ee65aa3b 100644 --- a/packages/material-renderers/src/util/theme.ts +++ b/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({ diff --git a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx b/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx index caa3a241d..03cdfd7eb 100644 --- a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx +++ b/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',