Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Jan 20, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@ module.exports = /** @type {Config} */ ({
patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
},
],
'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
},
},
{
Expand Down Expand Up @@ -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 }],
},
},
{
Expand All @@ -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 }],
},
},
{
Expand Down
8 changes: 4 additions & 4 deletions CHANGELOG.old.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
@@ -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:

Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/all-components/all-components.md
Original file line number Diff line number Diff line change
@@ -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"}}
6 changes: 3 additions & 3 deletions docs/data/base/components/autocomplete/autocomplete.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down Expand Up @@ -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';
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/button/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}}

Expand All @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/base/components/drawer/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::
2 changes: 1 addition & 1 deletion docs/data/base/components/menu/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/number-input/number-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/data/base/components/pagination/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::
2 changes: 1 addition & 1 deletion docs/data/base/components/popper/popper.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/popup/popup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion docs/data/base/components/rating/rating.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
:::
6 changes: 3 additions & 3 deletions docs/data/base/components/select/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/data/base/components/transitions/transitions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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"}}
10 changes: 5 additions & 5 deletions docs/data/base/getting-started/accessibility/accessibility.md
Original file line number Diff line number Diff line change
@@ -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.

Check warning on line 5 in docs/data/base/getting-started/accessibility/accessibility.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [Google.We] Try to avoid using first-person plural like 'our'. Raw Output: {"message": "[Google.We] Try to avoid using first-person plural like 'our'.", "location": {"path": "docs/data/base/getting-started/accessibility/accessibility.md", "range": {"start": {"line": 5, "column": 18}}}, "severity": "WARNING"}
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.
Expand All @@ -19,15 +19,15 @@

## 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).

Expand Down
12 changes: 6 additions & 6 deletions docs/data/base/getting-started/customization/customization.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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

Expand Down
Loading
Loading