[base-ui] Change the CSS class prefix to base-

[michaldudak]

Changed the class prefix of Base UI components from Mui- to base- to allow styling Base UI apps with plain CSS and avoid conflicts with Material UI components.

Also, I changed the pattern a bit:

• the root element doesn't have the -root postfix anymore, what makes the class name shorter and still readable (so, for example, there's no baseui-Button-root, but baseui-Button) (reverted)
• the global state classes use the base--{state} pattern (somewhat akin to BEM) to differentiate them from component classes visually

Breaking change

This change only affects codebases that use class names verbatim (i.e., not exposed by JS object such as buttonClasses, but as plain strings or in CSS stylesheets (.MuiButton-root))

To adapt your code to the new pattern:

• replace all occurrences of the regex .Mui([A-Z][A-Za-z]*)- with .base-$1- (so MuiButton-root becomes base-Button-root, etc.),
• replace all occurrences of the regex .Mui-([a-z]*) with .base--$1 (so Mui-disabled becomes base--disabled, etc.).

Closes #39467

[mui-bot]

Netlify deploy preview

• docs/data/base/components/button/button.md
• docs/data/base/components/input/input.md
• docs/data/base/components/menu/menu.md
• docs/data/base/components/modal/modal.md
• docs/data/base/components/number-input/number-input.md

@material-ui/unstyled: parsed: -0.04% 😍, gzip: +0.25%
@mui/material-next: parsed: -2.39% 😍, gzip: -1.45% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a8256c9

[michaldudak]

I realized material-ui-next had an old implementation of the Input (based on the Base UI's Input component), with failing tests after my changes. I removed the component (we can add one using hooks in the future).

[mnajdova]

We'll need to also update the base-theme.css file.

[mnajdova]

It's a personal preference, but I would rather write BaseButton-root, than base-Button-root.

[oliviertassinari]

What's the plan for Material UI class names, change them to .mui-Button-root? If we don't plan to change it,
.BaseButton-root looks like a clear direction to take. It's arbitrary, so we might as well be consistent before we make it stable.

Edit: moved to #39467 (comment)

[michaldudak]

We're considering dropping the slot classes at all: https://www.notion.so/mui-org/base-ui-Style-hooks-e943c3051ca74ce79f2e5af98a0f43eb

[michaldudak]

We'll need to also update the base-theme.css file.

Not unless we include the CSS file only on the gallery page. Otherwise, all Base UI components on the docs would be affected.

[Janpot]

@michaldudak This seems to cause

TypeError: packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx: projectSettings.generateClassName is not a function

in X https://app.circleci.com/pipelines/github/mui/mui-x/51253/workflows/90888eb7-3a25-443c-9b4f-e0ebe1c44dfd/jobs/293619
Can this generateClassName be made optional in the interface to keep api-docs-builder forward compatible?

[michaldudak]

The fix for this is here: mui/mui-x#11671. Alex gave me green light to merge it.
The logic of the default generateClassName lives in @mui/utils and I wanted to avoid our shared packages from depending on production packages.

[Janpot]

Ok, got caught in the crossfire. Will have to wait until mui/mui-x#11671 is merged then 🙂

[gandhirahul]

Looking at the release v5.15.5, it appears the class prefix of Base UI components have been changed from Mui- to base-.

Apologies, but found it confusing, would it affect the projects using "mui" (and not "base-ui" directly) as well?

I'm using below mui packages in my code and not using the @mui/base directly
(tho it's added as a dependency to @mui/lab and @mui/material in yarn.lock file)

1. "@mui/material": "5.15.9",
2. "@mui/icons-material": "5.15.9"
3. "@mui/lab": "^5.0.0-alpha.165"

I tried to update my code with using the base- classes but that seems not working.
It's still working fine with old Mui- syntax. (in CSSinJS files)
Here is the code as well:

export const StyledInputBase = styled(InputBase)(
    ({ theme: { palette, spacing, transitions, breakpoints } }) => ({
        color: palette.text.secondary,
       // works fine
        '& .MuiInputBase-input': {
            width: '100%',
            paddingLeft: `calc(1em + ${spacing(3)})`, // horizontal padding + font size from searchIcon
            transition: transitions.create('width'),
            [breakpoints.up('md')]: {
                width: '20ch',
            },
        },
       // doesn't work at all
        '& .base-input': {
            width: '100%',
            paddingLeft: `calc(1em + ${spacing(3)})`, // horizontal padding + font size from searchIcon
            transition: transitions.create('width'),
            background: 'black',
            color: 'white',
            [breakpoints.up('md')]: {
                width: '20ch',
            },
        },
    })
);

[michaldudak]

No, this change only affects projects using Base UI components. Nothing should change in Material UI.