Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Sam's initial review
Co-authored-by: Sam Sycamore <[email protected]>
Signed-off-by: Diego Andai <[email protected]>
  • Loading branch information
DiegoAndai and mapache-salvaje authored Mar 8, 2024
commit c834a68c5faf7be14cdab1335a40f15d3328ea9b
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ If you need to run a specific codemod, those are also linked below.

:::

## Overarching deprecated APIs
## Package-wide deprecated APIs

### Inner element overrides

The `slots` and `slotProps` API is in process of being standardized. The analogous APIs: `components`, `componentsProps`, `<SlotName>Component`, and `<SlotName>Props` are going to be deprecated and eventually removed.
This improves the developer experience through consistency, predictability, and reducing cognitive load.
The `slots` and `slotProps` APIs are in the process of being standardized.
The analogous APIs—`components`, `componentsProps`, `<SlotName>Component`, and `<SlotName>Props`—are going to be deprecated and eventually removed.
This improves the developer experience through consistency, predictability, and reduced cognitive load.

### Composed CSS classes

Expand Down
52 changes: 26 additions & 26 deletions docs/pages/blog/material-ui-early-2024-standardization.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
---
title: Material UI early 2024 API standardization
description: Read about the standardization of Material UI API happening in Q1 of 2024
date: 2024-02-19T00:00:00.000Z
description: We're standardizing two key areas of the Material UI API to reduce complexity and cognitive overhead. Read on to learn what's changing.
date: 2024-03-11T00:00:00.000Z
authors: ['diegoandai']
tags: ['Material UI', 'Product']
card: true
---

The MUI Core team is working on two initiatives to standardize the Material UI API.
This aims to provide a more consistent developer experience for the community.
The first API being standardized is the one used for inner element overrides, and the second one is the component CSS classes API.
The MUI Core team is working on two initiatives to standardize the Material UI API: The first applies to overriding inner elements, and the second applies to component CSS classes.
In both cases, the purpose is to provide a more consistent developer experience for the community.

Let's explore how these changes are taking shape:

## Inner element overrides

Modifying the inner elements of a component to customize its behavior or look is an everyday use case.
For example, you might want to modify the `Slider`'s thumb element to grow in size when it's dragged:
Because Material UI components often contain multiple DOM nodes, it's common to need to modify the structure, behavior, and style of inner elements.
For example, you might want to modify the Slider's thumb element to grow in size when dragged:

<iframe src="https://codesandbox.io/embed/nw34ry?view=Editor+%2B+Preview&module=%2Fsrc%2FDemo.tsx&hidenavigation=1"
style="width:100%; height: 200px; border:0; border-radius: 4px; overflow:hidden;"
Expand All @@ -24,24 +25,23 @@ For example, you might want to modify the `Slider`'s thumb element to grow in si
></iframe>

