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

[material-ui][Select] Apply missing root class #42975

Closed
wants to merge 13 commits into from
Closed

[material-ui][Select] Apply missing root class #42975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5db00d0
Apply missing root class
sai6855 Jul 17, 2024
aaaada8
fix test
sai6855 Jul 17, 2024
2d50c77
fix
sai6855 Jul 17, 2024
16a7998
prettier
sai6855 Jul 17, 2024
3453b41
fix
sai6855 Jul 17, 2024
2a66f17
remove deepmerge
sai6855 Jul 17, 2024
92ad8b2
fix test
sai6855 Jul 17, 2024
69ed4cc
fix errorr class
sai6855 Jul 17, 2024
5a310cb
fix
sai6855 Jul 17, 2024
fea0a5e
Merge branch 'next' into fix-class-select
sai6855 Aug 8, 2024
04be680
redo logic
sai6855 Aug 8, 2024
bc8f1d7
Merge branch 'master' into fix-class-select
sai6855 Jan 2, 2025
addf182
Merge branch 'master' into fix-class-select
sai6855 Jan 2, 2025
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
10 changes: 9 additions & 1 deletion packages/mui-material/src/Select/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import deepmerge from '@mui/utils/deepmerge';
import composeClasses from '@mui/utils/composeClasses';
import getReactElementRef from '@mui/utils/getReactElementRef';
import SelectInput from './SelectInput';
import formControlState from '../FormControl/formControlState';
Expand All @@ -16,11 +17,18 @@ import { useDefaultProps } from '../DefaultPropsProvider';
import useForkRef from '../utils/useForkRef';
import { styled } from '../zero-styled';
import rootShouldForwardProp from '../styles/rootShouldForwardProp';
import { getSelectUtilityClasses } from './selectClasses';

const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;

return classes;
const slots = {
root: ['root'],
};

const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);

return { ...classes, ...composedClasses };
Copy link
Contributor Author

@sai6855 sai6855 Aug 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This implementation is taken from here

material-ui/packages/mui-material/src/Button/Button.js

Lines 39 to 42 in 75c24b0

...classes, // forward the focused, disabled, etc. classes to the ButtonBase
...composedClasses,
};
};
.

without spreading .MuiTablePagination-select isn't getting applied correctly and lead to argos errors like these https://app.argos-ci.com/mui/material-ui/builds/29939/99301860

};

const styledRootConfig = {
Expand Down
15 changes: 15 additions & 0 deletions packages/mui-material/src/Select/Select.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,21 @@ describe('<Select />', () => {
expect(container.querySelector('input')).to.have.property('value', '10');
});

it('should have root class', () => {
const { container } = render(
<Select value={10}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>,
);

expect(container.querySelector(`.${classes.root}`)).not.to.equal(null);
});

specify('the trigger is in tab order', () => {
const { getByRole } = render(
<Select value="">
Expand Down
Loading