Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Update links and sidebar nav for Base UI components in Material UI #44581

Merged
merged 11 commits into from
Dec 3, 2024
Merged

[docs] Update links and sidebar nav for Base UI components in Material UI #44581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1441e5b
base ui
samuelsycamore Nov 27, 2024
07ef4fa
deprecated chips
samuelsycamore Nov 27, 2024
7621650
text field copy
samuelsycamore Nov 27, 2024
c3f2658
popper cal link
samuelsycamore Nov 27, 2024
666346b
popper doc
samuelsycamore Nov 27, 2024
b257f73
shadow dom
samuelsycamore Nov 27, 2024
765e61e
interoperability
samuelsycamore Nov 27, 2024
4541e30
prettier
samuelsycamore Nov 27, 2024
9cf892f
nbsps
samuelsycamore Nov 27, 2024
98b5ace
Merge branch 'master' into revise-base-pages
samuelsycamore Nov 28, 2024
bb3ef91
Merge branch 'master' into revise-base-pages
samuelsycamore Nov 30, 2024
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/data/material/components/click-away-listener/click-away-listener.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
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.

Check warning on line 18 in docs/data/material/components/click-away-listener/click-away-listener.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/components/click-away-listener/click-away-listener.md", "range": {"start": {"line": 18, "column": 79}}}, "severity": "WARNING"}
:::
2 changes: 1 addition & 1 deletion docs/data/material/components/no-ssr/no-ssr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
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.

Check warning on line 17 in docs/data/material/components/no-ssr/no-ssr.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/components/no-ssr/no-ssr.md", "range": {"start": {"line": 17, "column": 79}}}, "severity": "WARNING"}
:::
12 changes: 6 additions & 6 deletions docs/data/material/components/popper/popper.md
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
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.

Check warning on line 18 in docs/data/material/components/portal/portal.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/components/portal/portal.md", "range": {"start": {"line": 18, "column": 79}}}, "severity": "WARNING"}
:::
4 changes: 2 additions & 2 deletions docs/data/material/components/text-fields/text-fields.md
View file
Open in desktop
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.
Copy link
Member

Choose a reason for hiding this comment

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

off-topic: I find this convention weird. As a user I always prefer to read the actual component name:

  • "TextField" vs "Text Field"
  • "TextareaAutosize" vs "Textarea Autosize"
  • "ClickAwayListener" vs "Click-Away Listener"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Interesting. This was a style convention we adopted a few years ago to try to help improve readability as I recall. But if it's not actually helping then maybe we should consider re-evaluating it as an org.

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
2 changes: 1 addition & 1 deletion docs/data/material/components/textarea-autosize/textarea-autosize.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@
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.

Check warning on line 18 in docs/data/material/components/textarea-autosize/textarea-autosize.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.Will] Avoid using 'will'.

Raw Output:
{"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/components/textarea-autosize/textarea-autosize.md", "range": {"start": {"line": 18, "column": 79}}}, "severity": "WARNING"}
:::
2 changes: 1 addition & 1 deletion docs/data/material/customization/shadow-dom/shadow-dom.md
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion docs/data/material/integrations/interoperability/interoperability.md
View file
Open in desktop
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
View file
Open in desktop
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
Loading