[docs] Rename "Base UI" to "MUI Base" in all text (#45060)

Co-authored-by: mnajdova <[email protected]>

Author: mj12albert

.eslintrc.js

@@ -343,6 +343,7 @@ module.exports = /** @type {Config} */ ({
             patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
           },
         ],
+        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
       },
     },
     {
@@ -519,6 +520,7 @@ module.exports = /** @type {Config} */ ({
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
         'react-compiler/react-compiler': 'off',
+        'no-irregular-whitespace': ['error', { skipComments: true }],
       },
     },
     {
@@ -544,6 +546,7 @@ module.exports = /** @type {Config} */ ({
         // Reset the default until https://github.com/jsx-eslint/eslint-plugin-react/issues/3672 is fixed.
         'react/jsx-no-target-blank': ['error', { allowReferrer: false }],
         'react/prop-types': 'off',
+        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
       },
     },
     {

CHANGELOG.old.md

@@ -3151,7 +3151,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som
 - [docs][base] Remove usage of `component` prop in docs (#37462) @sai6855
 - [docs] Fix docs redirections @oliviertassinari
 - [docs] Fix Fluent -> Fluent UI @oliviertassinari
-- [docs] Fix MUI Base -> Base UI @oliviertassinari
+- [docs] Fix MUI Base -> Base UI @oliviertassinari
 - [docs] Add base-vite-tailwind example repo (#36994) @mj12albert
 - [docs] Fix search bar layout shift (#37460) @oliviertassinari
 - [docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal
@@ -3366,7 +3366,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 ### Core
 
-- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal
+- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal
 - [core] Add VS Code extensions recommendations (#37166) @michaldudak
 - [test] `e2e-website` related minor fixes (#37204) @ZeeshanTamboli
 
@@ -3671,7 +3671,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
 ### Core
 
 - [core] Increase margin to scroll @oliviertassinari
-- [core] Replace MUI Base with Base UI (#36716) @mnajdova
+- [core] Replace MUI Base with Base UI (#36716) @mnajdova
 
 All contributors of this release in alphabetical order: @alirezahekmati, @danilo-leal, @hbjORbj, @Lioness100, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli
 
@@ -3711,7 +3711,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 - [docs][base] Move styles to the bottom of demos code for `Menu` (#36582) @gitstart
 - [docs][base] Move styles code to bottom in the `Button` demos (#36590) @sai6855
 - [docs][base] Show components & hooks API on the components page (#35938) @mnajdova
-- [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
+- [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
 - [docs] Fix double API page redirection (#36743) @oliviertassinari
 - [docs] Remove hash property and leverage pathname (#36764) @siriwatknp
 - [docs] Introduce markdown permalink to source (#36729) @oliviertassinari

docs/README.md

@@ -1,6 +1,6 @@
 # Docs
 
-This is the website of the company (MUI), the documentation of Material UI, Base UI, MUI System, and Joy UI.
+This is the website of the company (MUI), the documentation of Material UI, MUI Base, MUI System, and Joy UI.
 
 To start the docs site in development mode, from the project root, run:
 

docs/data/base/all-components/all-components.md

@@ -1,5 +1,5 @@
-# Base UI components
+# MUI Base components
 
-<p class="description">Every Base UI component available so far, sorted alphabetically.</p>
+<p class="description">Every MUI Base component available so far, sorted alphabetically.</p>
 
 {{"component": "modules/components/BaseUIComponents.js"}}

docs/data/base/components/autocomplete/autocomplete.md

@@ -18,7 +18,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 
 An autocomplete component is an enhanced text input that shows a list of suggested options as users type and lets them select an option from the list.
 
-Base UI provides the `useAutocomplete` hook for building a custom Autocomplete.
+MUI Base provides the `useAutocomplete` hook for building a custom Autocomplete.
 It implements the WAI-ARIA Combobox pattern and is typically used to assist users in completing form inputs or search queries faster.
 
 {{"demo": "AutocompleteIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
@@ -102,9 +102,9 @@ Learn more about controlled and uncontrolled components in the [React documentat
 
 React Portals can be used to render the listbox outside of the DOM hierarchy, making it easier to allow it to "float" above adjacent elements.
 
-Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
+MUI Base provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
 
-To render the listbox in Base UI's Popper, the `ref`s must be merged as follows:
+To render the listbox in MUI Base's Popper, the `ref`s must be merged as follows:
 
 ```jsx
 import { useAutocomplete } from '@mui/base/useAutocomplete';

docs/data/base/components/button/button.md

@@ -127,7 +127,7 @@ You can even use SVGs, as shown in the demo below:
 
 ### Using with links
 
-The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link):
+The following demo illustrates how to use the Button as a link, whether using the MUI Base Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link):
 
 {{"demo": "UnstyledLinkButton.js", "defaultCodeOpen": true}}
 
@@ -142,7 +142,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.
 
-Base UI uses this prop internally in [menu items](/base-ui/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/#focusabilityofdisabledcontrols)).
+MUI Base uses this prop internally in [menu items](/base-ui/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/#focusabilityofdisabledcontrols)).
 
 The following demo shows how the `focusableWhenDisabled` prop works—use the <kbd class="key">Tab</kbd> key to navigate within this document to see that only the second Button accepts the focus:
 

docs/data/base/components/drawer/drawer.md

@@ -9,5 +9,5 @@ githubLabel: 'component: drawer'
 <p class="description">Navigation drawers (also known as sidebars) provide ergonomic access to different destinations without taking the user out of context.</p>
 
 :::error
-@mui/base has been deprecated and replaced by Base UI. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/38) to track the development of the Drawer component.
+@mui/base has been deprecated and replaced by MUI Base. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/38) to track the development of the Drawer component.
 :::

docs/data/base/components/menu/menu.md

@@ -19,7 +19,7 @@ newName: Menu
 
 ## Introduction
 
-The Base UI Dropdown Menu is implemented using a collection of related components:
+The MUI Base Dropdown Menu is implemented using a collection of related components:
 
 - Dropdown - The outermost container that houses all Menu components.
 - Menu Button - The button that toggles the visibility of the Menu.

docs/data/base/components/number-input/number-input.md

@@ -19,7 +19,7 @@ newName: Number Field
 ## Introduction
 
 A number input is a UI element that accepts numeric values from the user.
-Base UI's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of its native counterpart, such as:
+MUI Base's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of its native counterpart, such as:
 
 - Inconsistencies across browsers in the appearance and behavior of the stepper buttons
 - Allowing certain non-numeric characters ('e', '+', '-', '.') and silently discarding others
@@ -43,7 +43,7 @@ The following demo shows how to create a Number Input component, apply some styl
 
 ### Anatomy
 
-The Base UI Number Input component consists of four slots:
+The MUI Base Number Input component consists of four slots:
 
 - `root`: an outer `<div>` containing the other interior slots
 - `input`: an `<input>` element

docs/data/base/components/pagination/pagination.md

@@ -9,5 +9,5 @@ githubLabel: 'component: Pagination'
 <p class="description">The Pagination component lets the user select a specific page from a range of pages.</p>
 
 :::error
-@mui/base has been deprecated and replaced by Base UI. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/29) to track the development of the Pagination component.
+@mui/base has been deprecated and replaced by MUI Base. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/29) to track the development of the Pagination component.
 :::

docs/data/base/components/popper/popper.md

@@ -25,7 +25,7 @@ It relies on the third-party library ([Popper.js v2](https://popper.js.org/docs/
 The Popper.js library is no longer maintained.
 It has been replaced by a new library: [Floating UI](https://floating-ui.com/).
 
-Base UI offers the [Popup](/base-ui/react-popup/) component based on this new library.
+MUI Base offers the [Popup](/base-ui/react-popup/) component based on this new library.
 It has features and an API similar to the Popper component, but is still in development and its API may change.
 
 Once the [Popup](/base-ui/react-popup/) is stable, we will deprecate and, later, remove our Popper component.

docs/data/base/components/popup/popup.md

@@ -24,7 +24,7 @@ It relies on the third-party [Floating UI](https://floating-ui.com/) library for
 {{"demo": "UnstyledPopupIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
 
 :::info
-The Popup component, once stable, is intended to replace the [Popper](/base-ui/react-popper/) component, which will be phased out in a future release of Base UI.
+The Popup component, once stable, is intended to replace the [Popper](/base-ui/react-popper/) component, which will be phased out in a future release of MUI Base.
 :::
 
 ## Component
@@ -63,7 +63,7 @@ Try changing this value to `top` in the interactive demo below to see how it wor
 ### Transitions
 
 You can animate the opening and closing of the Popup using CSS transitions, CSS animations, or third-party animation libraries.
-It supports the API described on the [Base UI Transitions](/base-ui/react-transitions/) page.
+It supports the API described on the [MUI Base Transitions](/base-ui/react-transitions/) page.
 
 ### Disable portal
 

docs/data/base/components/rating/rating.md

@@ -10,5 +10,5 @@ waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
 <p class="description">Rating components provide users with a simple action to give feedback as well as assess the opinions of others.</p>
 
 :::error
-@mui/base has been deprecated and replaced by Base UI. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/30) to track the development of the Rating component.
+@mui/base has been deprecated and replaced by MUI Base. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/30) to track the development of the Rating component.
 :::

docs/data/base/components/select/select.md

@@ -21,7 +21,7 @@ newName: Select
 
 A select is a UI element that gives users a list of options to choose from.
 
-Base UI's Select component replaces the native HTML `<select>` tag.
+MUI Base's Select component replaces the native HTML `<select>` tag.
 It also includes the Option component for creating the options in the list, and Option Group for grouping those options.
 
 {{"demo": "UnstyledSelectIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
@@ -95,9 +95,9 @@ The uncontrolled component accepts the `defaultValue` that can be used to set th
 To deselect all values, pass `null` to the respective prop.
 
 :::warning
-This pattern is where Base UI's Select differs from the equivalent [Material UI component](/material-ui/react-select/).
+This pattern is where MUI Base's Select differs from the equivalent [Material UI component](/material-ui/react-select/).
 The Material UI Select takes an empty string to deselect all values.
-In Base UI, you must use `null` to achieve this.
+In MUI Base, you must use `null` to achieve this.
 :::
 
 ### Object values

docs/data/base/components/transitions/transitions.md

@@ -13,15 +13,15 @@ hooks: useTransitionTrigger, useTransitionStateManager
 
 ## Introduction
 
-Base UI offers higher-level components and low-level hooks that can be used to add animations to components as they enter and exit the screen.
+MUI Base offers higher-level components and low-level hooks that can be used to add animations to components as they enter and exit the screen.
 
 :::info
 The [Popup](/base-ui/react-popup/) is currently the only component that supports this API; [Select](/base-ui/react-select/) and [Menu](/base-ui/react-menu/) support will be added next.
 :::
 
 ## Components
 
-Base UI offers two components to cover the majority of use cases using [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) and [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations).
+MUI Base offers two components to cover the majority of use cases using [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) and [animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations).
 
 ### CSS Transition
 
@@ -74,6 +74,6 @@ You can use any of the [transitions from Material UI](/material-ui/transitions/
 
 ### React Spring
 
-React Spring, another popular animation library, also can be used with the Base UI transitions API.
+React Spring, another popular animation library, also can be used with the MUI Base transitions API.
 
 {{"demo": "ReactSpring.js"}}

docs/data/base/getting-started/accessibility/accessibility.md

@@ -1,14 +1,14 @@
 # Accessibility
 
-<p class="description">Learn how to make the most of Base UI's accessibility features and guidelines.</p>
+<p class="description">Learn how to make the most of MUI Base's accessibility features and guidelines.</p>
 
-Accessibility is our top priority for Base UI components.
+Accessibility is our top priority for MUI Base components.
 However, the library cannot make your application fully accessible on its own.
 This page highlights the most common actions that you as a developer must take to ensure that your app is accessible to users who require assistive technologies.
 
 ## Keyboard navigation
 
-Base UI components follow the [WAI-ARIA 1.2 standard](https://www.w3.org/TR/wai-aria-1.2/), so they are accessible with a keyboard out of the box.
+MUI Base components follow the [WAI-ARIA 1.2 standard](https://www.w3.org/TR/wai-aria-1.2/), so they are accessible with a keyboard out of the box.
 This is important for users who have trouble using a pointing device, but also comes in handy for users who find navigating with a keyboard faster, and who expect web components to behave the same way as native operating system controls.
 
 Specifically, interactive components can be focused using the <kbd class="key">Tab</kbd> key.
@@ -19,15 +19,15 @@ The Select and Menu also let users navigate to options that begin with a provide
 
 ## Focus ring
 
-While Base UI components handle keyboard navigation, it's the developer's responsibility to indicate when a component is focused and can receive keyboard input.
+While MUI Base components handle keyboard navigation, it's the developer's responsibility to indicate when a component is focused and can receive keyboard input.
 This is usually done by styling the [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) or [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudoclasses.
 Read the [WCAG guidelines on focus appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance) to learn more about requirements for focus indicators.
 
 {{"demo": "FocusRing.js", "defaultCodeOpen": false}}
 
 ## Color contrast
 
-Since Base UI components are unstyled, it's up to you to implement the appropriate amount of color contrast between text and background.
+Since MUI Base components are unstyled, it's up to you to implement the appropriate amount of color contrast between text and background.
 You can use [C. Liam Brown's Color Contrast Tool](https://cliambrown.com/contrast/) to measure contrast between colors in your design and ensure that they meet the minimum requirements
 (note that this tool uses the [APCA algorithm](https://ruitina.com/apca-accessible-colour-contrast/), which is slated to become the new standard in WCAG 3).
 

docs/data/base/getting-started/customization/customization.md

@@ -1,21 +1,21 @@
-# Customizing Base UI components
+# Customizing MUI Base components
 
-<p class="description">There are several ways to customize Base UI components, from applying custom CSS rules to building fully custom components using hooks.</p>
+<p class="description">There are several ways to customize MUI Base components, from applying custom CSS rules to building fully custom components using hooks.</p>
 
-With Base UI, you have the freedom to decide how much you want to customize a component's structure and style.
+With MUI Base, you have the freedom to decide how much you want to customize a component's structure and style.
 
 ## Styling the components
 
 This section reviews several methods of customization that are available: applying custom CSS rules, overriding default subcomponent slots, customizing the slot props, and using hooks to build fully custom components.
 
 ### Which option to choose?
 
-The multitude of options can be overwhelming, especially if you're new to Base UI.
+The multitude of options can be overwhelming, especially if you're new to MUI Base.
 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 Base UI.
+For example, our own Joy UI is implemented using hooks from MUI Base.
 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.
@@ -83,7 +83,7 @@ export default function Switch(props) {
 }
 ```
 
-See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for more information about integrating Base UI and Tailwind CSS.
+See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for more information about integrating MUI Base and Tailwind CSS.
 
 #### Styled components