[material-ui] Revert visual regressions from #42283 (#43364)

Author: ZeeshanTamboli

packages/mui-material/src/InputBase/InputBase.js

@@ -182,7 +182,7 @@ export const InputBaseInput = styled('input', {
     display: 'block',
     // Make the flex item shrink with Firefox
     minWidth: 0,
-    flexGrow: 1,
+    width: '100%',
     '&::-webkit-input-placeholder': placeholder,
     '&::-moz-placeholder': placeholder, // Firefox 19+
     '&::-ms-input-placeholder': placeholder, // Edge

packages/mui-material/src/StepLabel/StepLabel.js

@@ -103,6 +103,7 @@ const StepLabelIconContainer = styled('span', {
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer,
 })({
+  flexShrink: 0,
   display: 'flex',
   paddingRight: 8,
   [`&.${stepLabelClasses.alternativeLabel}`]: {

test/regressions/fixtures/StepLabel/NoShrinkIcon.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+
+function TestIcon() {
+  return <div style={{ border: '1px solid red' }}>should not shrink</div>;
+}
+
+const steps = ['Step 1', 'Step 2'];
+
+export default function CustomizedSteppers() {
+  return (
+    <Stepper sx={{ width: 200 }}>
+      {steps.map((label) => (
+        <Step key={label}>
+          <StepLabel StepIconComponent={TestIcon} sx={{ width: '1px' }}>
+            {label}
+          </StepLabel>
+        </Step>
+      ))}
+    </Stepper>
+  );
+}

test/regressions/fixtures/TextField/ConstrainedTextField.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+
+// TextField shouldn't overflow the red bordered container
+export default function ConstrainedTextField() {
+  return (
+    <div
+      style={{
+        width: 100,
+        border: '1px solid red',
+      }}
+    >
+      <TextField label="Outlined" variant="outlined" />
+    </div>
+  );
+}