From 48290dd37571ed4ed8313435e5079d5375709112 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Mon, 1 Aug 2022 13:16:37 +0200
Subject: [PATCH] [system] Make @emotion/* fully supported in the System
 (#33205)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: Michał Dudak <michal@dudak.me>
---
 packages/mui-material/src/Badge/Badge.js      |  2 +-
 packages/mui-material/src/Button/Button.js    |  4 +-
 .../mui-material/src/Button/Button.test.js    | 61 +++++++++++++++++++
 .../src/ButtonBase/TouchRipple.js             |  2 +-
 .../mui-material/src/Select/SelectInput.js    |  2 +-
 .../src/composeClasses/composeClasses.test.ts |  8 +--
 .../src/composeClasses/composeClasses.ts      |  2 +-
 .../fixtures/Button/EmotionCompat.js          | 27 ++++++++
 8 files changed, 98 insertions(+), 10 deletions(-)
 create mode 100644 test/regressions/fixtures/Button/EmotionCompat.js

diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
index 6123733758546f..731c7a5af48a77 100644
--- a/packages/mui-material/src/Badge/Badge.js
+++ b/packages/mui-material/src/Badge/Badge.js
@@ -258,7 +258,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
         Badge: BadgeBadge,
         ...components,
       }}
-      className={clsx(className, classes.root, componentsProps.root?.className)}
+      className={clsx(componentsProps.root?.className, classes.root, className)}
       componentsProps={{
         root: {
           ...componentsProps.root,
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index 46e08ee91794ad..37909a18464889 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -322,7 +322,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
-  const classes = useUtilityClasses(ownerState);
+  const { root: classesRoot, ...classes } = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && (
     <ButtonStartIcon className={classes.startIcon} ownerState={ownerState}>
@@ -339,7 +339,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(className, contextProps.className)}
+      className={clsx(contextProps.className, classesRoot, className)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js
index 1a1e6983eb4a93..b7686fe2f9b362 100644
--- a/packages/mui-material/src/Button/Button.test.js
+++ b/packages/mui-material/src/Button/Button.test.js
@@ -4,6 +4,7 @@ import { describeConformance, act, createRenderer, fireEvent, screen } from 'tes
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses as classes } from '@mui/material/Button';
 import ButtonBase, { touchRippleClasses } from '@mui/material/ButtonBase';
+import { ClassNames } from '@emotion/react';
 
 describe('<Button />', () => {
   const { render, renderToString } = createRenderer();
@@ -634,4 +635,64 @@ describe('<Button />', () => {
     );
     expect(container.querySelectorAll(`.${touchRippleClasses.root}`)).to.have.length(1);
   });
+
+  describe('Emotion compatibility', () => {
+    it('classes.root should overwrite builtin styles.', () => {
+      // This is pink
+      const color = 'rgb(255, 192, 204)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button color="primary" classes={{ root: css({ color }) }}>
+              This text should be pink
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(color);
+    });
+
+    it('className should overwrite classes.root and builtin styles.', () => {
+      const colorPink = 'rgb(255, 192, 204)';
+      const colorRed = 'rgb(255, 0, 0)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button
+              color="primary"
+              className={css({ color: colorRed })}
+              classes={{ root: css({ color: colorPink }) }}
+            >
+              This text should be red
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(colorRed);
+    });
+
+    it('classes.* should overwrite builtin styles.', () => {
+      // This is pink
+      const color = 'rgb(255, 192, 204)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button color="primary" classes={{ text: css({ color }) }}>
+              This text should be pink
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(color);
+    });
+  });
 });
diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js
index e192ea8f1907da..2e299b19d0b3b0 100644
--- a/packages/mui-material/src/ButtonBase/TouchRipple.js
+++ b/packages/mui-material/src/ButtonBase/TouchRipple.js
@@ -305,7 +305,7 @@ const TouchRipple = React.forwardRef(function TouchRipple(inProps, ref) {
 
   return (
     <TouchRippleRoot
-      className={clsx(classes.root, touchRippleClasses.root, className)}
+      className={clsx(touchRippleClasses.root, classes.root, className)}
       ref={container}
       {...other}
     >
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index e1d13d6502c31e..81f92e9c4942d1 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -518,7 +518,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         onFocus={onFocus}
         {...SelectDisplayProps}
         ownerState={ownerState}
-        className={clsx(classes.select, className, SelectDisplayProps.className)}
+        className={clsx(SelectDisplayProps.className, classes.select, className)}
         // The id is required for proper a11y
         id={buttonId}
       >
diff --git a/packages/mui-utils/src/composeClasses/composeClasses.test.ts b/packages/mui-utils/src/composeClasses/composeClasses.test.ts
index 61af819b25efc8..310c217bf8414a 100644
--- a/packages/mui-utils/src/composeClasses/composeClasses.test.ts
+++ b/packages/mui-utils/src/composeClasses/composeClasses.test.ts
@@ -32,8 +32,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root standardOverride MuiTest-standard',
-      slot: 'slotOverride MuiTest-slot',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 
@@ -51,8 +51,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root standardOverride MuiTest-standard',
-      slot: 'slotOverride MuiTest-slot',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 });
diff --git a/packages/mui-utils/src/composeClasses/composeClasses.ts b/packages/mui-utils/src/composeClasses/composeClasses.ts
index 633f38d55d1d2e..5b4726e208699a 100644
--- a/packages/mui-utils/src/composeClasses/composeClasses.ts
+++ b/packages/mui-utils/src/composeClasses/composeClasses.ts
@@ -12,10 +12,10 @@ export default function composeClasses<ClassKey extends string>(
       output[slot] = slots[slot]
         .reduce((acc, key) => {
           if (key) {
+            acc.push(getUtilityClass(key));
             if (classes && classes[key]) {
               acc.push(classes[key]);
             }
-            acc.push(getUtilityClass(key));
           }
           return acc;
         }, [] as string[])
diff --git a/test/regressions/fixtures/Button/EmotionCompat.js b/test/regressions/fixtures/Button/EmotionCompat.js
new file mode 100644
index 00000000000000..e7734695b6e496
--- /dev/null
+++ b/test/regressions/fixtures/Button/EmotionCompat.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ClassNames } from '@emotion/react';
+import Button from '@mui/material/Button';
+
+export default function EmotionCompat() {
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <React.Fragment>
+          <Button color="primary" classes={{ root: css({ color: 'pink' }) }}>
+            This text should be pink
+          </Button>
+          <Button
+            color="primary"
+            className={css({ color: 'red' })}
+            classes={{ root: css({ color: 'pink' }) }}
+          >
+            This text should be red
+          </Button>
+          <Button color="primary" classes={{ text: css({ color: 'pink' }) }}>
+            This text should be pink
+          </Button>
+        </React.Fragment>
+      )}
+    </ClassNames>
+  );
+}