You can achieve this by providing custom components through the `slots` prop.
The demo above provides a custom thumb component that uses the `Slider`'s internal state `dragging` and `focusedThumbIndex` to change its appearance.
[Open the sandbox](https://codesandbox.io/p/sandbox/blog-material-ui-early-2024-deprecations-slider-slots-example-nw34ry?file=%2Fsrc%2FDemo.tsx) to see the implementation.
The demo above provides a custom thumb component that uses the Slider's internal `dragging` and `focusedThumbIndex` states to change its appearance.
[Open the CodeSandbox](https://codesandbox.io/p/sandbox/blog-material-ui-early-2024-deprecations-slider-slots-example-nw34ry?file=%2Fsrc%2FDemo.tsx) to see the implementation.

The problem is that this slot pattern exposed through the `slots` prop needs to be standardized.
The problem is that this slot pattern exposed through the `slots` prop is not consistent across the library.
Some components implement the `slots` prop, but others have a `components` prop, which works almost exactly as the `slots` prop.
Other components have props named `<SlotName>Component` for the same use, for example, the `Accordion`'s `TransitionComponent` prop.
Other components have props named `<SlotName>Component` for more specific use cases—for example, the Accordion features a `TransitionComponent` prop for implementing custom transitions.

The `slotProps` prop, used to provide custom props to inner elements, has the same problem.
Some components have the `slotsProps` prop, others have a `componentsProps` prop, and others have props named `<SlotName>Props`.
The same inconsistencies are found with the `slotProps` prop, which is used to provide custom props to inner elements.
Some components have the `slotsProps` prop; others have a `componentsProps` prop; and still others have props named `<SlotName>Props`.

This lack of consistency adds cognitive load to developers.
It also adds complexity for maintainers.
The `slots` and `slotProps` API will be standardized to solve these issues, and the analogous APIs will be deprecated and eventually removed.
This lack of consistency leads to unnecessary complexity for both developers and maintainers.
To resolve this, the `slots` and `slotProps` API will be standardized across all components, and the analogous APIs will be deprecated and eventually removed.

## Component CSS classes

One way to customize the look of components is to target their CSS classes.
For example, you might want to modify the `Chip` component's primary color and have it be different when it's clickable.
The most common way to customize a component's look and feel is to target its CSS classes.
For example, you might want to customize a Chip's primary color and set it to a different color when it's clickable:

<iframe src="https://codesandbox.io/embed/d7xqr6?view=Editor+%2B+Preview&module=%2Fsrc%2FDemo.tsx&hidenavigation=1"
style="width:100%; height: 200px; border:0; border-radius: 4px; overflow:hidden;"
Expand All @@ -50,21 +50,21 @@ For example, you might want to modify the `Chip` component's primary color and h
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

You can do this by targeting the `chipClasses.clickable` and `chipClasses.colorPrimary` accordingly.
The demo above targets `.MuiChip-colorPrimary` and `.MuiChip-clickable.MuiChip-colorPrimary` to achieve the result.
[Open the sandbox](https://codesandbox.io/p/sandbox/blog-material-ui-early-2024-deprecations-chip-classes-example-d7xqr6?file=%2Fsrc%2FDemo.tsx) to see the implementation.
You can do this by targeting `chipClasses.colorPrimary` and `chipClasses.clickable`, respectively.
The demo above targets `.MuiChip-colorPrimary` and `.MuiChip-clickable.MuiChip-colorPrimary` to achieve this result.
[Open the CodeSandbox](https://codesandbox.io/p/sandbox/blog-material-ui-early-2024-deprecations-chip-classes-example-d7xqr6?file=%2Fsrc%2FDemo.tsx) to see the implementation.

The problem is that you could also use the `chipclasses.clickableColorPrimary` composed class, which composes the clickable and color atomic classes.
The problem is that you could also use the `chipClasses.clickableColorPrimary` composed class, which composes the atomic clickable and color classes.
These composed classes bloat the API without adding significant improvements.
For example, this pattern adds 26 CSS classes to the `Chip` component.

The composed classes also reduce the predictability of the CSS classes API, as the compose order and which props get composed are arbitrary decisions.
This adds cognitive load to the developers and complexity for maintainers.
The composed CSS classes will be deprecated and eventually removed in favor of atomic class alternatives.
This adds unnecessary cognitive overhead for developers as well as significant complexity for maintainers.
Because of these issues, composed CSS classes will be deprecated and eventually removed in favor of atomic class alternatives.

## Standardization process

This initiative aims to improve the developer experience for the Material UI community.
To provide the smoothest migration from these APIs, they will be deprecated first and removed at a future date, likely the end of 2024.
A [migration guide](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) and [codemods](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#deprecations) will be released alongside each deprecation.
As always, please [open a GitHub issue](https://github.com/mui/material-ui/issues/new/choose) if anything is not working as expected.
With each deprecation, we'll update the [migration guide](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) and provide [codemods](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#deprecations) to simplify the process.
As always, please [open a GitHub issue](https://github.com/mui/material-ui/issues/new/choose) if you encounter any unexpected behavior with the standardized APIs.