From 4921cb513d570c126073cd93e5d53bf173c072b0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 6 Apr 2023 10:37:36 +0200 Subject: [PATCH] [core] Replace MUI Base with Base UI (#36716) --- CHANGELOG.md | 44 +++++++++---------- README.md | 10 ++--- docs/data/base/components/button/button-pt.md | 2 +- docs/data/base/components/button/button-zh.md | 2 +- docs/data/base/components/button/button.md | 2 +- docs/data/base/components/select/select-pt.md | 2 +- docs/data/base/components/select/select-zh.md | 2 +- docs/data/base/components/select/select.md | 2 +- .../customization/customization-pt.md | 6 +-- .../customization/customization-zh.md | 6 +-- .../customization/customization.md | 12 ++--- .../installation/installation-pt.md | 2 +- .../installation/installation-zh.md | 2 +- .../installation/installation.md | 4 +- .../getting-started/overview/overview-pt.md | 28 ++++++------ .../getting-started/overview/overview-zh.md | 28 ++++++------ .../base/getting-started/overview/overview.md | 28 ++++++------ .../base/getting-started/usage/usage-pt.md | 6 +-- .../base/getting-started/usage/usage-zh.md | 6 +-- docs/data/base/getting-started/usage/usage.md | 8 ++-- .../working-with-tailwind-css-pt.md | 14 +++--- .../working-with-tailwind-css-zh.md | 14 +++--- .../working-with-tailwind-css.md | 14 +++--- .../joy/components/select/SelectFieldDemo.js | 2 +- .../joy/components/select/SelectFieldDemo.tsx | 2 +- docs/data/joy/components/textarea/textarea.md | 2 +- .../getting-started/overview/overview-pt.md | 2 +- .../getting-started/overview/overview-zh.md | 2 +- .../joy/getting-started/overview/overview.md | 2 +- .../click-away-listener.md | 4 +- .../data/material/components/no-ssr/no-ssr.md | 4 +- .../data/material/components/portal/portal.md | 4 +- .../textarea-autosize/textarea-autosize.md | 4 +- .../getting-started/overview/overview-pt.md | 6 +-- .../getting-started/overview/overview-zh.md | 6 +-- .../getting-started/overview/overview.md | 6 +-- .../understand-mui-packages-pt.md | 6 +-- .../understand-mui-packages-zh.md | 6 +-- .../understand-mui-packages.md | 6 +-- .../getting-started/overview/overview-pt.md | 8 ++-- .../getting-started/overview/overview-zh.md | 8 ++-- .../getting-started/overview/overview.md | 8 ++-- docs/notifications.json | 4 +- docs/pages/blog/2021.md | 4 +- docs/pages/blog/docs-restructure-2022.md | 8 ++-- docs/pages/blog/introducing-mui-base.md | 38 ++++++++-------- .../blog/making-customizable-components.md | 2 +- docs/pages/blog/mui-product-comparison.md | 22 +++++----- docs/pages/blog/mui-x-v6.md | 2 +- .../components/header/HeaderNavDropdown.tsx | 2 +- docs/src/components/pricing/PricingTable.tsx | 12 ++--- docs/src/modules/components/AppLayoutDocs.js | 2 +- .../AppLayoutDocsWithoutAppFrame.js | 2 +- docs/src/modules/components/AppNavDrawer.js | 2 +- docs/src/modules/components/AppSearch.js | 2 +- docs/src/modules/components/Demo.js | 2 +- .../modules/components/MuiProductSelector.tsx | 2 +- .../pages/careers/accessibility-engineer.md | 2 +- docs/src/pages/careers/design-engineer.md | 2 +- docs/src/pages/careers/designer.md | 2 +- docs/src/pages/careers/developer-advocate.md | 2 +- docs/src/pages/careers/react-engineer-core.md | 2 +- docs/src/pages/careers/react-engineer-x.md | 2 +- .../src/pages/careers/react-tech-lead-core.md | 2 +- .../pages/careers/react-tech-lead-x-grid.md | 2 +- docs/src/pages/careers/senior-designer.md | 2 +- examples/base-cra-tailwind-ts/README.md | 4 +- examples/base-cra-ts/README.md | 4 +- examples/base-cra-ts/src/App.tsx | 2 +- packages/markdown/parseMarkdown.js | 2 +- .../src/ModalUnstyled/ModalUnstyled.tsx | 2 +- .../MultiSelectUnstyled.tsx | 2 +- packages/mui-base/src/utils/mergeSlotProps.ts | 2 +- packages/mui-codemod/README.md | 4 +- .../v5.0.0/theme-spacing.test/large-actual.js | 2 +- .../theme-spacing.test/large-expected.js | 2 +- packages/mui-joy/src/utils/useSlot.ts | 4 +- .../src/OverridableComponent.d.ts | 2 +- packages/mui-types/index.d.ts | 2 +- scripts/generateCodeowners.mjs | 2 +- 80 files changed, 246 insertions(+), 246 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f4eb0e9bdce5d6..c72c0a74139284 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -190,12 +190,12 @@ _Mar 14, 2023_ A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨: -- @michaldudak added an option for [disabling the generation](https://mui.com/base/getting-started/customization/#disabling-default-css-classes) of the default classes in MUI Base (#35963) +- @michaldudak added an option for [disabling the generation](https://mui.com/base/getting-started/customization/#disabling-default-css-classes) of the default classes in Base UI (#35963) - other 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.13` -- ​[core] Bump MUI Base's version in Material UI (#36492) @hbjORbj +- ​[core] Bump Base UI's version in Material UI (#36492) @hbjORbj - ​[material] Export `shouldSkipGeneratingVar` from Material UI (#36489) @siriwatknp - ​[Typography] Apply font properties to typography inherit variant (#33621) @oyar99 @@ -345,7 +345,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som - ​[docs] Add instructions for deploying docs without a release (#36301) @cherniavskii - ​[docs] Fix 301 redirections on the docs @oliviertassinari - ​[docs] Update MUI X banner to reflect stable release (#36354) @MBilalShafi -- ​[docs] Clarify the future plan for integrating MUI Base in Material UI (#36365) @mnajdova +- ​[docs] Clarify the future plan for integrating Base UI in Material UI (#36365) @mnajdova - ​[docs] Improve visual look of loose lists (#36190) @oliviertassinari - ​[docs] Fix @mui/styles example links (#36331) @oliviertassinari - ​[docs][joy] Build TS versions for List component demos (#36382) @sai6855 @@ -375,7 +375,7 @@ _Feb 27, 2023_ A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨: -- 📚 added API documentation for the slots in MUI Base and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/#slots) +- 📚 added API documentation for the slots in Base UI and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/#slots) - other 🐛 bug fixes and 📚 documentation improvements. ### `@mui/material@5.11.11` @@ -612,7 +612,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[docs] Improve inline preview's information (#35974) @oliviertassinari - ​[docs] Fix wrong v5 migration instructions (#36022) @oliviertassinari - ​[docs] Fix autocomplete render group key warning in the demo (#36025) @chuanyu0201 -- ​[docs] Add hooks API pages for MUI Base (#35828) @mnajdova +- ​[docs] Add hooks API pages for Base UI (#35828) @mnajdova - ​[docs] Fix grammar typo (#36016) @alexownejazayeri - ​[docs][joy] Add JSDoc for the `AutocompleteProps` type (#36039) @ArthurPedroti @@ -828,7 +828,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs] Improve pickers lab migration stressing `mui-x` usage (#35740) @LukasTy - [docs] Fix incorrectly named AccessibleTable demo component (#35832) @HeVictor -- [docs] Clarify where to find docs for MUI Base components in Material UI (#35799) @samuelsycamore +- [docs] Clarify where to find docs for Base UI components in Material UI (#35799) @samuelsycamore - [docs] Fix typos (#35814) @alexfauquette - [docs] Revise and expand the Joy UI Card page (#35745) @samuelsycamore - [docs] Fix navigation layout shift (#35679) @oliviertassinari @@ -939,7 +939,7 @@ _Dec 26, 2022_ A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨: -- ⚙️ Several MUI Base components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771) +- ⚙️ Several Base UI components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771) - Many other 🐛 bug fixes abd 📚 documentation improvements. ### `@mui/material@5.11.2` @@ -1116,7 +1116,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [docs] Refactor `ToggleButtonSizes` demo (#35375) @Armanio - [docs] Standardize the usage of callouts in the MUI Core docs (#35361) @samuelsycamore - [docs] Format feedback to add a link to the commented section (#35381) @alexfauquette -- [docs] Direct users from Material UI to MUI Base for duplicated components (#35293) @samuelsycamore +- [docs] Direct users from Material UI to Base UI for duplicated components (#35293) @samuelsycamore - [docs] Fix typo in FormControl API docs (#35449) @Spanishiwa - [docs] Update callouts design (#35390) @danilo-leal - [website] New wave of open roles (#35240) @mnajdova @@ -1191,7 +1191,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[docs] Improve the autogenerated "Unstyled" and "API" text (#35185) @samuelsycamore - ​[docs] Fix ad margin on API pages (#35201) @oliviertassinari - ​[docs] Revise and expand the Joy UI "Badge" page (#35199) @samuelsycamore -- ​[docs] Update MUI Base docs with latest style conventions (#35034) @samuelsycamore +- ​[docs] Update Base UI docs with latest style conventions (#35034) @samuelsycamore - ​[l10n] Improve Chinese (Taiwan) zh-TW locale (#35328) @happyincent - ​[website] Update MUI stats: GitHub stars, Twitter followers, etc. (#35318) @nomandhoni-cs @@ -1524,7 +1524,7 @@ _Oct 25, 2022_ A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨: -- 🔧 Moved `components` to `slots` prop starting at MUI Base to create consistency across products +- 🔧 Moved `components` to `slots` prop starting at Base UI to create consistency across products - Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements ### `@mui/material@5.10.11` @@ -1606,7 +1606,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som - 🖌 Thanks to the efforts of @bharatkashyap and @nihgwu, we now have editable demos across our docs (#34454)! - 🚀 The Tooltip component has been added to Joy UI by @hbjORbj (#34509). -- ⚙️ We started converting the remaining JS components in MUI Base to TypeScript. +- ⚙️ We started converting the remaining JS components in Base UI to TypeScript. @mbayucot finished the first PR with the conversion of the NoSsr code (#34735). - And more 🐛 bug fixes and 📚 documentation improvements. @@ -1737,7 +1737,7 @@ _Oct 3, 2022_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to MUI Base (#33227) @ZeeshanTamboli +- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to Base UI (#33227) @ZeeshanTamboli - 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958) - And more 🐛 bug fixes and 📚 documentation improvements. @@ -1839,7 +1839,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som ### Docs -- [blog] MUI Base announcement typo fixed (#34409) @prakhargupta1 +- [blog] Base UI announcement typo fixed (#34409) @prakhargupta1 - [blog] Fix typo in date-pickers v5 stable (#34386) @alexfauquette - [blog] Update date on date pickers v5 release blog post (#34406) @joserodolfofreitas - [docs] Update `useMenu` and `useMenuItem` hooks demo (#34166) @ZeeshanTamboli @@ -1925,7 +1925,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements - [docs] Fix 301 link to external projects @oliviertassinari - [docs] Move 12 component names to Title Case (#34188) @oliviertassinari - [docs] Fix broken links (#34320) @alexfauquette -- [docs] Add notification for MUI Base announcement post (#34295) @samuelsycamore +- [docs] Add notification for Base UI announcement post (#34295) @samuelsycamore - [website] Fix MUI X subscribe email border style (#34330) @oliviertassinari - [website] Improve security header @oliviertassinari @@ -1946,7 +1946,7 @@ _Sep 12, 2022_ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- 🚀 [Blog post](https://mui.com/blog/introducing-mui-base/) for announcing the release of the MUI Base package is out thanks to @michaldudak. +- 🚀 [Blog post](https://mui.com/blog/introducing-mui-base/) for announcing the release of the Base UI package is out thanks to @michaldudak. - 🚀 Added [`Alert`](https://mui.com/joy-ui/react-alert/), [`Modal`](https://mui.com/joy-ui/react-modal/), [`ListSubheader`](https://mui.com/joy-ui/react-list-subheader/), [`FormControl`](https://mui.com/joy-ui/react-form-control/), [`CircularProgress`](https://mui.com/joy-ui/react-circular-progress/) components to Joy UI (#33859) @hbjORbj @siriwatknp - And more 🐛 bug fixes and 📚 documentation improvements. @@ -1969,7 +1969,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som ### Docs -- ​[blog] Introducing MUI Base (#33778) @michaldudak +- ​[blog] Introducing Base UI (#33778) @michaldudak - ​[docs] Fix spelling error (#34209) @ChrystianDeMatos - ​[docs] Improve link to the security policy (#34219) @oliviertassinari - ​[docs] Fix typo in Joy UI's `Usage` docs (#34200) @zillion504 @@ -2524,7 +2524,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som - [docs] Add "refine" demo to showcase (#33240) @omeraplak - [docs] Add webpack alias for legacy utils package (#33376) @jgbae - [docs] Improve external link icons synonyms (#33257) @davidgarciab -- [examples] Update MUI Base with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova +- [examples] Update Base UI with Tailwind CSS to use the latest versions of the dependencies (#33401) @mnajdova - [examples] Add MUI base example (#33154) @siriwatknp ### Core @@ -2698,7 +2698,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[blog] Update Blogpost to clear confusion on "no impact" disclaimer. (#33131) @joserodolfofreitas - ​[blog] Add post about v5 Migration guide update (#33063) @samuelsycamore - ​[blog] Fix display on Safari (#33102) @oliviertassinari -- ​[docs] Add guide on how to use MUI Base with Tailwind CSS (#33100) @mnajdova +- ​[docs] Add guide on how to use Base UI with Tailwind CSS (#33100) @mnajdova - ​[docs] Improve Joy template UX (#33159) @siriwatknp - ​[docs] Update Shadow DOM guide (#33160) @cherniavskii - ​[docs] Fix SEO regressions (#33106) @oliviertassinari @@ -2776,7 +2776,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som - ​[docs] Move codesandbox to MUI org (#33122) @oliviertassinari - ​[docs] Add Shadow DOM guide (#33007) @cherniavskii - ​[docs] Fix typo in Material UI overview page (#33087) @oliviertassinari -- ​[docs] Miscellaneous fixes in `MUI Base` docs (#33091) @ZeeshanTamboli +- ​[docs] Miscellaneous fixes in `Base UI` docs (#33091) @ZeeshanTamboli - ​[docs] Fix GitHub capitalization (#33071) @oliviertassinari - ​[docs] Fix a typo in `InputUnstyled` docs (#33077) @ZeeshanTamboli - ​[docs] Add notification for Joy blog post (#33059) @siriwatknp @@ -3212,7 +3212,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som - ​[docs] Base Button style revisions and final review (#32380) @samuelsycamore - ​[docs] Base NoSsr style revisions and final review (#32254) @samuelsycamore - ​[docs] Correctly capitalize Ctrl @oliviertassinari -- ​[docs] Fix styling in `Basic Popper` demo on the MUI Base docs (#32488) @ZeeshanTamboli +- ​[docs] Fix styling in `Basic Popper` demo on the Base UI docs (#32488) @ZeeshanTamboli - ​[docs] Add "Overview" page to Base docs (#32310) @samuelsycamore - ​[docs] Add copy button to code block (#32390) @siriwatknp - ​[docs] Base Tabs style revisions and final review (#32423) @samuelsycamore @@ -3466,7 +3466,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[core] Update peer deps to support React 18 (#32063) @eps1lon - ​[core] Fix running docs:api on Windows (#32091) @michaldudak -- ​[core] Fix api build script for MUI Base (#32081) @siriwatknp +- ​[core] Fix api build script for Base UI (#32081) @siriwatknp All contributors of this release in alphabetical order: @apeltop, @eps1lon, @flaviendelangle, @garronej, @ivan-ngchakming, @m4theushw, @MatthijsMud, @michaldudak, @mnajdova, @oliviertassinari, @psjishnu, @raigoinabox, @samuelsycamore, @siriwatknp, @TkaczykAdam @@ -3693,7 +3693,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - ​[ClassNameGenerator] Prevent all `base` imports (#31297) @siriwatknp - `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all MUI Base module imports. If you use the module, please update the import as suggested in the diff below: + `unstable_ClassNameGenerator` has been moved from `utils` to `className` folder to prevent all Base UI module imports. If you use the module, please update the import as suggested in the diff below: ```diff -import { unstable_ClassNameGenerator } from '@mui/material/utils'; diff --git a/README.md b/README.md index 97d7ec7e12ba66..b4a243289b23f6 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ - [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components. -- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. +- [_Base UI_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. - [_MUI System_](https://mui.com/system/getting-started/overview/) is a collection of CSS utilities to help you rapidly lay out custom designs. @@ -63,9 +63,9 @@ yarn add @mui/material @emotion/react @emotion/styled **Note:** `@next` only points to pre-releases. Use `@latest` for the latest stable release. -### MUI Base +### Base UI -MUI Base is available as an [npm package](https://www.npmjs.com/package/@mui/base). +Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base). **npm:** @@ -79,7 +79,7 @@ npm install @mui/base yarn add @mui/base ``` -**Note**: MUI Base is still in alpha. +**Note**: Base UI is still in alpha. We are adding new components regularly and you're welcome to contribute! ### MUI System @@ -180,7 +180,7 @@ Our documentation features [a collection of example projects using Material UI]( - [Material UI](https://mui.com/material-ui/getting-started/overview/) - [Joy UI](https://mui.com/joy-ui/getting-started/overview/) -- [MUI Base](https://mui.com/base/getting-started/overview/) +- [Base UI](https://mui.com/base/getting-started/overview/) - [MUI System](https://mui.com/system/getting-started/overview/) ## Premium themes diff --git a/docs/data/base/components/button/button-pt.md b/docs/data/base/components/button/button-pt.md index f175246123d5c9..20114f6e2479ba 100644 --- a/docs/data/base/components/button/button-pt.md +++ b/docs/data/base/components/button/button-pt.md @@ -133,7 +133,7 @@ The `focusableWhenDisabled` prop lets you change this behavior. When this prop i This should be used whenever the disabled button needs to be read by screen readers. -MUI Base uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). +Base UI uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). The following demo shows how the `focusableWhenDisabled` prop works—use the Tab key to navigate within this document to see that only the second button accepts the focus: diff --git a/docs/data/base/components/button/button-zh.md b/docs/data/base/components/button/button-zh.md index 80429315754adb..4dfecd1c96c8a7 100644 --- a/docs/data/base/components/button/button-zh.md +++ b/docs/data/base/components/button/button-zh.md @@ -133,7 +133,7 @@ The `focusableWhenDisabled` prop lets you change this behavior. When this prop i This should be used whenever the disabled button needs to be read by screen readers. -MUI Base uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). +Base UI uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). The following demo shows how the `focusableWhenDisabled` prop works—use the Tab key to navigate within this document to see that only the second button accepts the focus: diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md index b6ff4837e3df42..18c0353eadbc69 100644 --- a/docs/data/base/components/button/button.md +++ b/docs/data/base/components/button/button.md @@ -127,7 +127,7 @@ Instead, `aria-disabled` is used, which makes the button focusable. This should be used whenever the disabled button needs to be read by screen readers. -MUI Base uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). +Base UI uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls)). The following demo shows how the `focusableWhenDisabled` prop works—use the Tab key to navigate within this document to see that only the second button accepts the focus: diff --git a/docs/data/base/components/select/select-pt.md b/docs/data/base/components/select/select-pt.md index 12a7eb2ce3d1ec..6e80a92ca1a384 100644 --- a/docs/data/base/components/select/select-pt.md +++ b/docs/data/base/components/select/select-pt.md @@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel A select is a UI element that gives users a list of options to choose from. -MUI Base offers two components to replace the native HTML `` tag: `SelectUnstyled` and `MultiSelectUnstyled`. It also includes `OptionUnstyled` for creating the options on the list, and `OptionGroupUnstyled` for grouping those options. ### Features diff --git a/docs/data/base/components/select/select-zh.md b/docs/data/base/components/select/select-zh.md index 12a7eb2ce3d1ec..6e80a92ca1a384 100644 --- a/docs/data/base/components/select/select-zh.md +++ b/docs/data/base/components/select/select-zh.md @@ -14,7 +14,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel A select is a UI element that gives users a list of options to choose from. -MUI Base offers two components to replace the native HTML `` tag: `SelectUnstyled` and `MultiSelectUnstyled`. It also includes `OptionUnstyled` for creating the options on the list, and `OptionGroupUnstyled` for grouping those options. ### Features diff --git a/docs/data/base/components/select/select.md b/docs/data/base/components/select/select.md index 8988a55d6ee600..10d54b0e0cb30d 100644 --- a/docs/data/base/components/select/select.md +++ b/docs/data/base/components/select/select.md @@ -19,7 +19,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sel A select is a UI element that gives users a list of options to choose from. -MUI Base offers a components to replace the native HTML `` tag: Unstyled Select. It also includes Unstyled Option for creating the options on the list, and Unstyled Option Group for grouping those options. {{"demo": "UnstyledSelectIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} diff --git a/docs/data/base/getting-started/customization/customization-pt.md b/docs/data/base/getting-started/customization/customization-pt.md index 666c838107dc69..259e89db621d31 100644 --- a/docs/data/base/getting-started/customization/customization-pt.md +++ b/docs/data/base/getting-started/customization/customization-pt.md @@ -1,8 +1,8 @@ -# Customizando componentes MUI Base +# Customizando componentes Base UI -

Existem muitas maneiras de customizar Componentes MUI Base, aplicando estilzações com regras de CSS, e além construindo componentes totalmente personalizados com o uso de hooks.

+

Existem muitas maneiras de customizar Componentes Base UI, aplicando estilzações com regras de CSS, e além construindo componentes totalmente personalizados com o uso de hooks.

-With MUI Base, you have the freedom to decide how much you want to customize a component's structure and style. +With Base UI, you have the freedom to decide how much you want to customize a component's structure and style. This document reviews the three levels of customization that are available: applying custom CSS rules, overriding default subcomponent slots, and using hooks to build fully custom components. diff --git a/docs/data/base/getting-started/customization/customization-zh.md b/docs/data/base/getting-started/customization/customization-zh.md index 833ab17ce78179..eb1b5bbe584763 100644 --- a/docs/data/base/getting-started/customization/customization-zh.md +++ b/docs/data/base/getting-started/customization/customization-zh.md @@ -1,8 +1,8 @@ -# Customizing MUI Base components +# Customizing Base UI components -

There are several ways to customize MUI Base components, from applying custom CSS rules to building fully custom components using hooks.

+

There are several ways to customize Base UI components, from applying custom CSS rules to building fully custom components using hooks.

-With MUI Base, you have the freedom to decide how much you want to customize a component's structure and style. +With Base UI, you have the freedom to decide how much you want to customize a component's structure and style. This document reviews the three levels of customization that are available: applying custom CSS rules, overriding default subcomponent slots, and using hooks to build fully custom components. diff --git a/docs/data/base/getting-started/customization/customization.md b/docs/data/base/getting-started/customization/customization.md index eba21e44e7d92f..d04c8eaa7f528f 100644 --- a/docs/data/base/getting-started/customization/customization.md +++ b/docs/data/base/getting-started/customization/customization.md @@ -1,8 +1,8 @@ -# Customizing MUI Base components +# Customizing Base UI components -

There are several ways to customize MUI Base components, from applying custom CSS rules to building fully custom components using hooks.

+

There are several ways to customize Base UI components, from applying custom CSS rules to building fully custom components using hooks.

-With MUI Base, you have the freedom to decide how much you want to customize a component's structure and style. +With Base UI, you have the freedom to decide how much you want to customize a component's structure and style. ## Styling the components @@ -10,12 +10,12 @@ This section reviews several methods of customization that are available: applyi ### Which option to choose? -The multitude of options can be overwhelming, especially if you're new to MUI Base. +The multitude of options can be overwhelming, especially if you're new to Base UI. How to decide which one to use, then? The first decision to make is whether to use unstyled components or hooks. Hooks are better suited for making component libraries that can be further customized. -For example, our own Joy UI is implemented using hooks from MUI Base. +For example, our own Joy UI is implemented using hooks from Base UI. Hooks also serve as the basis for several Material UI components, and future versions of the library will use them even more extensively. If you don't need to make your component library customizable (for instance, by exposing `slotProps`), then the unstyled components may be a better option thanks to their simplicity. @@ -80,7 +80,7 @@ export default function Switch(props) { } ``` -See our [Working with Tailwind CSS guide](/base/guides/working-with-tailwind-css/) for more information about integrating MUI Base and Tailwind CSS. +See our [Working with Tailwind CSS guide](/base/guides/working-with-tailwind-css/) for more information about integrating Base UI and Tailwind CSS. #### Styled components diff --git a/docs/data/base/getting-started/installation/installation-pt.md b/docs/data/base/getting-started/installation/installation-pt.md index fe7525a8a7728a..a8f25f32da5513 100644 --- a/docs/data/base/getting-started/installation/installation-pt.md +++ b/docs/data/base/getting-started/installation/installation-pt.md @@ -1,6 +1,6 @@ # Instalação -

Instalar MUI Base, React UI uma biblioteca robusta de componentes em branco ("unstyled") e ganchos de baixo nível.

+

Instalar Base UI, React UI uma biblioteca robusta de componentes em branco ("unstyled") e ganchos de baixo nível.

## npm diff --git a/docs/data/base/getting-started/installation/installation-zh.md b/docs/data/base/getting-started/installation/installation-zh.md index 2c5252f4ae9a57..7b5f658282855a 100644 --- a/docs/data/base/getting-started/installation/installation-zh.md +++ b/docs/data/base/getting-started/installation/installation-zh.md @@ -1,6 +1,6 @@ # 安装 -

Install MUI Base, a robust library of blank ("unstyled") React UI components and low-level hooks.

+

Install Base UI, a robust library of blank ("unstyled") React UI components and low-level hooks.

## npm diff --git a/docs/data/base/getting-started/installation/installation.md b/docs/data/base/getting-started/installation/installation.md index 70b6fc29e03677..d790457e5a4160 100644 --- a/docs/data/base/getting-started/installation/installation.md +++ b/docs/data/base/getting-started/installation/installation.md @@ -1,8 +1,8 @@ # Installation -

Install MUI Base, a library of headless ("unstyled") React UI components and low-level hooks.

+

Install Base UI, a library of headless ("unstyled") React UI components and low-level hooks.

-Run one of the following commands to add MUI Base to your project: +Run one of the following commands to add Base UI to your project: ## npm diff --git a/docs/data/base/getting-started/overview/overview-pt.md b/docs/data/base/getting-started/overview/overview-pt.md index b8761399556665..b28aca05b66d94 100644 --- a/docs/data/base/getting-started/overview/overview-pt.md +++ b/docs/data/base/getting-started/overview/overview-pt.md @@ -2,36 +2,36 @@ title: Overview - - - -# MUI Base - Overview +# Base UI - Overview -

MUI Base is a library of headless ("unstyled") React UI components and low-level hooks.

+

Base UI is a library of headless ("unstyled") React UI components and low-level hooks.

## Introduction -MUI Base is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. +Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. -MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. -With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. +With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. :::info -**Note:** as of today, MUI Base is in alpha. +**Note:** as of today, Base UI is in alpha. We're adding new components and features regularly, and you're welcome to contribute! Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. ::: -## Advantages of MUI Base +## Advantages of Base UI -- **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution. This means you have complete control over your app's CSS. -- **Accessibility:** MUI Base components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. +- **Ship faster:** Base UI gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. +- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, Base UI has no built-in styling solution. This means you have complete control over your app's CSS. +- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. -## MUI Base vs. Material UI +## Base UI vs. Material UI -MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. -MUI Base is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. +Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. -You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. +You could think of Base UI as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. diff --git a/docs/data/base/getting-started/overview/overview-zh.md b/docs/data/base/getting-started/overview/overview-zh.md index b8761399556665..b28aca05b66d94 100644 --- a/docs/data/base/getting-started/overview/overview-zh.md +++ b/docs/data/base/getting-started/overview/overview-zh.md @@ -2,36 +2,36 @@ title: Overview - - - -# MUI Base - Overview +# Base UI - Overview -

MUI Base is a library of headless ("unstyled") React UI components and low-level hooks.

+

Base UI is a library of headless ("unstyled") React UI components and low-level hooks.

## Introduction -MUI Base is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. +Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. -MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. -With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. +With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. :::info -**Note:** as of today, MUI Base is in alpha. +**Note:** as of today, Base UI is in alpha. We're adding new components and features regularly, and you're welcome to contribute! Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. ::: -## Advantages of MUI Base +## Advantages of Base UI -- **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution. This means you have complete control over your app's CSS. -- **Accessibility:** MUI Base components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. +- **Ship faster:** Base UI gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. +- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, Base UI has no built-in styling solution. This means you have complete control over your app's CSS. +- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. -## MUI Base vs. Material UI +## Base UI vs. Material UI -MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. -MUI Base is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. +Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. -You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. +You could think of Base UI as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 3104b36eb1cb93..fe4401a2f22394 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -2,41 +2,41 @@ title: Overview --- -# MUI Base - Overview +# Base UI - Overview -

MUI Base is a library of headless ("unstyled") React UI components and low-level hooks.

+

Base UI is a library of headless ("unstyled") React UI components and low-level hooks.

## Introduction -MUI Base is a library of unstyled React UI components. +Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. -MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. -With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. +With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. :::warning -MUI Base is currently in alpha. +Base UI is currently in alpha. We're adding new components and features regularly, and you're welcome to contribute! Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. ::: -## Advantages of MUI Base +## Advantages of Base UI -- **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution. +- **Ship faster:** Base UI gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. +- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, Base UI has no built-in styling solution. This means you have complete control over your app's CSS. -- **Accessibility:** MUI Base components are built with accessibility in mind. +- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. -## MUI Base vs. Material UI +## Base UI vs. Material UI -MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. -MUI Base is not packaged with any default theme or built-in style engine. +Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. -You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. +You could think of Base UI as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. diff --git a/docs/data/base/getting-started/usage/usage-pt.md b/docs/data/base/getting-started/usage/usage-pt.md index 4998e58f279ab2..331b5be4b86d7d 100644 --- a/docs/data/base/getting-started/usage/usage-pt.md +++ b/docs/data/base/getting-started/usage/usage-pt.md @@ -1,10 +1,10 @@ # Usage -

Learn the basics of working with MUI Base components.

+

Learn the basics of working with Base UI components.

## Getting started -The following code snippet demonstrates a simple app that uses the MUI Base [`ButtonUnstyled`](/base/react-button/) component: +The following code snippet demonstrates a simple app that uses the Base UI [`ButtonUnstyled`](/base/react-button/) component: ```jsx import * as React from 'react'; @@ -87,7 +87,7 @@ If both `componentsProps.root` and additional props have the same keys but diffe ## Components vs. hooks -MUI Base includes two kinds of building blocks: **components** and **hooks**. +Base UI includes two kinds of building blocks: **components** and **hooks**. :::info 💡 Hooks encapsulate _logic_; components provide _structure_. diff --git a/docs/data/base/getting-started/usage/usage-zh.md b/docs/data/base/getting-started/usage/usage-zh.md index 4998e58f279ab2..331b5be4b86d7d 100644 --- a/docs/data/base/getting-started/usage/usage-zh.md +++ b/docs/data/base/getting-started/usage/usage-zh.md @@ -1,10 +1,10 @@ # Usage -

Learn the basics of working with MUI Base components.

+

Learn the basics of working with Base UI components.

## Getting started -The following code snippet demonstrates a simple app that uses the MUI Base [`ButtonUnstyled`](/base/react-button/) component: +The following code snippet demonstrates a simple app that uses the Base UI [`ButtonUnstyled`](/base/react-button/) component: ```jsx import * as React from 'react'; @@ -87,7 +87,7 @@ If both `componentsProps.root` and additional props have the same keys but diffe ## Components vs. hooks -MUI Base includes two kinds of building blocks: **components** and **hooks**. +Base UI includes two kinds of building blocks: **components** and **hooks**. :::info 💡 Hooks encapsulate _logic_; components provide _structure_. diff --git a/docs/data/base/getting-started/usage/usage.md b/docs/data/base/getting-started/usage/usage.md index fdf07d6dfa734f..ad0b13edc4b587 100644 --- a/docs/data/base/getting-started/usage/usage.md +++ b/docs/data/base/getting-started/usage/usage.md @@ -1,10 +1,10 @@ # Usage -

Learn the basics of working with MUI Base components.

+

Learn the basics of working with Base UI components.

## Quickstart -The following code snippet demonstrates a simple app that uses the MUI Base [Unstyled Button](/base/react-button/) component: +The following code snippet demonstrates a simple app that uses the Base UI [Unstyled Button](/base/react-button/) component: ```jsx import * as React from 'react'; @@ -26,7 +26,7 @@ Try importing an [Unstyled Input](/base/react-input/) component and adding it to ## Responsive meta tag -MUI Base is a _mobile-first_ component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries. +Base UI is a _mobile-first_ component library—we write code for mobile devices first, and then scale up the components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `` element: @@ -114,7 +114,7 @@ If you did the same with `slots.root`, you would need to place this attribute on ## Components vs. hooks -MUI Base includes two kinds of building blocks: **components** and **hooks**. +Base UI includes two kinds of building blocks: **components** and **hooks**. :::info 💡 Hooks encapsulate _logic_; components provide _structure_. diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md index 4e9ab294c12e00..000f642e92a4ef 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md @@ -1,10 +1,10 @@ # Working with Tailwind CSS -

Learn how to style MUI Base components with Tailwind CSS.

+

Learn how to style Base UI components with Tailwind CSS.

## Getting started -The goal of this guide is to teach you how to style MUI Base components using Tailwind CSS while building an interactive and accessible app. +The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app. ### Prerequisites @@ -240,7 +240,7 @@ You should now see the player rendered on the page, but the component is not yet ### Create the Slider component -Let's start by giving life to the slider with the `SliderUnstyled` component from MUI Base. First, create a new file called `Slider.tsx`. Copy and paste the code below into the file: +Let's start by giving life to the slider with the `SliderUnstyled` component from Base UI. First, create a new file called `Slider.tsx`. Copy and paste the code below into the file: **Slider.tsx** @@ -352,7 +352,7 @@ After refreshing the page, you should see the thumb looking identical to the des The code above creates a custom component with all the classes and props necessary to serve as the thumb. Since we want to have an additional dot inside the thumb, we need to add new element in the markup of the thumb: a ``. Note that after the thumb, we are still rendering the `children` passed via props. This is important because the `children` in this case contain a hidden `` element which makes the thumb accessible. -This is just one example, but this pattern of building custom components for each slot is possible with all MUI Base components. +This is just one example, but this pattern of building custom components for each slot is possible with all Base UI components. :::warning When building custom components for the slots, always propagate the props sent from the owner component on the root element. @@ -363,7 +363,7 @@ Additionally, each of the slots receives an `ownerState` object, which contains ## Adding a custom focus selector to the buttons -To finish this guide off, let's see how you can add custom styles based on a component's internal state. We'll create a custom `Button` component that uses the `focusVisible` state from the MUI Base `ButtonUnstyled` to apply a cyan ring around it. +To finish this guide off, let's see how you can add custom styles based on a component's internal state. We'll create a custom `Button` component that uses the `focusVisible` state from the Base UI `ButtonUnstyled` to apply a cyan ring around it. This is what it'll look like: @@ -485,8 +485,8 @@ Some classes were slightly changed on some buttons so we have a consistent focus These are the things we covered in this guide: -✅ How to use Tailwind CSS utility classes to style MUI Base components, using the `componentsProps` prop for targeting specific slots within the component.\ +✅ How to use Tailwind CSS utility classes to style Base UI components, using the `componentsProps` prop for targeting specific slots within the component.\ ✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\ ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `componentsProps` prop. -Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css) example project. +Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-tailwind-ts) example project. diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md index 4e9ab294c12e00..17dd4e16f1e149 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-zh.md @@ -1,10 +1,10 @@ # Working with Tailwind CSS -

Learn how to style MUI Base components with Tailwind CSS.

+

Learn how to style Base UI components with Tailwind CSS.

## Getting started -The goal of this guide is to teach you how to style MUI Base components using Tailwind CSS while building an interactive and accessible app. +The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app. ### Prerequisites @@ -240,7 +240,7 @@ You should now see the player rendered on the page, but the component is not yet ### Create the Slider component -Let's start by giving life to the slider with the `SliderUnstyled` component from MUI Base. First, create a new file called `Slider.tsx`. Copy and paste the code below into the file: +Let's start by giving life to the slider with the `SliderUnstyled` component from Base UI. First, create a new file called `Slider.tsx`. Copy and paste the code below into the file: **Slider.tsx** @@ -352,7 +352,7 @@ After refreshing the page, you should see the thumb looking identical to the des The code above creates a custom component with all the classes and props necessary to serve as the thumb. Since we want to have an additional dot inside the thumb, we need to add new element in the markup of the thumb: a ``. Note that after the thumb, we are still rendering the `children` passed via props. This is important because the `children` in this case contain a hidden `` element which makes the thumb accessible. -This is just one example, but this pattern of building custom components for each slot is possible with all MUI Base components. +This is just one example, but this pattern of building custom components for each slot is possible with all Base UI components. :::warning When building custom components for the slots, always propagate the props sent from the owner component on the root element. @@ -363,7 +363,7 @@ Additionally, each of the slots receives an `ownerState` object, which contains ## Adding a custom focus selector to the buttons -To finish this guide off, let's see how you can add custom styles based on a component's internal state. We'll create a custom `Button` component that uses the `focusVisible` state from the MUI Base `ButtonUnstyled` to apply a cyan ring around it. +To finish this guide off, let's see how you can add custom styles based on a component's internal state. We'll create a custom `Button` component that uses the `focusVisible` state from the Base UI `ButtonUnstyled` to apply a cyan ring around it. This is what it'll look like: @@ -485,8 +485,8 @@ Some classes were slightly changed on some buttons so we have a consistent focus These are the things we covered in this guide: -✅ How to use Tailwind CSS utility classes to style MUI Base components, using the `componentsProps` prop for targeting specific slots within the component.\ +✅ How to use Tailwind CSS utility classes to style Base UI components, using the `componentsProps` prop for targeting specific slots within the component.\ ✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\ ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `componentsProps` prop. -Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css) example project. +Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/mui-base-with-tailwind-css) example project. diff --git a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md index ed2d4138822faa..622ff255028ac3 100644 --- a/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md +++ b/docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md @@ -1,10 +1,10 @@ # Working with Tailwind CSS -

Learn how to style MUI Base components with Tailwind CSS.

+

Learn how to style Base UI components with Tailwind CSS.

## Getting started -The goal of this guide is to teach you how to style MUI Base components using Tailwind CSS while building an interactive and accessible app. +The goal of this guide is to teach you how to style Base UI components using Tailwind CSS while building an interactive and accessible app. ### Prerequisites @@ -243,7 +243,7 @@ You should now see the player rendered on the page, but the component is not yet ### Create the Slider component -Let's start by giving life to the slider with the Unstyled Slider component from MUI Base. +Let's start by giving life to the slider with the Unstyled Slider component from Base UI. First, create a new file called `Slider.tsx`. Copy and paste the code below into the file: @@ -375,7 +375,7 @@ Since we want to have an additional dot inside the thumb, we need to add new ele Note that after the thumb, we are still rendering the `children` passed via props. This is important because the `children` in this case contain a hidden `` element which makes the thumb accessible. -This is just one example, but this pattern of building custom components for each slot is possible with all MUI Base components. +This is just one example, but this pattern of building custom components for each slot is possible with all Base UI components. :::warning When building custom components for the slots, always propagate the props sent from the owner component on the root element. @@ -388,7 +388,7 @@ This is useful if you want to style the component based on some internal state. ## Adding a custom focus selector to the buttons To finish this guide off, let's see how you can add custom styles based on a component's internal state. -We'll create a custom Button component that uses the `focusVisible` state from the MUI Base Unstyled Button to apply a cyan ring around it. +We'll create a custom Button component that uses the `focusVisible` state from the Base UI Unstyled Button to apply a cyan ring around it. This is what it'll look like: @@ -511,9 +511,9 @@ Some classes were slightly changed on some buttons so we have a consistent focus These are the things we covered in this guide: -✅ How to use Tailwind CSS utility classes to style MUI Base components, using the `slotProps` prop for targeting specific slots within the component.\ +✅ How to use Tailwind CSS utility classes to style Base UI components, using the `slotProps` prop for targeting specific slots within the component.\ ✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\ ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop. -Get all the code used in this guide in the [MUI Base with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-tailwind-ts) example project. +Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-tailwind-ts) example project. diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js index 301559b29534ec..f1b6099dfbd09e 100644 --- a/docs/data/joy/components/select/SelectFieldDemo.js +++ b/docs/data/joy/components/select/SelectFieldDemo.js @@ -17,7 +17,7 @@ export default function SelectFieldDemo() { button: { id: 'select-field-demo-button', // TODO: Material UI set aria-labelledby correctly & automatically - // but MUI Base and Joy UI don't yet. + // but Base UI and Joy UI don't yet. 'aria-labelledby': 'select-field-demo-label select-field-demo-button', }, }} diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx index 301559b29534ec..f1b6099dfbd09e 100644 --- a/docs/data/joy/components/select/SelectFieldDemo.tsx +++ b/docs/data/joy/components/select/SelectFieldDemo.tsx @@ -17,7 +17,7 @@ export default function SelectFieldDemo() { button: { id: 'select-field-demo-button', // TODO: Material UI set aria-labelledby correctly & automatically - // but MUI Base and Joy UI don't yet. + // but Base UI and Joy UI don't yet. 'aria-labelledby': 'select-field-demo-label select-field-demo-button', }, }} diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md index 1439b44463d62c..93fd04ffe70b55 100644 --- a/docs/data/joy/components/textarea/textarea.md +++ b/docs/data/joy/components/textarea/textarea.md @@ -12,7 +12,7 @@ unstyled: /base/react-textarea-autosize/ ## Introduction -Joy UI's textarea component is built on top of the MUI Base [`TextareaAutoSize`](/base/react-textarea-autosize/) component. +Joy UI's textarea component is built on top of the Base UI [`TextareaAutoSize`](/base/react-textarea-autosize/) component. {{"demo": "TextareaUsage.js", "hideToolbar": true, "bg": "gradient"}} diff --git a/docs/data/joy/getting-started/overview/overview-pt.md b/docs/data/joy/getting-started/overview/overview-pt.md index b64896d364f7a3..8e792b1dcfeb22 100644 --- a/docs/data/joy/getting-started/overview/overview-pt.md +++ b/docs/data/joy/getting-started/overview/overview-pt.md @@ -20,7 +20,7 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package% - **Ship faster:** Joy UI gives you a significant amount of prebuilt components you need to develop web apps, with a sleek and carefully designed look and feel, allowing you to achieve a good-looking result without a dedicated designer. - **Extensive customization:** you're encouraged to customize each and every tiny piece of the Joy UI components so they match your desired design. -- **Accessibility in mind:** Joy UI components are built on top of [MUI Base's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, also offering suggestions for optimizing accessibility throughout our documentation. +- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, also offering suggestions for optimizing accessibility throughout our documentation. ## Joy UI vs. Material UI diff --git a/docs/data/joy/getting-started/overview/overview-zh.md b/docs/data/joy/getting-started/overview/overview-zh.md index b414232e98795d..ed5383a2e937b1 100644 --- a/docs/data/joy/getting-started/overview/overview-zh.md +++ b/docs/data/joy/getting-started/overview/overview-zh.md @@ -20,7 +20,7 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package% - **更快交付：** Joy UI 给了您大量你开发网页应用所需的预定义组件， 圆润而细致的外观感，让你能够在没有设计师的情况下取得很好的结果。 - **深度自定义：** 你可以自定义 Joy UI 每一个小块组件，使得它们符合你的设计风格。 -- **可访问性：** Joy UI 是建立在 [MUI Base 的无样式基础组件和低级钩子上](/base/getting-started/overview/)的一套新组件，并给予您开箱即用的一些辅助功能支持。 我们尽最大努力使所有组件对屏幕阅读器友好，同时文档中也提供了无障碍访问的建议。 +- **可访问性：** Joy UI 是建立在 [Base UI 的无样式基础组件和低级钩子上](/base/getting-started/overview/)的一套新组件，并给予您开箱即用的一些辅助功能支持。 我们尽最大努力使所有组件对屏幕阅读器友好，同时文档中也提供了无障碍访问的建议。 ## Joy UI 与 Material UI 对比 diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md index 371c823933f0e8..a81af1b099cd59 100644 --- a/docs/data/joy/getting-started/overview/overview.md +++ b/docs/data/joy/getting-started/overview/overview.md @@ -26,7 +26,7 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package% - **Ship faster:** Joy UI gives you pre-built components with a sleek and carefully designed look and feel, so you don't need design skills to ship beautiful UIs rapidly. - **Extensive customization options:** you can customize each and every tiny piece of Joy UI's components to match your own unique design. -- **Accessibility in mind:** Joy UI components are built on top of [MUI Base's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for many accessibility features out of the box. +- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for many accessibility features out of the box. We do our best to make all components screen reader-friendly, and also offer suggestions for optimizing accessibility throughout our documentation. ## Joy UI vs. Material UI 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 4b58066bf7f91c..996549e1130e31 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 @@ -12,8 +12,8 @@ githubLabel: 'component: ClickAwayListener' ## This document has moved :::warning -Please refer to the [Click-Away Listener](/base/react-click-away-listener/) component page in the MUI Base docs for demos and details on usage. +Please refer to the [Click-Away Listener](/base/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 [MUI Base](/base/getting-started/overview/) component library. +Click-Away Listener is a part of the standalone [Base UI](/base/getting-started/overview/) 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. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 0e5ff47b973bae..2d20a2abc673b5 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -11,8 +11,8 @@ components: NoSsr ## This document has moved :::warning -Please refer to the [No-SSR](/base/react-no-ssr/) component page in the MUI Base docs for demos and details on usage. +Please refer to the [No-SSR](/base/react-no-ssr/) component page in the Base UI docs for demos and details on usage. -No-SSR is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +No-SSR is a part of the standalone [Base UI](/base/getting-started/overview/) 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. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index c93220ff335fe1..c0cac367a7fd21 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -12,8 +12,8 @@ githubLabel: 'component: Portal' ## This document has moved :::warning -Please refer to the [Portal](/base/react-portal/) component page in the MUI Base docs for demos and details on usage. +Please refer to the [Portal](/base/react-portal/) component page in the Base UI docs for demos and details on usage. -Portal is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +Portal is a part of the standalone [Base UI](/base/getting-started/overview/) 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. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index df6d4930978f04..09cfd9759fa054 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -12,8 +12,8 @@ githubLabel: 'component: TextareaAutosize' ## This document has moved :::warning -Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the MUI Base docs for demos and details on usage. +Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage. -Textarea Autosize is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +Textarea Autosize is a part of the standalone [Base UI](/base/getting-started/overview/) 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. ::: diff --git a/docs/data/material/getting-started/overview/overview-pt.md b/docs/data/material/getting-started/overview/overview-pt.md index e795fc45dcc626..af360631723165 100644 --- a/docs/data/material/getting-started/overview/overview-pt.md +++ b/docs/data/material/getting-started/overview/overview-pt.md @@ -26,10 +26,10 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne - **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. 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 community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). -## Material UI vs. MUI Base +## Material UI vs. Base UI -Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solutions. +Material UI and [Base UI](/base/getting-started/overview/) feature many of the same UI components, but Base UI 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/) (or [styled-components](https://styled-components.com/)). -MUI Base, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use MUI Base components and hooks for its foundational structure. +Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use Base UI components and hooks for its foundational structure. diff --git a/docs/data/material/getting-started/overview/overview-zh.md b/docs/data/material/getting-started/overview/overview-zh.md index e795fc45dcc626..af360631723165 100644 --- a/docs/data/material/getting-started/overview/overview-zh.md +++ b/docs/data/material/getting-started/overview/overview-zh.md @@ -26,10 +26,10 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne - **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. 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 community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). -## Material UI vs. MUI Base +## Material UI vs. Base UI -Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solutions. +Material UI and [Base UI](/base/getting-started/overview/) feature many of the same UI components, but Base UI 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/) (or [styled-components](https://styled-components.com/)). -MUI Base, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use MUI Base components and hooks for its foundational structure. +Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use Base UI components and hooks for its foundational structure. diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 23b76d9aae575a..40e51ead53a186 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -33,10 +33,10 @@ 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 (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). -## Material UI vs. MUI Base +## Material UI vs. Base UI -Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solutions. +Material UI and [Base UI](/base/getting-started/overview/) feature many of the same UI components, but Base UI 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/) (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. +Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, future versions of Material UI will use Base UI components and hooks for its foundational structure. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md index dbf6306f888856..8bd5dfd24fb0f2 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md @@ -6,7 +6,7 @@ - If you want to build a design system based on Material Design, use `@mui/material`. - If you want to build with components that give you complete control over your app's CSS, use `@mui/base`. -- For CSS utilities to help in laying out custom designs with Material UI or MUI Base, use `@mui/system`. +- For CSS utilities to help in laying out custom designs with Material UI or Base UI, use `@mui/system`. ### Glossary @@ -42,9 +42,9 @@ Material UI is a comprehensive library of components that features our implement `@mui/system` is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from `@mui/material`. -### MUI Base +### Base UI -[MUI Base](/base/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. +[Base UI](/base/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md index dbf6306f888856..8bd5dfd24fb0f2 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md @@ -6,7 +6,7 @@ - If you want to build a design system based on Material Design, use `@mui/material`. - If you want to build with components that give you complete control over your app's CSS, use `@mui/base`. -- For CSS utilities to help in laying out custom designs with Material UI or MUI Base, use `@mui/system`. +- For CSS utilities to help in laying out custom designs with Material UI or Base UI, use `@mui/system`. ### Glossary @@ -42,9 +42,9 @@ Material UI is a comprehensive library of components that features our implement `@mui/system` is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from `@mui/material`. -### MUI Base +### Base UI -[MUI Base](/base/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. +[Base UI](/base/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index f61c42ceff6925..c4b45d32d43537 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -6,7 +6,7 @@ - If you want to build a design system based on Material Design, use `@mui/material`. - If you want to build with components that give you complete control over your app's CSS, use `@mui/base`. -- For CSS utilities to help in laying out custom designs with Material UI or MUI Base, use `@mui/system`. +- For CSS utilities to help in laying out custom designs with Material UI or Base UI, use `@mui/system`. ### Glossary @@ -44,9 +44,9 @@ Material UI is a comprehensive library of components that features our implement `@mui/system` is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from `@mui/material`. -### MUI Base +### Base UI -[MUI Base](/base/getting-started/overview/) is our library of "unstyled" components and hooks. +[Base UI](/base/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/system/getting-started/overview/overview-pt.md b/docs/data/system/getting-started/overview/overview-pt.md index 8cb11eac21098e..41451826d920fa 100644 --- a/docs/data/system/getting-started/overview/overview-pt.md +++ b/docs/data/system/getting-started/overview/overview-pt.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [MUI Base](/base/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base/getting-started/overview/). The 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. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). @@ -19,8 +19,8 @@ The System gives you a set of flexible, generic wrapper components like [`Box`]( - **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the 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 System vs. Base UI -[MUI Base](/base/getting-started/overview/) 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 other MUI component libraries like Material UI and Joy UI). +[Base UI](/base/getting-started/overview/) 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 other MUI component libraries like Material UI and Joy UI). -MUI Base is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. +Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview-zh.md b/docs/data/system/getting-started/overview/overview-zh.md index 8cb11eac21098e..41451826d920fa 100644 --- a/docs/data/system/getting-started/overview/overview-zh.md +++ b/docs/data/system/getting-started/overview/overview-zh.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [MUI Base](/base/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base/getting-started/overview/). The 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. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). @@ -19,8 +19,8 @@ The System gives you a set of flexible, generic wrapper components like [`Box`]( - **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the 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 System vs. Base UI -[MUI Base](/base/getting-started/overview/) 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 other MUI component libraries like Material UI and Joy UI). +[Base UI](/base/getting-started/overview/) 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 other MUI component libraries like Material UI and Joy UI). -MUI Base is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. +Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview.md b/docs/data/system/getting-started/overview/overview.md index 5c90806fec4fd9..bcdeee4830c9e8 100644 --- a/docs/data/system/getting-started/overview/overview.md +++ b/docs/data/system/getting-started/overview/overview.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [MUI Base](/base/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base/getting-started/overview/). The 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. @@ -22,9 +22,9 @@ Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). - **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the 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 System vs. Base UI -[MUI Base](/base/getting-started/overview/) 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 other MUI component libraries like Material UI and Joy UI). +[Base UI](/base/getting-started/overview/) 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 other MUI 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 and other MUI components, as well as third-party components. +Base UI is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with Base UI and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/notifications.json b/docs/notifications.json index 45f58d27965c5d..7de9d945d7b665 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -1,8 +1,8 @@ [ { "id": 68, - "title": "Check out MUI Base today 💥", - "text": "Love Material UI, but don't need Material Design? Try MUI Base, the new \"unstyled\" alternative. Read more in this announcement." + "title": "Check out Base UI today 💥", + "text": "Love Material UI, but don't need Material Design? Try Base UI, the new \"unstyled\" alternative. Read more in this announcement." }, { "id": 73, diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index e71387f6b6b862..d9b0c5db189c32 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -117,7 +117,7 @@ Here is a breakdown of our [roadmap](/material-ui/discover-more/roadmap/). The release of v5 has introduced a significant API churn in the community. While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, e.g. taking full advantage of the new style engine. -#### MUI Base +#### Base UI To continue improving the customization experience, we will double down on the version of the components without styles: `@mui/base`. These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied or what styles. @@ -149,7 +149,7 @@ We plan to provide a [second design system](https://github.com/mui/material-ui/i - simplicity of the design for allowing simpler customizations. - complementarity with Material Design. -It will be built on top of the unstyled components: MUI Base and our styling library: MUI System. +It will be built on top of the unstyled components: Base UI and our styling library: MUI System. ### MUI X diff --git a/docs/pages/blog/docs-restructure-2022.md b/docs/pages/blog/docs-restructure-2022.md index 45b6d600eab4f5..9931644c0dc362 100644 --- a/docs/pages/blog/docs-restructure-2022.md +++ b/docs/pages/blog/docs-restructure-2022.md @@ -17,7 +17,7 @@ We currently offer two main product lines: - **MUI Core**—a collection of foundational component libraries, including: - _Material UI_ —components that implement Google's Material Design - - _MUI Base_ —unstyled components for implementing your own design system + - _Base UI_ —unstyled components for implementing your own design system - _MUI System_ —CSS utilities for quickly laying out design systems - **MUI X**—a collection of advanced components for complex use cases, including: - _Data grid_ —fast, feature-rich, extendable React data table @@ -34,7 +34,7 @@ As for the URLs, this is how they look now: - MUI Core: - Material UI: [https://mui.com/material-ui/](https://mui.com/material-ui/getting-started/overview/) - - MUI Base: [https://mui.com/base/](https://mui.com/base/getting-started/overview/) + - Base UI: [https://mui.com/base/](https://mui.com/base/getting-started/overview/) - MUI System: [https://mui.com/system/](https://mui.com/system/getting-started/overview/) - MUI X: - Data grid: [https://mui.com/x/react-data-grid/](https://mui.com/x/react-data-grid/) @@ -47,7 +47,7 @@ As for the URLs, this is how they look now: The documentation restructuring ranks search results based on the product that you are currently looking at. For example, if you are looking at Material UI documentation, when you press ⌘+K (or Ctrl+K on Windows) and type a keyword, you will find that most of the results are related to Material UI. -We have also added product labels for Material UI and MUI Base in case it's unclear which library the search results refer to. +We have also added product labels for Material UI and Base UI in case it's unclear which library the search results refer to. Screenshot of the search results displaying product labels per result @@ -61,7 +61,7 @@ Now when viewing the MUI X section, only results related to the data grid pagina ## Moving forward -This separation will become increasingly beneficial as each product grows, such as additional components in MUI X and MUI Base. +This separation will become increasingly beneficial as each product grows, such as additional components in MUI X and Base UI. As we move forward working on [our second design system package](https://deploy-preview-30686--material-ui.netlify.app/experiments/), the separation will make it possible for us to build the documentation for each system using its default styles—so the docs themselves will serve as examples of their corresponding component libraries. diff --git a/docs/pages/blog/introducing-mui-base.md b/docs/pages/blog/introducing-mui-base.md index 19eff0cab7c249..3812e2e5683f3f 100644 --- a/docs/pages/blog/introducing-mui-base.md +++ b/docs/pages/blog/introducing-mui-base.md @@ -1,43 +1,43 @@ --- -title: 'Introducing MUI Base: the headless alternative to Material UI' -description: The MUI Base component library gives you complete control over the look and feel of your app. +title: 'Introducing Base UI: the headless alternative to Material UI' +description: The Base UI component library gives you complete control over the look and feel of your app. date: 2022-09-07T00:00:00.000Z authors: ['michaldudak', 'samuelsycamore'] tags: ['News', 'MUI Core'] card: true --- -Demo components built with MUI Base, a newly introduced library of unstyled components and hooks +Demo components built with Base UI, a newly introduced library of unstyled components and hooks While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. We've all been there. -That's why we're building an entirely new library of headless React UI components and hooks called **MUI Base**—to give you complete control over the look and feel of your user interface, with no defaults to override. +That's why we're building an entirely new library of headless React UI components and hooks called **Base UI**—to give you complete control over the look and feel of your user interface, with no defaults to override. -MUI Base is easy to pick up if you're already familiar with Material UI, as the APIs are very similar—indeed, they were designed to be complementary to one another. -Start from scratch with MUI Base, or use Material UI for rapid prototyping, and then switch to MUI Base when you need more customization options. +Base UI is easy to pick up if you're already familiar with Material UI, as the APIs are very similar—indeed, they were designed to be complementary to one another. +Start from scratch with Base UI, or use Material UI for rapid prototyping, and then switch to Base UI when you need more customization options. -## Why MUI Base? +## Why Base UI? -MUI Base was created to serve a different set of needs than those addressed by Material UI. +Base UI was created to serve a different set of needs than those addressed by Material UI. Material UI shines at providing you with the means to quickly create user interfaces that look close to the Material Design specification. -MUI Base, on the other hand, prioritizes customizability over the speed of development. +Base UI, on the other hand, prioritizes customizability over the speed of development. This makes it better suited for public-facing projects where pixel-perfect implementation is crucial. So, why not use any of the headless libraries already present on the market instead? There are other alternatives like Headless UI, Radix UI, and React Aria, to name a few. -MUI Base's significant advantage is that it takes the best parts from Material UI, which is a complete, mature library. +Base UI's significant advantage is that it takes the best parts from Material UI, which is a complete, mature library. It is free from many of the issues that have been reported and fixed in Material UI. -Also, many of the improvements to Material UI proposed by the community over the years are included in MUI Base. +Also, many of the improvements to Material UI proposed by the community over the years are included in Base UI. While they were created for different use cases, these two libraries share many common features and design patterns, and are intended to be complementary to one another within the MUI ecosystem. -MUI Base's API will be familiar to you if you've used Material UI before, making it easy to migrate a project—or just a part of it—from one library to the other if needed. +Base UI's API will be familiar to you if you've used Material UI before, making it easy to migrate a project—or just a part of it—from one library to the other if needed. We aim to create [unstyled versions of all Material UI components](https://github.com/mui/material-ui/issues/27170) (that make sense to do so). ## Components and hooks -MUI Base offers two kinds of building blocks: unstyled components and hooks. +Base UI offers two kinds of building blocks: unstyled components and hooks. Components are more straightforward to use of the two. Place a component on a page, add your own styles, and it's ready to go! @@ -45,7 +45,7 @@ It's important to note that you are not limited to the styling options available You can, of course, still use [MUI System](https://mui.com/system/getting-started/overview/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! Check out the [Working with Tailwind CSS guide](/base/guides/working-with-tailwind-css/) for an example of using this library. -In contrast to Material UI, MUI Base's components do not have any default styles. +In contrast to Material UI, Base UI's components do not have any default styles. They provide functionality and structure, while designers and developers are responsible for the visuals. Each unstyled component lets you modify or override its _slots_—smaller subcomponents representing the interior elements that comprise the component's DOM structure. @@ -58,7 +58,7 @@ See how it works on the live demo: @@ -84,19 +84,19 @@ function MySwitch(props: UseSwitchParameters) { ## What's included The initial version of the library contains 17 components. -Check out the [MUI Base documentation](/base/getting-started/overview/) for details. +Check out the [Base UI documentation](/base/getting-started/overview/) for details. You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/material-ui/issues/27170). The @mui/base package is released as an alpha. This means the component APIs are subject to change—especially as we receive feedback from the community about room for improvement. However, we believe the library is solid enough at this point to start building design systems with it. -In fact, we're using MUI Base to create [Joy UI](/blog/first-look-at-joy/)—the next product we'll be launching in our line of Core component libraries that also includes Material UI. -In the future, MUI Base will also be used as the foundation for Material UI components to provide a consistent developer experience across our entire suite of products. +In fact, we're using Base UI to create [Joy UI](/blog/first-look-at-joy/)—the next product we'll be launching in our line of Core component libraries that also includes Material UI. +In the future, Base UI will also be used as the foundation for Material UI components to provide a consistent developer experience across our entire suite of products. ## Feedback needed -Give MUI Base a try today by installing the package via npm: +Give Base UI a try today by installing the package via npm: ```sh npm install @mui/base diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index 8aa6bbb8a26587..70a13cd4a1cbb4 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -305,7 +305,7 @@ In our last two annual [developer surveys](/blog/2021-developer-survey-results/) Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize MUI's components to suit your specific needs. -[Material UI](https://mui.com/material-ui/getting-started/overview/) and [Joy UI](https://mui.com/joy-ui/getting-started/overview/) are designed to be both beautiful and flexible right out of the box, while [MUI Base](https://mui.com/base/getting-started/overview/) gives you the most freedom to implement your own custom styling solution. +[Material UI](https://mui.com/material-ui/getting-started/overview/) and [Joy UI](https://mui.com/joy-ui/getting-started/overview/) are designed to be both beautiful and flexible right out of the box, while [Base UI](https://mui.com/base/getting-started/overview/) gives you the most freedom to implement your own custom styling solution. [MUI X](https://mui.com/x/introduction/) is comprised of fully featured complex components like the `DataGrid` which—as we've seen—can still be customized in many ways with minimal friction. Get started building with the MUI X Data Grid by [installing the MIT-licensed Community package](https://mui.com/x/react-data-grid/getting-started/#installation) today. diff --git a/docs/pages/blog/mui-product-comparison.md b/docs/pages/blog/mui-product-comparison.md index 122bce6b9b66bf..3bd8de78396d74 100644 --- a/docs/pages/blog/mui-product-comparison.md +++ b/docs/pages/blog/mui-product-comparison.md @@ -1,6 +1,6 @@ --- title: An introduction to the MUI ecosystem -description: MUI is more than just Material UI. Consider Joy UI, MUI Base, MUI X, and Toolpad for your next project. +description: MUI is more than just Material UI. Consider Joy UI, Base UI, MUI X, and Toolpad for your next project. date: 2022-11-01T00:00:00.000Z authors: ['samuelsycamore'] card: true @@ -34,7 +34,7 @@ It grew out of Material UI, and that library's legacy lives on in the name of th But this repo contains much more than just Material UI these days. We've carefully deconstructed this library to expose its best parts as isolated open-source projects. -More recent additions include Joy UI and MUI Base, as well as our in-house styling solution, MUI System. +More recent additions include Joy UI and Base UI, as well as our in-house styling solution, MUI System. MUI Core is open-source, and we invite you to contribute wherever you see fit! @@ -80,23 +80,23 @@ Get started in the [Joy UI docs](/joy-ui/getting-started/overview/). - Design systems that would benefit from less opinionated defaults when customizing. - Client-facing apps that need to look and feel distinctly like _your_ brand. -### MUI Base +### Base UI -MUI Base is an open-source library of headless ("unstyled") React UI components and hooks. +Base UI is an open-source library of headless ("unstyled") React UI components and hooks. These components were extracted from Material UI, and are now available as a standalone package. They feature the same robust engineering but without any default styling solution or theme. -MUI Base includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. -Get started in the [MUI Base docs](/base/getting-started/overview/). +Get started in the [Base UI docs](/base/getting-started/overview/). #### Key features -- **Total control over styles:** Unlike Material UI and Joy UI, MUI Base doesn't ship with any default styles or styling solution. +- **Total control over styles:** Unlike Material UI and Joy UI, Base UI doesn't ship with any default styles or styling solution. Write CSS however you'd prefer—vanilla, modules, styled-components—or integrate a styling library like Tailwind CSS or Emotion. - **Hooks for fully custom components:** When pre-built components aren't flexible enough, low-level hooks enable you to quickly add sophisticated functionality to your custom components. -- **Accessibility:** MUI Base components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. -- **The core of MUI Core:** MUI Base serves as the scaffold for Joy UI components, and future versions Material UI will also be built with MUI Base as the foundation. +- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. +- **The core of MUI Core:** Base UI serves as the scaffold for Joy UI components, and future versions Material UI will also be built with Base UI as the foundation. #### Ideal use cases @@ -106,7 +106,7 @@ Get started in the [MUI Base docs](/base/getting-started/overview/). ### MUI System -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like Material UI, Joy UI, and MUI Base. +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like Material UI, Joy UI, and Base UI. The System gives you a set of flexible, generic wrapper components like Box and 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. @@ -123,7 +123,7 @@ Get started in the [MUI System docs](/system/getting-started/overview/). #### Ideal use cases -- Quickly prototyping custom styles in Material UI, Joy UI, or MUI Base. +- Quickly prototyping custom styles in Material UI, Joy UI, or Base UI. - Creating one-off custom components. ## MUI X diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md index 75f16be8cc4b48..f73cdc9b5eac61 100644 --- a/docs/pages/blog/mui-x-v6.md +++ b/docs/pages/blog/mui-x-v6.md @@ -293,7 +293,7 @@ We have decoupled MUI X's versioning from MUI Core (including `@mui/material`: 1. Soften migration pains with a yearly release cycle.\ The MUI X codebase is dynamic, and the constant development of new features often requires a faster breaking changes pace than MUI Core. With a yearly release, we aim to deliver those in smaller, more digestible sizes, in a time window that you can rely on to make your plans and prepare for updates. -2. We aim to support not only Material UI but also Joy UI and, in the future, MUI Base. +2. We aim to support not only Material UI but also Joy UI and, in the future, Base UI. ## Feedback diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 0d0c4114bb40af..c2fd0eaeb03e51 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -95,7 +95,7 @@ const DOCS = [ href: ROUTES.joyDocs, }, { - name: 'MUI Base', + name: 'Base UI', description: 'Unstyled React components and low-level hooks.', href: ROUTES.baseDocs, }, diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 214d322cfa0d40..b39a16ff9c6fb7 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -374,9 +374,9 @@ function RowHead({ children, startIcon, ...props }: BoxProps & { startIcon?: Rea const rowHeaders: Record = { // Core - 'MUI Base': ( + 'Base UI': ( ), @@ -616,7 +616,7 @@ const no = ; const communityData: Record = { // MUI Core - 'MUI Base': yes, + 'Base UI': yes, 'MUI System': yes, 'Material UI': yes, 'Joy UI': yes, @@ -675,7 +675,7 @@ const communityData: Record = { const proData: Record = { // MUI Core - 'MUI Base': yes, + 'Base UI': yes, 'MUI System': yes, 'Material UI': yes, 'Joy UI': yes, @@ -734,7 +734,7 @@ const proData: Record = { const premiumData: Record = { // MUI Core - 'MUI Base': yes, + 'Base UI': yes, 'MUI System': yes, 'Material UI': yes, 'Joy UI': yes, @@ -1049,7 +1049,7 @@ export default function PricingTable({ {divider} {renderRow('Joy UI')} {divider} - {renderRow('MUI Base')} + {renderRow('Base UI')} {divider} {renderRow('MUI System')} }> diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index d994ade0f227f0..d069da3046aa27 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -101,7 +101,7 @@ function AppLayoutDocs(props) { if (canonicalAs.startsWith('/material-ui/')) { productName = 'Material UI'; } else if (canonicalAs.startsWith('/base/')) { - productName = 'MUI Base'; + productName = 'Base UI'; } else if (canonicalAs.startsWith('/x/')) { productName = 'MUI X'; } else if (canonicalAs.startsWith('/system/')) { diff --git a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js index 88dd4f43eadfec..c75c597ab3efef 100644 --- a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js +++ b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js @@ -99,7 +99,7 @@ function AppLayoutDocs(props) { if (canonicalAs.startsWith('/material-ui/')) { productName = 'Material UI'; } else if (canonicalAs.startsWith('/base/')) { - productName = 'MUI Base'; + productName = 'Base UI'; } else if (canonicalAs.startsWith('/x/')) { productName = 'MUI X'; } else if (canonicalAs.startsWith('/system/')) { diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 24d3659cca4096..8c5b2815841611 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -449,7 +449,7 @@ export default function AppNavDrawer(props) { )} {canonicalAs.startsWith('/base/') && ( ; } diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index c1e2c3f74828e0..8390ba437cb995 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -65,7 +65,7 @@ function useDemoData(codeVariant, demo, githubLocation) { name = 'Joy UI'; } else if (canonicalAs.startsWith('/base/')) { product = 'base'; - name = 'MUI Base'; + name = 'Base UI'; } else if (canonicalAs.startsWith('/x/')) { name = 'MUI X'; } diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx index b2b2681122103a..204ec4ba6e44e0 100644 --- a/docs/src/modules/components/MuiProductSelector.tsx +++ b/docs/src/modules/components/MuiProductSelector.tsx @@ -73,7 +73,7 @@ const products = [ slug: 'joy-ui', }, { - name: 'MUI Base', + name: 'Base UI', href: ROUTES.baseDocs, slug: 'base', }, diff --git a/docs/src/pages/careers/accessibility-engineer.md b/docs/src/pages/careers/accessibility-engineer.md index 0fe0e4279ee278..3f338f76b4f59b 100644 --- a/docs/src/pages/careers/accessibility-engineer.md +++ b/docs/src/pages/careers/accessibility-engineer.md @@ -29,7 +29,7 @@ For additional details about the MUI team and culture, you can check our [career Accessibility is a strategic opportunty for MUI, across our products: -1. We are building MUI Base for the developers that are looking for a relatively lower-level API while keeping a strong baseline to build on top of that saves them time. For them, it's about having a better customizability experience (style & behavior). The most exigent users of MUI Base, the ones that are spreading the viral growth of the product in the community, have strong a11y requirements. So we have to meet them for MUI Base to be successful. +1. We are building Base UI for the developers that are looking for a relatively lower-level API while keeping a strong baseline to build on top of that saves them time. For them, it's about having a better customizability experience (style & behavior). The most exigent users of Base UI, the ones that are spreading the viral growth of the product in the community, have strong a11y requirements. So we have to meet them for Base UI to be successful. 2. Accessibility is mandated by law. For example, in the US, the Americans with Disabilities Act (ADA) is a US law enacted in 1990 to ensure people with disabilities are not discriminated against. In the EU, the European Accessibility Act (AEE) will soon be enacted. Our paid customers are increasingly asking about compliance with WCAG. Both our open-source community and our premium products are growing fast (x2 YoY). diff --git a/docs/src/pages/careers/design-engineer.md b/docs/src/pages/careers/design-engineer.md index d472bbfeca9296..80578c2a19461c 100644 --- a/docs/src/pages/careers/design-engineer.md +++ b/docs/src/pages/careers/design-engineer.md @@ -39,7 +39,7 @@ Our products empower React developers to build awesome applications faster – w But while we are [the leading](https://tsh.io/state-of-frontend/#over-the-past-year-which-of-the-following-design-systems-was-your-favorite-go-to-solution) UI design system in the frontend space, the adoption of MUI is only at 25%. More importantly, the challenges of developers and designers to solve when creating UIs go way beyond the ones of design systems. We envision a future where MUI becomes the default toolkit for web developers to create UIs. -It's why we started MUI Base, Joy UI, and MUI Toolpad. Design is key to achieving this goal. +It's why we started Base UI, Joy UI, and MUI Toolpad. Design is key to achieving this goal. ## About the role diff --git a/docs/src/pages/careers/designer.md b/docs/src/pages/careers/designer.md index 41049a49c53d32..5cea9022f274e7 100644 --- a/docs/src/pages/careers/designer.md +++ b/docs/src/pages/careers/designer.md @@ -27,7 +27,7 @@ The new brand was fundamental to set the stage for MUI to become larger than Mat Currently, we have five main projects that are not at all related to MD: - [MUI Core](/core/): - - [MUI Base](/base/getting-started/overview/): the unstyled version of the components. + - [Base UI](/base/getting-started/overview/): the unstyled version of the components. - [MUI System](/system/getting-started/overview/): our most recent take on styling for React components. - [MUI Joy (working title)](https://github.com/mui/material-ui/discussions/29024): a second design system as an alternative to Material Design. - [MUI X](/x/): as mentioned, a growing set of advanced components. diff --git a/docs/src/pages/careers/developer-advocate.md b/docs/src/pages/careers/developer-advocate.md index 9ef6475b1911e5..71bf533840dfc0 100644 --- a/docs/src/pages/careers/developer-advocate.md +++ b/docs/src/pages/careers/developer-advocate.md @@ -82,7 +82,7 @@ For the right candidate: - Revamp the blog post infrastructure to empower the rest of the team to create more content. - Start a monthly newsletter to engage with the community. - Organize a MUIConf (once we go >50 people) -- Think about creative ways to promote MUI Base, Joy UI, MUI X, MUI X Pro, and new products. +- Think about creative ways to promote Base UI, Joy UI, MUI X, MUI X Pro, and new products. ## About you diff --git a/docs/src/pages/careers/react-engineer-core.md b/docs/src/pages/careers/react-engineer-core.md index 1866906886d2ae..731d80a4bbb347 100644 --- a/docs/src/pages/careers/react-engineer-core.md +++ b/docs/src/pages/careers/react-engineer-core.md @@ -28,7 +28,7 @@ For additional details about the MUI team and culture, you can check our [career ## Why we're hiring The core components team (MUI Core) needs help. -They are working on 4 products (Material UI, MUI Base, Joy UI, and MUI System) with a tiny team. +They are working on 4 products (Material UI, Base UI, Joy UI, and MUI System) with a tiny team. We also need help to continue to improve the health of the open-source product: make the core components easier to use, increase the contributions by engaging and collaborating with the community, polish all the details, make the components more accessible, guide developers to answers, and just generally be a positive presence in the open-source community. diff --git a/docs/src/pages/careers/react-engineer-x.md b/docs/src/pages/careers/react-engineer-x.md index d3a00cf26bdb05..9020f3a46a7cc5 100644 --- a/docs/src/pages/careers/react-engineer-x.md +++ b/docs/src/pages/careers/react-engineer-x.md @@ -34,7 +34,7 @@ The data grid team (part of MUI X) needs your help. The component is off [a great start](https://npm-stat.com/charts.html?package=%40mui%2Fx-data-grid&package=react-table&package=ag-grid-community&from=2021-06-01), however we have only started to scratch the surface for the potential of this component. There is x10 more to build. We need to: -- build an headless version for MUI Base. +- build an headless version for Base UI. - build advanced, in browsers, data analysis features like pivoting and charts integration. - build a strong integration with backend APIs, e.g. to handle >100M rows. diff --git a/docs/src/pages/careers/react-tech-lead-core.md b/docs/src/pages/careers/react-tech-lead-core.md index d4434be4dcdce5..6752d83fee5e40 100644 --- a/docs/src/pages/careers/react-tech-lead-core.md +++ b/docs/src/pages/careers/react-tech-lead-core.md @@ -28,7 +28,7 @@ For additional details about the MUI team and culture, you can check our [career ## Why we're hiring The core components team (MUI Core) needs help. -They are working on 4 products (Material UI, MUI Base, Joy UI, and MUI System) with a tiny team. +They are working on 4 products (Material UI, Base UI, Joy UI, and MUI System) with a tiny team. We also need help to continue to improve the health of the open-source product: make the core components easier to use, increase the contributions by engaging and collaborating with the community, polish all the details, make the components more accessible, guide developers to answers, and just generally be a positive presence in the open-source community. diff --git a/docs/src/pages/careers/react-tech-lead-x-grid.md b/docs/src/pages/careers/react-tech-lead-x-grid.md index ed72ae934dc875..bf656acce95f38 100644 --- a/docs/src/pages/careers/react-tech-lead-x-grid.md +++ b/docs/src/pages/careers/react-tech-lead-x-grid.md @@ -34,7 +34,7 @@ The data grid team (part of MUI X) needs your help. The component is off [a great start](https://npm-stat.com/charts.html?package=%40mui%2Fx-data-grid&package=react-table&package=ag-grid-community&from=2021-06-01), however we have only started to scratch the surface for the potential of this component. There is x10 more to build. We need to: -- build an headless version for MUI Base. +- build an headless version for Base UI. - build advanced, in browsers, data analysis features like pivoting and charts integration. - build a strong integration with backend APIs, e.g. to handle >100M rows. diff --git a/docs/src/pages/careers/senior-designer.md b/docs/src/pages/careers/senior-designer.md index 956b5684a99d1d..da133f5600c6aa 100644 --- a/docs/src/pages/careers/senior-designer.md +++ b/docs/src/pages/careers/senior-designer.md @@ -41,7 +41,7 @@ However, despite Material UI – our biggest library – being [the leading](htt More importantly, our challenges go way beyond the ones of design systems. We envision a future where MUI becomes the default toolkit for web developers to create UIs. -It's why we've been expanding our offering with Joy UI, MUI Base, and MUI Toolpad. +It's why we've been expanding our offering with Joy UI, Base UI, and MUI Toolpad. Design is foundational to achieving this goal. ## About the role diff --git a/examples/base-cra-tailwind-ts/README.md b/examples/base-cra-tailwind-ts/README.md index d3d1d0b167b8e3..26817007838798 100644 --- a/examples/base-cra-tailwind-ts/README.md +++ b/examples/base-cra-tailwind-ts/README.md @@ -1,4 +1,4 @@ -# MUI Base - Create React App example with Tailwind CSS in TypeScript +# Base UI - Create React App example with Tailwind CSS in TypeScript ## How to use @@ -29,4 +29,4 @@ or: ## The idea behind the example This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). -It shows how you can use MUI Base together with [Tailwind CSS](https://tailwindcss.com/) to build your application. +It shows how you can use Base UI together with [Tailwind CSS](https://tailwindcss.com/) to build your application. diff --git a/examples/base-cra-ts/README.md b/examples/base-cra-ts/README.md index 2b7dd88ec4db4c..b31c0d657fd43f 100644 --- a/examples/base-cra-ts/README.md +++ b/examples/base-cra-ts/README.md @@ -1,6 +1,6 @@ -# MUI Base - Create React App example with TypeScript +# Base UI - Create React App example with TypeScript -[MUI Base](https://mui.com/base/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +[Base UI](https://mui.com/base/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. ## How to use diff --git a/examples/base-cra-ts/src/App.tsx b/examples/base-cra-ts/src/App.tsx index 49a16aa6fc1b5f..e778c96c83f940 100644 --- a/examples/base-cra-ts/src/App.tsx +++ b/examples/base-cra-ts/src/App.tsx @@ -30,5 +30,5 @@ const Button = styled(ButtonUnstyled)` `; export default function App() { - return ; + return ; } diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index df7ca6b9630523..79d68b845bd259 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -444,7 +444,7 @@ function prepareMarkdown(config) { ## Unstyled :::success -[MUI Base](/base/getting-started/overview/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. +[Base UI](/base/getting-started/overview/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. ::: `); } diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx index c48bd163142521..fd3138f290ad32 100644 --- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx +++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.tsx @@ -292,7 +292,7 @@ const ModalUnstyled = React.forwardRef(function ModalUnstyled< return ( { if (!warnedOnce) { console.error( [ - 'MUI Base: The MultiSelectUnstyled component was removed from the library.', + 'Base UI: The MultiSelectUnstyled component was removed from the library.', '', 'The multi-select functionality is now available in the SelectUnstyled component.', 'Replace with in your code to remove this error.', diff --git a/packages/mui-base/src/utils/mergeSlotProps.ts b/packages/mui-base/src/utils/mergeSlotProps.ts index 90477e7c111572..c384139931f688 100644 --- a/packages/mui-base/src/utils/mergeSlotProps.ts +++ b/packages/mui-base/src/utils/mergeSlotProps.ts @@ -137,7 +137,7 @@ export default function mergeSlotProps< const internalSlotProps = getSlotProps(eventHandlers); // The order of classes is important here. - // Emotion (that we use in libraries consuming MUI Base) depends on this order + // Emotion (that we use in libraries consuming Base UI) depends on this order // to properly override style. It requires the most important classes to be last // (see https://github.com/mui/material-ui/pull/33205) for the related discussion. const joinedClasses = clsx( diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index a84d94873ebb5a..8c75e71049ab51 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -79,7 +79,7 @@ npx @mui/codemod v5.0.0/rename-css-variables #### `base-hook-imports` -Updates the sources of the imports of the MUI Base hooks to adapt to the new directories of the hooks. +Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks. ```diff - import { useBadge } from '@mui/base/BadgeUnstyled'; @@ -397,7 +397,7 @@ You can find more details about this breaking change in [the migration guide](ht Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively. Also, changes `slots`' fields names to camelCase. -This change only affects MUI Base components. +This change only affects Base UI components. ```diff ; } diff --git a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js index 1cef6a56560ed3..1ecdce4bf8d8ed 100644 --- a/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js +++ b/packages/mui-codemod/src/v5.0.0/theme-spacing.test/large-expected.js @@ -171,7 +171,7 @@ function DocSearcHit(props) { text = 'Joy UI'; } if (pathname.startsWith('/base/')) { - text = 'MUI Base'; + text = 'Base UI'; } return ; } diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts index 330e5d999eebd1..1cd9f4e3cd95d6 100644 --- a/packages/mui-joy/src/utils/useSlot.ts +++ b/packages/mui-joy/src/utils/useSlot.ts @@ -18,8 +18,8 @@ type ExtractComponentProps

= P extends infer T | ((ownerState: any) => infer /** * An internal function to create a Joy UI slot. * - * This is an advanced version of MUI Base `useSlotProps` because Joy UI allows leaf component to be customized via `component` prop - * while MUI Base does not need to support leaf component customization. + * This is an advanced version of Base UI `useSlotProps` because Joy UI allows leaf component to be customized via `component` prop + * while Base UI does not need to support leaf component customization. * * @param {string} name: name of the slot * @param {object} parameters diff --git a/packages/mui-material/src/OverridableComponent.d.ts b/packages/mui-material/src/OverridableComponent.d.ts index 143a9c534b033c..6e7d71ed0f027f 100644 --- a/packages/mui-material/src/OverridableComponent.d.ts +++ b/packages/mui-material/src/OverridableComponent.d.ts @@ -10,7 +10,7 @@ import { StyledComponentProps } from './styles'; export interface OverridableComponent { // If you make any changes to this interface, please make sure to update the // `OverridableComponent` type in `mui-types/index.d.ts` as well. - // Also, there are types in MUI Base that have a similar shape to this interface + // Also, there are types in Base UI that have a similar shape to this interface // (e.g. SelectUnstyledType, OptionUnstyledType, etc.). ( props: { diff --git a/packages/mui-types/index.d.ts b/packages/mui-types/index.d.ts index 159d5ff5839e00..2a6b9eb6fb2c7a 100644 --- a/packages/mui-types/index.d.ts +++ b/packages/mui-types/index.d.ts @@ -94,7 +94,7 @@ export function expectType(actual: IfEquals { // If you make any changes to this interface, please make sure to update the // `OverridableComponent` type in `mui-material/src/OverridableComponent.d.ts` as well. - // Also, there are types in MUI Base that have a similar shape to this interface + // Also, there are types in Base UI that have a similar shape to this interface // (e.g. SelectUnstyledType, OptionUnstyledType, etc.). ( props: { diff --git a/scripts/generateCodeowners.mjs b/scripts/generateCodeowners.mjs index d3f60d6ed6e822..f284dbbf3bd0d6 100644 --- a/scripts/generateCodeowners.mjs +++ b/scripts/generateCodeowners.mjs @@ -335,7 +335,7 @@ function run() { write(processComponents('material')); write(processDocs('material')); - write('\n# Components - MUI Base\n'); + write('\n# Components - Base UI\n'); write(processComponents('base')); write(processDocs('base'));