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.

Sign up for GitHub

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

Jump to bottom

[base] Make CSS class prefixes consistent #33411

Merged
merged 18 commits into from Oct 19, 2022
Merged

[base] Make CSS class prefixes consistent #33411

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9ed8620
[base] Make CSS class prefixes consistent
michaldudak Jul 6, 2022
06f6b49
Fix unit tests
michaldudak Jul 6, 2022
4dfa187
Merge branch 'master' into consistent-classes
michaldudak Sep 16, 2022
4d63740
Rename all Base- classes to Mui- and add Mui-Base product class
michaldudak Sep 16, 2022
e3c5339
Add product class to Material UI components
michaldudak Sep 16, 2022
2d75867
Do not export generateUtilityClass from Base
michaldudak Sep 16, 2022
35010b0
Fix TS errors
michaldudak Sep 16, 2022
4166ffb
Fix tests
michaldudak Sep 16, 2022
1d9dedd
Fix lint errors
michaldudak Sep 16, 2022
f683f20
Fix API docs generation
michaldudak Sep 16, 2022
c7d5d97
Do not reexport Base's generateUtilityClass from Material UI
michaldudak Sep 16, 2022
5e56e7b
Merge remote-tracking branch 'upstream/master' into consistent-classes
michaldudak Sep 16, 2022
aa63bbb
Change product classes to Mui-product
michaldudak Sep 19, 2022
895a882
Use @mui/material generateUtilityClass in lab and material-next
michaldudak Sep 19, 2022
81b4026
Don't use hardcoded classes in tests
michaldudak Sep 20, 2022
fc66d45
Merge branch 'master' into consistent-classes
michaldudak Sep 20, 2022
4a7c414
Merge branch 'master' into consistent-classes
michaldudak Oct 10, 2022
61babab
Do not generate product-specific classes
michaldudak Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/mui-base/src/ButtonUnstyled/buttonUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -11,10 +11,10 @@ export interface ButtonUnstyledClasses {
export type ButtonUnstyledClassKey = keyof ButtonUnstyledClasses;

export function getButtonUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('ButtonUnstyled', slot);
return generateUtilityClass('BaseButton', slot);
}

