Skip to content

Commit

Permalink
[docs] Unify the wording of the pickers slots breaking changes (#16036)
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle authored Dec 30, 2024
1 parent e283172 commit 2cc9bc8
Showing 1 changed file with 26 additions and 13 deletions.
39 changes: 26 additions & 13 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,8 @@ This change causes a few breaking changes:
);
```

- The component passed to the `layout` slot no longer receives the `value` prop, instead you can use the `usePickerContext` hook:
- The component passed to the `layout` slot no longer receives the `value` prop.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -377,7 +378,8 @@ This change causes a few breaking changes:
+const { value } = usePickerContext();
```

- The component passed to the `layout` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
- The component passed to the `layout` slot no longer receives the `disabled` and `readOnly` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -389,7 +391,8 @@ This change causes a few breaking changes:
+const { readOnly } = usePickerContext();
```

- The component passed to the `layout` slot no longer receives the `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
- The component passed to the `layout` slot no longer receives the `isRtl` prop.
You can use the `useRtl` hook from `@mui/system` instead:

```diff
+import { useRtl } from '@mui/system/RtlProvider';
Expand All @@ -398,7 +401,8 @@ This change causes a few breaking changes:
+ const isRtl = useRtl();
```

- The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props, instead you can use the `usePickerContext` hook:
- The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -411,7 +415,8 @@ This change causes a few breaking changes:
+const isLandscape = orientation === 'landscape';
```

- The component passed to the `layout` slot no longer receives the `wrapperVariant` prop, instead you can use the `usePickerContext` hook:
- The component passed to the `layout` slot no longer receives the `wrapperVariant` prop.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -420,7 +425,8 @@ This change causes a few breaking changes:
+const { variant } = usePickerContext();
```

- The component passed to the `layout` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
- The component passed to the `layout` slot no longer receives the `view`, `views` and `onViewChange` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand Down Expand Up @@ -497,7 +503,8 @@ This change causes a few breaking changes:

### Slot: `toolbar`

- The component passed to the `toolbar` slot no longer receives the `value` prop, instead you can use the `usePickerContext` hook:
- The component passed to the `toolbar` slot no longer receives the `value` prop.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -510,7 +517,8 @@ This change causes a few breaking changes:
+const { value } = usePickerContext();
```

- The component passed to the `toolbar` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
- The component passed to the `toolbar` slot no longer receives the `disabled` and `readOnly` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -522,7 +530,8 @@ This change causes a few breaking changes:
+const { readOnly } = usePickerContext();
```

- The component passed to the `toolbar` slot no longer receives the `isLandscape` prop, instead you can use the `usePickerContext` hook:
- The component passed to the `toolbar` slot no longer receives the `isLandscape` prop.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -532,7 +541,8 @@ This change causes a few breaking changes:
+const isLandscape = orientation === 'landscape';
```

- The component passed to the `toolbar` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
- The component passed to the `toolbar` slot no longer receives the `view`, `views` and `onViewChange` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand Down Expand Up @@ -568,7 +578,8 @@ This change causes a few breaking changes:

### Slot: `tabs`

- The component passed to the `tabs` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
- The component passed to the `tabs` slot no longer receives the `view`, `views` and `onViewChange` props.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand Down Expand Up @@ -611,7 +622,8 @@ This change causes a few breaking changes:

### Slot: `shortcuts`

- The component passed to the `shortcuts` slot no longer receives the `isLandscape` prop, instead you can use the `usePickerContext` hook:
- The component passed to the `shortcuts` slot no longer receives the `isLandscape` prop.
You can use the `usePickerContext` hook instead:

```diff
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
Expand All @@ -636,7 +648,8 @@ This change causes a few breaking changes:
The only difference is that `usePickerActionsContext` only contains variables with stable references that won't cause a re-render of your component.
:::

- The component passed to the `shortcuts` slot no longer receives the `isValid` prop, instead you can use the `useIsValidValue` hook:
- The component passed to the `shortcuts` slot no longer receives the `isValid` prop.
You can use the `useIsValidValue` hook instead:

```diff
+import { useIsValidValue } from '@mui/x-date-pickers/hooks';
Expand Down

0 comments on commit 2cc9bc8

Please sign in to comment.