Skip to content

Commit

Permalink
removes fields section from migration doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@arthurbalduini
arthurbalduini committed Oct 17, 2024
1 parent 6dbbabc commit b50ada1
Showing 1 changed file with 0 additions and 194 deletions.
194 changes: 0 additions & 194 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,200 +63,6 @@ After running the codemods, make sure to test your application and that you don'
Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
:::

## New DOM structure for the field

Before version `v8.x`, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component,
but unfortunately presents a few limitations in terms of accessibility when managing multiple section values.

Starting with version `v8.x`, all the field and picker components come with a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers.

### Fallback to the non-accessible DOM structure

```tsx
<DateField enableAccessibleFieldDOMStructure={false} />
<DatePicker enableAccessibleFieldDOMStructure={false} />
<DateRangePicker enableAccessibleFieldDOMStructure={false} />
```

### Migrate `slotProps.field`

When using `slotProps.field` to pass props to your field component,
the field consumes some props (e.g: `shouldRespectLeadingZeros`) and forwards the rest to the `TextField`.

- For the props consumed by the field, the behavior should remain exactly the same with both DOM structures.

Both components below will respect the leading zeroes on digit sections:

```js
<DatePicker
slotProps={{ field: { shouldRespectLeadingZeros: true } }}
enableAccessibleFieldDOMStructure={false}
/>
<DatePicker
slotProps={{ field: { shouldRespectLeadingZeros: true } }}
/>
```

- For the props forwarded to the `TextField`,
you can have a look at the next section to see how the migration impact them.

Both components below will render a small size UI:

```js
<DatePicker
slotProps={{ field: { size: 'small' } }}
enableAccessibleFieldDOMStructure={false}
/>
<DatePicker
slotProps={{ field: { size: 'small' } }}
/>
```

### Migrate `slotProps.textField`

If you are passing props to `slotProps.textField`,
these props will now be received by `PickersTextField` and should keep working the same way as before.

Both components below will render a small size UI:

```js
<DatePicker
slotProps={{ textField: { size: 'small' } }}
enableAccessibleFieldDOMStructure={false}
/>
<DatePicker
slotProps={{ textField: { size: 'small' } }}
/>
```

:::info
If you are passing `inputProps` to `slotProps.textField`,
these props will now be passed to the hidden `<input />` element.
:::

### Migrate `slots.field`

If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure.
This new component will need to use the `PickersSectionList` component instead of an `<input />` HTML element.

You can have a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) to have a concrete example.

:::info
If your custom field was used to create a Joy UI design component,
you may want to wait a few weeks for the release of an out-of-the-box Joy `PickersTextField` component instead of implementing it yourself.
:::

### Migrate `slots.textField`

If you are passing a custom `TextField` component to your fields and pickers,
you need to create a new one that is using the accessible DOM structure.

You can have a look at the second demo of the [Wrapping PickersTextField](/x/react-date-pickers/custom-field/#wrapping-pickerstextfield) to have a concrete example.

:::info
If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`,
please consider having a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) section which uses `slots.field`.
This approach can be more appropriate for deeper changes.
:::

### Migrate the theme

If you are using the theme to customize `MuiTextField`,
you need to pass the same config to `MuiPickersTextField`:

```js
const theme = createTheme({
components: {
MuiTextField: {
defaultProps: {
variant: 'outlined',
},
styleOverrides: {
root: {
'& .MuiInputLabel-outlined.Mui-focused': {
color: 'red',
},
},
},
},
MuiPickersTextField: {
defaultProps: {
variant: 'outlined',
},
styleOverrides: {
root: {
'& .MuiInputLabel-outlined.Mui-focused': {
color: 'red',
},
},
},
},
},
});
```

If you are using the theme to customize `MuiInput`, `MuiOutlinedInput` or `MuiFilledInput`,
you need to pass the same config to `MuiPickersInput`, `MuiPickersOutlinedInput` or `MuiPickersFilledInput`:

```js
const theme = createTheme({
components: {
// Replace with `MuiOutlinedInput` or `MuiFilledInput` if needed
MuiInput: {
defaultProps: {
margin: 'dense',
},
styleOverrides: {
root: {
color: 'red',
},
},
},
// Replace with `MuiPickersOutlinedInput` or `MuiPickersFilledInput` if needed
MuiPickersInput: {
defaultProps: {
margin: 'dense',
},
styleOverrides: {
root: {
color: 'red',
},
},
},
},
});
```

If you are using the theme to customize `MuiInputBase`,
you need to pass the same config to `MuiPickersInputBase`:

```js
const theme = createTheme({
components: {
MuiInputBase: {
defaultProps: {
margin: 'dense',
},
styleOverrides: {
root: {
color: 'red',
},
},
},
MuiPickersInputBase: {
defaultProps: {
margin: 'dense',
},
styleOverrides: {
root: {
color: 'red',
},
},
},
},
});
```

## Deprecated parameters used on translation keys functions

If you are using a Picker with controlled value and views and you need to compose some of the following translation keys: `openDatePickerDialogue`, `openTimePickerDialogue`, or `clockLabelText`, after upgrading to v8 you only need to pass the formatted value and the time view (only for `clockLabelText`):
Expand Down

0 comments on commit b50ada1

Please sign in to comment.