const buttonUnstyledClasses: ButtonUnstyledClasses = generateUtilityClasses('ButtonUnstyled', [
const buttonUnstyledClasses: ButtonUnstyledClasses = generateUtilityClasses('BaseButton', [
'root',
'active',
'disabled',
Expand Down
6 changes: 3 additions & 3 deletions packages/mui-base/src/InputUnstyled/inputUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -29,10 +29,10 @@ export interface InputUnstyledClasses {
export type InputUnstyledClassKey = keyof InputUnstyledClasses;

export function getInputUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiInput', slot);
return generateUtilityClass('BaseInput', slot);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect

Suggested change
return generateUtilityClass('BaseInput', slot);
return generateUtilityClass('MuiInputUnstyled', slot);

here so I don't have to think about what's going to be the class name when I'm looking at my code (import { InputUnstyled } from "@mui/material"). Commented in #33260 (comment).

Also, notice the company name Mui prefix to avoid class name collisions.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've discussed it already in the past (last year, possibly?) and settled on BaseComponentName. If I remember correctly the arguments for Base* over *Unstyled were that:

  1. It's shorter (and people have been complaining about the size of the HTML generated by Material UI and how it's hard to extract meaningful information).
  2. When Base components are used to build a design system, they are not "unstyled" anymore. So it's weird to see .ButtonUnstyled { color: green; } - it was brought up by @mnajdova.

As for the "Mui" prefix - I'm ok with adding it. It'll make the class names a bit longer, but if you think it's important to have the company name there, I won't oppose it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've discussed it already in the past

I remember a notion page about changing the name of the npm package so that it would feel more natural to expose headless components and hooks from @mui/base compared to @mui/unstyled, I think that it was also about covering the use case of the package, more than being descriptive of the content of the npm package.

Maybe there is another discussion about this for the components not the npm package that I wasn't involved in.

Ok, but assuming we change the name of the components from Unstyled to Base (and find a way to fix the conflict with Base Material UI components, e.g. ButtonBase that is styled), I still don't think that the changes proposed in this PR work. I think that it should be all-in: replace unstyled to base, everywhere at once and expose a codemod to handle it. I think that developers will be confused to have Unstyled sometimes and Base some other times when using MUI Base.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renaming components from *Unstyled to Base* wasn't on the table right now (and I'm not convinced we should do this - I feel everyone agreed on *Unstyled). It's just about CSS classes.
See #31974 (comment) for the discussion I found (cc @mnajdova). I remember talking about it in one of the meetings also, but could not find anything in the notes.

Copy link
Member

@mnajdova mnajdova Jul 15, 2022 •
edited by oliviertassinari

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like what we are missing is giving a bit of background on why the change is being done in the PR description.

From different discussions here and there and things that I could remember we had this:
Mateiral UI components are named as MuiComponentName. When we started with Joy we had the same pattern, until we realized that having the same classes in Material UI and Joy components can be problematic, because they are not unique. This is why we decided to prefix the Joy components with Joy instead of Mui. In the mean time, the unstyled components were following this so-called pattern, of using MuiComponentName (without the Unstyled suffix, because the CSS would feel weird if it looked like: .MuiSomethingUnstyled: { color: red } // it's not unstyled anymore). Now that the Joy components are changed, it looks like the pattern is : ProductComponentName, instead of CompanyComponentName, hence the changes proposed on this PR.

I would vote for keeping what we have in this PR going forward, but I agree that this should not be something rushed up and released without clear rationales.

In addition to this, I would keep both classes for couple of versions giving people time to migrate to the new classes (in case if they haven't used the componentNameClasses constants).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it would be awesome to take these dimensions #33260 (comment) and compare how each of the different options that we have performs. I'm slowing down the decision process a bit because I feel that we are touching "customization", one of the biggest challenges that developers have https://mui.com/blog/2021-developer-survey-results/#what-else-can-we-do-to-improve-mui-for-you and 2. the decision feels hardly reversible 3. it went a bit against the expectation I had, creating confusion, hence maybe it could against the intuition of existing users.

Starting a bit quickly. Here are the different options that seem to emerge. Guess what's the class name of the thumb slot:

A. CompanyComponentName

import { Slider as SliderMd, sliderClasses as sliderMdClasses } from '@mui/material';
import { Slider as SliderJoy, sliderClasses as sliderJoyClasses } from '@mui/joy';
import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';

<SliderMd /> // sliderMdClasses.thumb = 'MuiSlider-thumb'
<SliderJoy /> // sliderJoyClasses.thumb = 'MuiSlider-thumb'
<SliderUnstyled /> // sliderUnstyledClasses.thumb = 'MuiSlider-thumb'

My initial assumption was that we were following this. I like how it's always the same. Sharing Mui between different products which might help us communicate that Joy and Material should be seen as themes for business users and that Material UI !== MUI. Otherwise, changing the Mui prefix to Md could be also a great way to communicate the latter point but not the former point. For developers that want to apply global CSS to customize the components => we would have to tell them: don't, it's a foot gun, would they do it, yeah maybe they would anyway.

B. Current tradeoff

import { Slider as SliderMd, sliderClasses as sliderMdClasses } from '@mui/material';
import { Slider as SliderJoy, sliderClasses as sliderJoyClasses } from '@mui/joy';
import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';

<SliderMd /> // sliderMDClasses.thumb = 'MuiSlider-thumb'
<SliderJoy /> // sliderJoyClasses.thumb = 'JoySlider-thumb'
<SliderUnstyled /> // sliderUnstyledClasses.thumb = 'MuiSlider-thumb'

Is not fully followed in HEAD, which we could scope down #33260 to

C. ProductComponentName

import { Slider as SliderMd, sliderClasses as sliderMdClasses } from '@mui/material';
import { Slider as SliderJoy, sliderClasses as sliderJoyClasses } from '@mui/joy';
import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';

<SliderMd /> // sliderMdClasses.thumb = 'MdSlider-thumb'
<SliderJoy /> // sliderJoyClasses.thumb = 'JoySlider-thumb'
<SliderUnstyled /> // sliderUnstyledClasses.thumb = 'BaseSlider-thumb'

or

import { Slider as SliderMui, sliderClasses as sliderMuiClasses } from '@mui/material';
import { Slider as SliderJui, sliderClasses as sliderJuiClasses } from '@mui/joy';
import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';

<SliderMui /> // sliderMuiClasses.thumb = 'MuiSlider-thumb'
<SliderJui /> // sliderJuiClasses.thumb = 'JuiSlider-thumb'
<SliderUnstyled /> // sliderUnstyledClasses.thumb = 'BaseSlider-thumb'

sliderUnstyledClasses.thumb = 'BaseSlider-thumb' feels surprising, my first thought was, wait, why?

D. CompanyModuleExportName

import { Slider as SliderMd, sliderClasses as sliderMdClasses } from '@mui/material';
import { Slider as SliderJoy, sliderClasses as sliderJoyClasses } from '@mui/joy';
import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';

<SliderMd /> // sliderMdClasses.thumb = 'MuiSlider-thumb'
<SliderJoy /> // sliderJoyClasses.thumb = 'MuiSlider-thumb'
<SliderUnstyled /> // sliderUnstyledClasses.thumb = 'MuiSliderUnstyled-thumb'

I like how it feels predictable, but I don't like how some of the unstyled components are re-exported as is from Joy UI or Material UI and hence would require us to find a way to customize the class names, seems too much overhead to implement in production to stay clear & predictable.

What's best? It's off my hands at this point, I have tried to share all of my thoughts on this, and I trust we will pick something that maximizes "simplicity".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A. CompanyComponentName

For developers that want to apply global CSS to customize the components => we would have to tell them: don't

Why would you like to limit this way of customization? If someone prefers this way (as it's likely the easiest and doesn't require any styling libraries or preprocessors), I would let them.

B. Current tradeoff

To me option B is a no-go - why would Material and Base have the same prefix and Joy another one? It would confuse people.

C. ProductComponentName

Base" is longer to type and feels a bit less unique to avoid conflicts.

We can discuss the prefixes for each product. I don't insist on the prefix for MUI Base components to be Base

D. CompanyModuleExportName

This solution creates the longest class names.

I don't like how some of the unstyled components are re-exported as is from Joy UI or Material UI and hence would require us to find a way to customize the class names

It's a problem present in C as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of all the options here, I like A the best for the sake of simplicity. I also really like it from a branding angle, reinforcing MUI as a brand vs its products, while also showcasing the ways in which they are comparable and to some extent interchangeable.

The only thing that feels a bit incongruous to me is the fact that we use Unstyled when referring to Base components—if I'm following the pattern of sliderMdClasses and sliderJoyClasses then I would expect to see SliderBase and sliderBaseClasses rather than sliderUnstyledClasses. In other words, there's an extra step required to understand that Unstyled = Base. It's minor, but it feels like it breaks the pattern. On second thought I guess it doesn't necessarily break the pattern. It's just maybe not obvious that Unstyled = Base.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would you like to limit this way of customization?

@michaldudak I think that the reasoning goes the other way around: What do we gain by dropping this support? Are there more pros than cons?

B is a no-go

I agree it's weird, and a convention harder to learn for developers.

D. It's a problem present in C as well.

I don't see this problem in D, maybe only because I have renamed the exports to avoid JavaScript variable conflicts in the example? In practice, developers won't do it like this, maybe I should haven't have renamed the exports after import 😁

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are moving the discussion back to #33260.

}

const inputBaseClasses: InputUnstyledClasses = generateUtilityClasses('MuiInput', [
const inputUnstyledClasses: InputUnstyledClasses = generateUtilityClasses('BaseInput', [
'root',
'formControl',
'focused',
Expand All @@ -46,4 +46,4 @@ const inputBaseClasses: InputUnstyledClasses = generateUtilityClasses('MuiInput'
'adornedEnd',
]);

export default inputBaseClasses;
export default inputUnstyledClasses;
11 changes: 6 additions & 5 deletions packages/mui-base/src/MenuItemUnstyled/menuItemUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,12 +10,13 @@ export interface MenuItemUnstyledClasses {
export type MenuItemUnstyledClassKey = keyof MenuItemUnstyledClasses;

export function getMenuItemUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiMenuItemUnstyled', slot);
return generateUtilityClass('BaseMenuItem', slot);
}

const menuItemUnstyledClasses: MenuItemUnstyledClasses = generateUtilityClasses(
'MuiMenuItemUnstyled',
['root', 'disabled', 'focusVisible'],
);
const menuItemUnstyledClasses: MenuItemUnstyledClasses = generateUtilityClasses('BaseMenuItem', [
'root',
'disabled',
'focusVisible',
]);

export default menuItemUnstyledClasses;
4 changes: 2 additions & 2 deletions packages/mui-base/src/MenuUnstyled/menuUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,10 +10,10 @@ export interface MenuUnstyledClasses {
export type MenuUnstyledClassKey = keyof MenuUnstyledClasses;

export function getMenuUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiMenuUnstyled', slot);
return generateUtilityClass('BaseMenu', slot);
}

const menuUnstyledClasses: MenuUnstyledClasses = generateUtilityClasses('MuiMenuUnstyled', [
const menuUnstyledClasses: MenuUnstyledClasses = generateUtilityClasses('BaseMenu', [
'root',
'listbox',
'expanded',
Expand Down
1 change: 1 addition & 0 deletions packages/mui-base/src/ModalUnstyled/modalUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ export interface ModalUnstyledClasses {

export type ModalUnstyledClassKey = keyof ModalUnstyledClasses;

// TODO: change `MuiModal` to 'BaseModal` after it's possible to customize the prefix from Material UI components.
export function getModalUtilityClass(slot: string): string {
return generateUtilityClass('MuiModal', slot);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-base/src/OptionGroupUnstyled/optionGroupUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,11 +10,11 @@ export interface OptionGroupUnstyledClasses {
export type OptionGroupUnstyledClassKey = keyof OptionGroupUnstyledClasses;

export function getOptionGroupUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiOptionGroupUnstyled', slot);
return generateUtilityClass('BaseOptionGroup', slot);
}

const optionGroupUnstyledClasses: OptionGroupUnstyledClasses = generateUtilityClasses(
'MuiOptionGroupUnstyled',
'BaseOptionGroup',
['root', 'label', 'list'],
);

Expand Down
4 changes: 2 additions & 2 deletions packages/mui-base/src/OptionUnstyled/optionUnstyledClasses.tsx
View file
Open in desktop
Expand Up @@ -11,10 +11,10 @@ export interface OptionUnstyledClasses {
export type OptionUnstyledClassKey = keyof OptionUnstyledClasses;

export function getOptionUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiOptionUnstyled', slot);
return generateUtilityClass('BaseOption', slot);
}

const optionUnstyledClasses: OptionUnstyledClasses = generateUtilityClasses('MuiOptionUnstyled', [
const optionUnstyledClasses: OptionUnstyledClasses = generateUtilityClasses('BaseOption', [
'root',
'disabled',
'selected',
Expand Down
34 changes: 17 additions & 17 deletions packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx
View file
Open in desktop
Expand Up @@ -144,11 +144,11 @@ describe('SelectUnstyled', () => {
const listbox = getByRole('listbox');

userEvent.keyPress(listbox, { key: 'd' });
expect(getByText('Dragon Fruit')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Dragon Fruit')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'r' });
expect(getByText('Dragon Fruit')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Dragon Fruit')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'z' });
expect(getByText('Dragon Fruit')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Dragon Fruit')).to.have.class('BaseOption-highlighted');
});

it('navigate to next element with same starting character on repeated keys', () => {
Expand All @@ -171,11 +171,11 @@ describe('SelectUnstyled', () => {
const listbox = getByRole('listbox');

userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Cherry')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Cherry')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Calamondin')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Calamondin')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Cherry')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Cherry')).to.have.class('BaseOption-highlighted');
});

it('navigate using the label prop', () => {
Expand Down Expand Up @@ -210,11 +210,11 @@ describe('SelectUnstyled', () => {
const listbox = getByRole('listbox');

userEvent.keyPress(listbox, { key: 'd' });
expect(getByTestId('5')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByTestId('5')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'r' });
expect(getByTestId('5')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByTestId('5')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'z' });
expect(getByTestId('5')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByTestId('5')).to.have.class('BaseOption-highlighted');
});

it('skips the non-stringifiable options', () => {
Expand All @@ -240,11 +240,11 @@ describe('SelectUnstyled', () => {
const listbox = getByRole('listbox');

userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Cherry')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Cherry')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Calamondin')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Calamondin')).to.have.class('BaseOption-highlighted');
userEvent.keyPress(listbox, { key: 'c' });
expect(getByText('Cherry')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Cherry')).to.have.class('BaseOption-highlighted');
});

it('navigate to options with diacritic characters', () => {
Expand All @@ -266,12 +266,12 @@ describe('SelectUnstyled', () => {
const listbox = getByRole('listbox');

userEvent.keyPress(listbox, { key: 'b' });
expect(getByText('Ba')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Ba')).to.have.class('BaseOption-highlighted');

userEvent.keyPress(listbox, { key: 'Control' });
userEvent.keyPress(listbox, { key: 'Alt' });
userEvent.keyPress(listbox, { key: 'ą' });
expect(getByText('Bą')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('Bą')).to.have.class('BaseOption-highlighted');
});

it('navigate to next options with beginning diacritic characters', () => {
Expand All @@ -294,17 +294,17 @@ describe('SelectUnstyled', () => {
userEvent.keyPress(listbox, { key: 'Control' });
userEvent.keyPress(listbox, { key: 'Alt' });
userEvent.keyPress(listbox, { key: 'ą' });
expect(getByText('ąa')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('ąa')).to.have.class('BaseOption-highlighted');

userEvent.keyPress(listbox, { key: 'Alt' });
userEvent.keyPress(listbox, { key: 'Control' });
userEvent.keyPress(listbox, { key: 'ą' });
expect(getByText('ąb')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('ąb')).to.have.class('BaseOption-highlighted');

userEvent.keyPress(listbox, { key: 'Control' });
userEvent.keyPress(listbox, { key: 'AltGraph' });
userEvent.keyPress(listbox, { key: 'ą' });
expect(getByText('ąc')).to.have.class('MuiOptionUnstyled-highlighted');
expect(getByText('ąc')).to.have.class('BaseOption-highlighted');
});
});

Expand Down
4 changes: 2 additions & 2 deletions packages/mui-base/src/SelectUnstyled/selectUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -15,10 +15,10 @@ export interface SelectUnstyledClasses {
export type SelectUnstyledClassKey = keyof SelectUnstyledClasses;

export function getSelectUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiSelectUnstyled', slot);
return generateUtilityClass('BaseSelect', slot);
}

const selectUnstyledClasses: SelectUnstyledClasses = generateUtilityClasses('MuiSelectUnstyled', [
const selectUnstyledClasses: SelectUnstyledClasses = generateUtilityClasses('BaseSelect', [
'root',
'button',
'listbox',
Expand Down
1 change: 1 addition & 0 deletions packages/mui-base/src/SliderUnstyled/sliderUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -46,6 +46,7 @@ export interface SliderUnstyledClasses {

export type SliderUnstyledClassKey = keyof SliderUnstyledClasses;

// TODO: change `MuiSlider` to 'BaseSlider` after it's possible to customize the prefix from Material UI components.
export function getSliderUtilityClass(slot: string): string {
return generateUtilityClass('MuiSlider', slot);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-base/src/SwitchUnstyled/switchUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -23,10 +23,10 @@ export interface SwitchUnstyledClasses {
export type SwitchUnstyledClassKey = keyof SwitchUnstyledClasses;

export function getSwitchUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiSwitch', slot);
return generateUtilityClass('BaseSwitch', slot);
}

const switchUnstyledClasses: SwitchUnstyledClasses = generateUtilityClasses('MuiSwitch', [
const switchUnstyledClasses: SwitchUnstyledClasses = generateUtilityClasses('BaseSwitch', [
'root',
'input',
'track',
Expand Down
10 changes: 5 additions & 5 deletions packages/mui-base/src/TabPanelUnstyled/tabPanelUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -9,12 +9,12 @@ export interface TabPanelUnstyledClasses {
export type TabPanelUnstyledClassKey = keyof TabPanelUnstyledClasses;

export function getTabPanelUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('TabPanelUnstyled', slot);
return generateUtilityClass('BaseTabPanel', slot);
}

const tabPanelUnstyledClasses: TabPanelUnstyledClasses = generateUtilityClasses(
'TabPanelUnstyled',
['root', 'hidden'],
);
const tabPanelUnstyledClasses: TabPanelUnstyledClasses = generateUtilityClasses('BaseTabPanel', [
'root',
'hidden',
]);

export default tabPanelUnstyledClasses;
4 changes: 2 additions & 2 deletions packages/mui-base/src/TabUnstyled/tabUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,10 +10,10 @@ export interface TabUnstyledClasses {
export type TabUnstyledClassKey = keyof TabUnstyledClasses;

export function getTabUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('TabUnstyled', slot);
return generateUtilityClass('BaseTab', slot);
}

const tabUnstyledClasses: TabUnstyledClasses = generateUtilityClasses('TabUnstyled', [
const tabUnstyledClasses: TabUnstyledClasses = generateUtilityClasses('BaseTab', [
'root',
'selected',
'disabled',
Expand Down
8 changes: 4 additions & 4 deletions packages/mui-base/src/TablePaginationUnstyled/tablePaginationUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -29,11 +29,11 @@ export interface TablePaginationUnstyledClasses {
export type TablePaginationUnstyledClassKey = keyof TablePaginationUnstyledClasses;

export function getTablePaginationUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('MuiTablePaginationUnstyled', slot);
return generateUtilityClass('BaseTablePagination', slot);
}

const tablePaginationClasses: TablePaginationUnstyledClasses = generateUtilityClasses(
'MuiTablePaginationUnstyled',
const tablePaginationUnstyledClasses: TablePaginationUnstyledClasses = generateUtilityClasses(
'BaseTablePagination',
[
'root',
'toolbar',
Expand All @@ -49,4 +49,4 @@ const tablePaginationClasses: TablePaginationUnstyledClasses = generateUtilityCl
],
);

export default tablePaginationClasses;
export default tablePaginationUnstyledClasses;
11 changes: 6 additions & 5 deletions packages/mui-base/src/TabsListUnstyled/tabsListUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,12 +10,13 @@ export interface TabsListUnstyledClasses {
export type TabsListUnstyledClassKey = keyof TabsListUnstyledClasses;

export function getTabsListUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('TabsListUnstyled', slot);
return generateUtilityClass('BaseTabsList', slot);
}

const tabsListUnstyledClasses: TabsListUnstyledClasses = generateUtilityClasses(
'TabsListUnstyled',
['root', 'horizontal', 'vertical'],
);
const tabsListUnstyledClasses: TabsListUnstyledClasses = generateUtilityClasses('BaseTabsList', [
'root',
'horizontal',
'vertical',
]);

export default tabsListUnstyledClasses;
4 changes: 2 additions & 2 deletions packages/mui-base/src/TabsUnstyled/tabsUnstyledClasses.ts
View file
Open in desktop
Expand Up @@ -10,10 +10,10 @@ export interface TabsUnstyledClasses {
export type TabsUnstyledClassKey = keyof TabsUnstyledClasses;

export function getTabsUnstyledUtilityClass(slot: string): string {
return generateUtilityClass('TabsUnstyled', slot);
return generateUtilityClass('BaseTabs', slot);
}

const tabsUnstyledClasses: TabsUnstyledClasses = generateUtilityClasses('TabsUnstyled', [
const tabsUnstyledClasses: TabsUnstyledClasses = generateUtilityClasses('BaseTabs', [
'root',
'horizontal',
'vertical',
Expand Down