Skip to content

Commit

Permalink
fix(material): consistently use outlined input variant
Browse files Browse the repository at this point in the history
Use outlined input variant as the default to match Material UI
  • Loading branch information
LukasBoll committed Jan 24, 2024
1 parent 1791e5c commit 0b5b756
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 0b5b756

Please sign in to comment.