Skip to content

Commit

Permalink
fix: consistently use outlined input variant in React Material
Browse files Browse the repository at this point in the history
Use outlined input variant as the default to align with Material UI
  • Loading branch information
LukasBoll authored Jan 24, 2024
1 parent 1791e5c commit 3a68d0c
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 4 deletions.
38 changes: 38 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/material-renderers/src/util/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() });

Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand Down

0 comments on commit 3a68d0c

Please sign in to comment.