From 1441e5bece6e9ebebf5f5747fcfa886f713d0364 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:11:21 -0800 Subject: [PATCH 1/9] base ui --- .../components/click-away-listener/click-away-listener.md | 2 +- docs/data/material/components/no-ssr/no-ssr.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- .../material/components/textarea-autosize/textarea-autosize.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index fcc8d5e363ac01..7618b34439ab53 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -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. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index c003737331abaf..dec36823a9d88f 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -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. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 06c3885f4169cb..2f66f2159fd063 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -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. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index dd404a2f340e7e..d4b51a9a2da082 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -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. ::: From 07ef4fa53ae6e08bbc5f3ff36821324e952d88ad Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:16:19 -0800 Subject: [PATCH 2/9] deprecated chips --- docs/data/material/pages.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index d4758f3e8a7600..3702eb89503901 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -117,14 +117,14 @@ 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' }, ], From 76216501dbc79dec4970e4d7ee1418018c2c951d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:19:00 -0800 Subject: [PATCH 3/9] text field copy --- docs/data/material/components/text-fields/text-fields.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 8fc5d00dc42fa1..942d8f69564e44 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -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"}} From c3f2658f36b86e28702ed3b6645a27fd10d1cb9f Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:20:29 -0800 Subject: [PATCH 4/9] popper cal link --- docs/data/material/components/popper/popper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index f7101d8df762ba..4569396aa7ca5f 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -20,7 +20,7 @@ Some important features of the `Popper` 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). + 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}} From 666346b6034699b61899d61cbd8b03a61bc0e258 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:22:36 -0800 Subject: [PATCH 5/9] popper doc --- docs/data/material/components/popper/popper.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index 4569396aa7ca5f..27d19cf22dc53d 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -11,21 +11,21 @@ githubSource: packages/mui-material/src/Popper

A Popper can be used to display some content on top of another. It's an alternative to react-popper.

-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. +- 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"}} From b257f73f1f82c3071180dd7c214f1560fb738d26 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:23:25 -0800 Subject: [PATCH 6/9] shadow dom --- docs/data/material/customization/shadow-dom/shadow-dom.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/customization/shadow-dom/shadow-dom.md b/docs/data/material/customization/shadow-dom/shadow-dom.md index dbb2c931f91654..7637a628bdcffa 100644 --- a/docs/data/material/customization/shadow-dom/shadow-dom.md +++ b/docs/data/material/customization/shadow-dom/shadow-dom.md @@ -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: From 765e61e8e8f25152a59df4158ecdc71812cfcb1b Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:23:50 -0800 Subject: [PATCH 7/9] interoperability --- .../material/integrations/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md index 1676780993c7f4..75f9285e1af9cc 100644 --- a/docs/data/material/integrations/interoperability/interoperability.md +++ b/docs/data/material/integrations/interoperability/interoperability.md @@ -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, From 4541e30fe280c5dfe74bfc52b2f715d52421dbb3 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:25:11 -0800 Subject: [PATCH 8/9] prettier --- docs/data/material/pages.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 3702eb89503901..bcbfcebc05f48f 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -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', deprecated: true }, + { + 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', deprecated: true }, { pathname: '/material-ui/react-popover' }, { pathname: '/material-ui/react-popper' }, { pathname: '/material-ui/react-portal', deprecated: true }, - { pathname: '/material-ui/react-textarea-autosize', title: 'Textarea Autosize', 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' }, ], From 9cf892f0cafc902f0ad6eed39f70d9f14da7cfe9 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 27 Nov 2024 13:35:48 -0800 Subject: [PATCH 9/9] nbsps --- docs/data/material/components/popper/popper.md | 4 ++-- docs/data/material/components/text-fields/text-fields.md | 2 +- docs/data/material/customization/shadow-dom/shadow-dom.md | 2 +- .../integrations/interoperability/interoperability.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index 27d19cf22dc53d..24c9dcb54c8423 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -15,12 +15,12 @@ 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. -- Its child element is a [Base UI Portal](/base-ui/react-portal/) on 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 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 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). + 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}} diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 942d8f69564e44..2d5c92184dd26a 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -44,7 +44,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 [Base UI Textarea Autosize](/base-ui/react-textarea-autosize/) element. +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. diff --git a/docs/data/material/customization/shadow-dom/shadow-dom.md b/docs/data/material/customization/shadow-dom/shadow-dom.md index 7637a628bdcffa..fc19540b8b0f9b 100644 --- a/docs/data/material/customization/shadow-dom/shadow-dom.md +++ b/docs/data/material/customization/shadow-dom/shadow-dom.md @@ -32,7 +32,7 @@ ReactDOM.createRoot(shadowRootElement).render( ### 2. Theme -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. +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: diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md index 75f9285e1af9cc..56c22bfc22d13c 100644 --- a/docs/data/material/integrations/interoperability/interoperability.md +++ b/docs/data/material/integrations/interoperability/interoperability.md @@ -376,7 +376,7 @@ const CustomizedSlider = styled(Slider)( ### Portals -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. +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,