Skip to content

Commit

Permalink
[docs] Update links and sidebar nav for Base UI components in Materia…
Browse files Browse the repository at this point in the history
…l UI (#44581)
  • Loading branch information
samuelsycamore authored Dec 3, 2024
1 parent 675561d commit ffbd703
Show file tree
Hide file tree
Showing 9 changed files with 26 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ githubLabel: 'component: ClickAwayListener'
Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the Base UI docs for demos and details on usage.

Click-Away Listener is a part of the standalone [Base UI](/base-ui/) component library.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
:::
2 changes: 1 addition & 1 deletion docs/data/material/components/no-ssr/no-ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@ components: NoSsr
Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the Base UI docs for demos and details on usage.

No-SSR is a part of the standalone [Base UI](/base-ui/) component library.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
:::
12 changes: 6 additions & 6 deletions docs/data/material/components/popper/popper.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ githubSource: packages/mui-material/src/Popper

<p class="description">A Popper can be used to display some content on top of another. It's an alternative to react-popper.</p>

Some important features of the `Popper` component:
Some important features of the Popper component:

- 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/)) for perfect positioning.
- 💄 It's an alternative API to react-popper. It aims for simplicity.
- The children is [`Portal`](/material-ui/react-portal/) to the body of the document to avoid rendering problems.
- Its child element is a [Base UI Portal](/base-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 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.
- Clicking away does not hide the `Popper` component.
If you need this behavior, you can use [`ClickAwayListener`](/material-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition).
- Clicking away does not hide the Popper component.
If you need this behavior, you can use the [Base UI Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition).
- The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.

{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}

## Basic popper
## Basic Popper

{{"demo": "SimplePopper.js"}}

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,5 +15,5 @@ githubLabel: 'component: Portal'
Please refer to the [Portal](/base-ui/react-portal/) component page in the Base UI docs for demos and details on usage.

Portal is a part of the standalone [Base UI](/base-ui/) component library.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
:::
4 changes: 2 additions & 2 deletions docs/data/material/components/text-fields/text-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ 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 [TextareaAutosize](/material-ui/react-textarea-autosize/) element.
Unless the `rows` prop is set, the height of the text field dynamically matches its content (using [TextareaAutosize](/material-ui/react-textarea-autosize/)).
The `multiline` prop transforms the Text Field into a [Base UI Textarea Autosize](/base-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.

{{"demo": "MultilineTextFields.js"}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ githubLabel: 'component: TextareaAutosize'
Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage.

Textarea Autosize is a part of the standalone [Base UI](/base-ui/) component library.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version after Base UI gets a stable release.
:::
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 [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy.
Material UI components like Menu, Dialog, Popover, and others use the [Base UI Portal](/base-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
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ const CustomizedSlider = styled(Slider)(

### Portals

The [Portal](/material-ui/react-portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
The [Base UI Portal](/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.
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
16 changes: 12 additions & 4 deletions docs/data/material/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,14 +117,22 @@ const pages: MuiPage[] = [
pathname: '/material-ui/components/utils',
subheader: 'utils',
children: [
{ pathname: '/material-ui/react-click-away-listener', title: 'Click-Away Listener' },
{
pathname: '/material-ui/react-click-away-listener',
title: 'Click-Away Listener',
deprecated: true,
},
{ pathname: '/material-ui/react-css-baseline', title: 'CSS Baseline' },
{ pathname: '/material-ui/react-modal' },
{ pathname: '/material-ui/react-no-ssr', title: 'No SSR' },
{ pathname: '/material-ui/react-no-ssr', title: 'No SSR', deprecated: true },
{ pathname: '/material-ui/react-popover' },
{ pathname: '/material-ui/react-popper' },
{ pathname: '/material-ui/react-portal' },
{ pathname: '/material-ui/react-textarea-autosize', title: 'Textarea Autosize' },
{ pathname: '/material-ui/react-portal', deprecated: true },
{
pathname: '/material-ui/react-textarea-autosize',
title: 'Textarea Autosize',
deprecated: true,
},
{ pathname: '/material-ui/transitions' },
{ pathname: '/material-ui/react-use-media-query', title: 'useMediaQuery' },
],
Expand Down

0 comments on commit ffbd703

Please sign in to comment.