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

[sai6855]

Docs says .MuiSelect-root is applied to root component but it's not applied to any element (check useEffect code in before sandbox to verify this) . This PR adds root class to root component

Before: https://stackblitz.com/edit/react-mxoqrt?file=Demo.tsx

After: https://codesandbox.io/s/quirky-wind-zpyc6c?file=/src/Demo.tsx

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-42975--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against addf182

[sai6855]

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

[DiegoAndai]

I wonder if we might be missing something here. There is code to handle the root class: https://github.com/mui/material-ui/pull/42975/files#diff-3b8536ef0001d400b722b173fd9a64c9ce4eb8127bba26f7865977c5bb1a254fR87

Are we sure there's no handling of the root class that we're not seeing?

@sai6855, may I ask you to review when that code in line 87 was added and if it ever worked?

[sai6855]

@sai6855, may I ask you to review when that code in line 87 was added and if it ever worked?

Line 87 was added by me 😑 in this PR #38424, and PR didn't have any test that tests presence of root class on root element.

If remember correctly, my reasoning for not adding test was, i thought following test would be good enough. Turs out it's not.

Reason this test passed is, root was manually added on line 225 and presence of root class was tested on line 234. If line 225 was removed, line 234 test wouldn't have passed

material-ui/packages-internal/test-utils/src/describeConformance.tsx

Lines 214 to 236 in 6bb06b9

	it('applies the root class to the root component if it has this class', async () => {
	const { classes, render, skip } = getOptions();
	if (classes.root == null) {
	return;
	}
	const className = randomStringValue();
	const classesRootClassname = randomStringValue();
	const { container } = await render(
	React.cloneElement(element, {
	className,
	classes: { ...classes, root: `${classes.root} ${classesRootClassname}` },
	}),
	);
	// we established that the root component renders the outermost host previously. We immediately
	// jump to the host component because some components pass the `root` class
	// to the `classes` prop of the root component.
	// https://github.com/mui/material-ui/blob/f9896bcd129a1209153106296b3d2487547ba205/packages/material-ui/src/OutlinedInput/OutlinedInput.js#L101
	expect(container.firstChild).to.have.class(className);
	expect(container.firstChild).to.have.class(classes.root);
	expect(document.querySelectorAll(`.${classes.root}`).length).to.equal(1);

[aarongarciah]

@sai6855 @DiegoAndai is this PR still relevant?

[DiegoAndai]

This is still relevant, and reviewing again I think this is the correct solution. Sorry for blocking it before. @sai6855 may I ask you to update the PR?

[DiegoAndai]

@sai6855 to fix the argos build, lets close this PR and open a new one with the same changes.

[sai6855]

lets close this PR and open a new one with the same changes.

opened new PR here #44928