Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
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
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Docs

This is the website of the company (MUI), the documentation of Material UI, MUI Base, MUI System, and Joy UI.
This is the website of the company MUI and the documentation for Material UI.

Check warning on line 3 in docs/README.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [MUI.NoCompanyName] We avoid referencing the company name 'MUI and'. Instead you can reference a product or the team. Raw Output: {"message": "[MUI.NoCompanyName] We avoid referencing the company name 'MUI and'. Instead you can reference a product or the team.", "location": {"path": "docs/README.md", "range": {"start": {"line": 3, "column": 36}}}, "severity": "WARNING"}

To start the docs site in development mode, from the project root, run:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/popper/popper.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Some important features of the Popper component:

- 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/docs/v2/)) for perfect positioning.
- 💄 It's an alternative API to react-popper. It aims for simplicity.
- Its child element is a [MUI Base Portal](https://v6.mui.com/base-ui/react-portal/) on the body of the document to avoid rendering problems.
- Its child element is a [Portal](/material-ui/react-portal/) on the body of the document to avoid rendering problems.
You can disable this behavior with `disablePortal`.
- The scroll isn't blocked like with the [Popover](/material-ui/react-popover/) component.
The placement of the popper updates with the available area in the viewport.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/portal/portal.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ githubLabel: 'scope: portal'

Portal is a utility component built around [React's `createPortal()` API](https://react.dev/reference/react-dom/createPortal).
It gives you the functionality of `createPortal()` in a convenient component form.
It's used internally by the [Modal](https://v6.mui.com/base-ui/react-modal/) and [Popper](https://v6.mui.com/base-ui/react-popper/) components.
It's used internally by the [Modal](/material-ui/react-modal/) and [Popper](/material-ui/react-popper/) components.

:::info
According to [the React docs](https://react.dev/reference/react-dom/createPortal), portals are useful when "you need the child element to visually 'break out' of its container"—for instance, modals and tooltips, which need to exist outside of the normal flow of the document.
Expand Down
6 changes: 2 additions & 4 deletions docs/data/material/components/text-fields/text-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ The `helperText` prop can then be used to provide feedback to the user about the

## Multiline

The `multiline` prop transforms the Text Field into a [MUI Base Textarea Autosize](https://v6.mui.com/base-ui/react-textarea-autosize/) element.
The `multiline` prop transforms the Text Field into a [Textarea Autosize](/material-ui/react-textarea-autosize/) element.
Unless the `rows` prop is set, the height of the text field dynamically matches its content.
You can use the `minRows` and `maxRows` props to bound it.

Expand Down Expand Up @@ -299,9 +299,7 @@ We do not recommend using `type="number"` with a Text Field due to potential usa

:::

If you need a text field with number validation, you can use MUI Base's [Number Input](https://mui.com/base-ui/react-number-input/) instead.

You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/19154) to track the progress of introducing the Number Input component to Material UI.
If you need a text field with number validation, you can use [Number Field](/material-ui/react-number-field/) instead.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good that @siriwatknp built this page :)


### Helper text

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/shadow-dom/shadow-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ ReactDOM.createRoot(shadowRootElement).render(

### 2. Theme

Material UI components like Menu, Dialog, Popover, and others use the [MUI Base Portal](https://v6.mui.com/base-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy.
Material UI components like Menu, Dialog, Popover, and others use the [Portal](/material-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy.
By default, this container is `document.body`.
But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well:

Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/discover-more/backers/backers.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<p class="description">Support the development of the open-source projects of the MUI organization through crowdfunding.</p>

Material UI, MUI Base, MUI System, and Joy UI are crowd-funded open-source projects, licensed under the permissive MIT license.
Material UI is a crowd-funded open-source project, licensed under the permissive MIT license.
Sponsorship increases the rate of bug fixes, documentation improvements, and feature development.

## Diamond sponsors
Expand Down Expand Up @@ -82,7 +82,7 @@ via [Open Collective](https://opencollective.com/mui-org)

### Why is Material UI a "crowd-funded open-source project"?

Material UI (as well as MUI Base, MUI System, and Joy UI) is open-source to give users great freedom in how they use the software and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use cases.
Material UI is open-source to give users great freedom in how they use the software and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use cases.
To ensure that these open-source libraries can stand the test of time for our users, they need to be well-directed and financially sustainable.

The absolute best way to support the MUI organization to work on its libraries' ongoing development efforts is to become a sponsor.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/getting-started/faq/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ page](/material-ui/customization/theming/) to learn about theme customization.

## Why does component X require a DOM node in a prop instead of a ref object?

Components like the [Portal](https://v6.mui.com/base-ui/react-portal/components-api/) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
Components like the [Portal](/material-ui/react-portal/components-api/) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
It seems convenient to simply pass a ref object in those props and let Material UI access the current value.

This works in a simple scenario:
Expand Down
8 changes: 0 additions & 8 deletions docs/data/material/getting-started/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,6 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
You can count on the community's support for years to come (for example [Stack Overflow](https://trends.stackoverflow.co/?tags=material-ui)).

### Material UI vs. MUI Base

Material UI and MUI Base feature many of the same UI components, but MUI Base comes without any default styles or styling solutions.

Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)).

MUI Base, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use MUI Base components and hooks for its foundational structure.

## Start now

Get started with Material UI today through some of these useful resources:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ const CustomizedSlider = styled(Slider)(

### Portals

The [MUI Base Portal](https://v6.mui.com/base-ui/react-portal/) component provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
The [Portal](/material-ui/react-portal/) component provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied.

For example, if you attempt to style the `tooltip` generated by the [Tooltip](/material-ui/react-tooltip/) component,
Expand Down
8 changes: 0 additions & 8 deletions docs/data/system/getting-started/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ title: Overview

MUI System is a set of CSS utilities to help you build custom designs more efficiently.
It's used internally by libraries like [Material UI](/material-ui/), [Joy UI](/joy-ui/getting-started/).
It can also be used to style MUI Base components.

MUI System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop.
This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components.
Expand All @@ -23,10 +22,3 @@ Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/).
- **Write the CSS you already know:** the `sx` prop features a superset of CSS, so it's intuitive to pick up and start working with right away if you're comfortable with CSS.
- **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With MUI System, it's all in one place.
- **Forget unnecessary custom names:** if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System.

## MUI System vs. MUI Base

MUI Base is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as our other component libraries like Material UI and Joy UI).

MUI Base is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with MUI Base or any third-party components.
See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System.
13 changes: 0 additions & 13 deletions docs/src/components/productMaterial/MaterialEnd.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Typography from '@mui/material/Typography';
import CompareIcon from '@mui/icons-material/Compare';
import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
import { GlowingIconContainer } from '@mui/docs/InfoCard';
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
Expand Down Expand Up @@ -84,18 +83,6 @@ export default function MaterialEnd({ noFaq }: MaterialEndProps) {
</Grid>
<Grid size={{ xs: 12, sm: 6 }}>
<List sx={{ '& > li': { alignItems: 'flex-start' } }}>
<ListItem sx={{ p: 0, mb: 4, gap: 2.5 }}>
<GlowingIconContainer icon={<CompareIcon color="primary" />} />
<div>
<Typography gutterBottom sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
Material UI vs. MUI Base
</Typography>
<Typography>
Material UI implements Google&apos;s Material Design whereas MUI Base features
many of the same components, but without the Material Design implementation.
</Typography>
</div>
</ListItem>
<ListItem sx={{ p: 0, gap: 2.5 }}>
<GlowingIconContainer icon={<StyleRoundedIcon color="primary" />} />
<div>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/showcase/NotificationCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function NotificationCard() {
Incredible discoveries
</Typography>
<Typography sx={{ fontSize: 14, color: 'text.secondary' }}>
It&apos;s about Material UI & MUI Base...
It&apos;s about Material UI...
</Typography>
</div>
<Chip
Expand Down
Loading