[material-ui][OutlinedInput] Add missing notchedOutline slot (@siriwatknp) (#45938)

Co-authored-by: Siriwat K <[email protected]>
Co-authored-by: sai chand <[email protected]>

Author: 3 people

docs/pages/material-ui/api/outlined-input.json

@@ -42,8 +42,18 @@
     "readOnly": { "type": { "name": "bool" } },
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ input?: object, notchedOutline?: func<br>&#124;&nbsp;object, root?: object }"
+      },
+      "default": "{}"
+    },
     "slots": {
-      "type": { "name": "shape", "description": "{ input?: elementType, root?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ input?: elementType, notchedOutline?: elementType, root?: elementType }"
+      },
       "default": "{}"
     },
     "startAdornment": { "type": { "name": "node" } },

docs/translations/api-docs/outlined-input/outlined-input.json

@@ -68,9 +68,8 @@
       "description": "If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component."
     },
     "rows": { "description": "Number of rows to display when multiline option is set to true." },
-    "slots": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "startAdornment": { "description": "Start <code>InputAdornment</code> for this component." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."

packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts

@@ -1,10 +1,35 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import {
+  CreateSlotsAndSlotProps,
+  SlotProps,
+  InternalStandardProps as StandardProps,
+  Theme,
+} from '..';
 import { InputBaseProps } from '../InputBase';
 import { OutlinedInputClasses } from './outlinedInputClasses';
 
-export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
+interface OutlinedInputSlots {
+  /**
+   * The component that renders the notchedOutline slot.
+   * @default NotchedOutline
+   */
+  notchedOutline: React.ElementType;
+}
+
+type OutlinedInputSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  OutlinedInputSlots,
+  {
+    notchedOutline: SlotProps<'fieldset', {}, OutlinedInputOwnerState>;
+  }
+> & {
+  slots?: InputBaseProps['slots'];
+  slotProps?: InputBaseProps['slotProps'];
+};
+
+export interface OutlinedInputProps
+  extends Omit<StandardProps<InputBaseProps>, 'slots' | 'slotProps'>,
+    OutlinedInputSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -24,6 +49,8 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
   sx?: SxProps<Theme>;
 }
 
+export interface OutlinedInputOwnerState extends Omit<OutlinedInputProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos:

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

@@ -18,6 +18,7 @@ import InputBase, {
   InputBaseRoot,
   InputBaseInput,
 } from '../InputBase/InputBase';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
@@ -197,6 +198,7 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -227,23 +229,35 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
 
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+    },
+    additionalProps: {
+      label:
+        label != null && label !== '' && fcs.required ? (
+          <React.Fragment>
+            {label}
+            &thinsp;{'*'}
+          </React.Fragment>
+        ) : (
+          label
+        ),
+    },
+  });
+
   return (
     <InputBase
       slots={{ root: RootSlot, input: InputSlot }}
+      slotProps={slotProps}
       renderSuffix={(state) => (
-        <NotchedOutlineRoot
-          ownerState={ownerState}
-          className={classes.notchedOutline}
-          label={
-            label != null && label !== '' && fcs.required ? (
-              <React.Fragment>
-                {label}
-                &thinsp;{'*'}
-              </React.Fragment>
-            ) : (
-              label
-            )
-          }
+        <NotchedSlot
+          {...notchedProps}
           notched={
             typeof notched !== 'undefined'
               ? notched
@@ -404,15 +418,22 @@ OutlinedInput.propTypes /* remove-proptypes */ = {
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object,
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
     input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
     root: PropTypes.elementType,
   }),
   /**

packages/mui-material/src/OutlinedInput/OutlinedInput.spec.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+function NoNotched() {
+  return null;
+}
+
+<OutlinedInput
+  slots={{
+    notchedOutline: NoNotched,
+  }}
+/>;
+<OutlinedInput
+  slotProps={{
+    notchedOutline: {
+      className: 'hidden',
+    },
+  }}
+/>;

packages/mui-material/src/OutlinedInput/OutlinedInput.test.js

@@ -9,7 +9,11 @@ import describeConformance from '../../test/describeConformance';
 describe('<OutlinedInput />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<OutlinedInput />, () => ({
+  const CustomNotchedOutline = React.forwardRef(({ notched, ownerState, ...props }, ref) => (
+    <i ref={ref} data-testid="custom" {...props} />
+  ));
+
+  describeConformance(<OutlinedInput label="Label" />, () => ({
     classes,
     inheritComponent: InputBase,
     render,
@@ -18,11 +22,15 @@ describe('<OutlinedInput />', () => {
     testDeepOverrides: { slotName: 'input', slotClassName: classes.input },
     testVariantProps: { variant: 'contained', fullWidth: true },
     testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
-    testLegacyComponentsProp: true,
+    testLegacyComponentsProp: ['root', 'input'],
     slots: {
       // can't test with DOM element as InputBase places an ownerState prop on it unconditionally.
       root: { expectedClassName: classes.root, testWithElement: null },
       input: { expectedClassName: classes.input, testWithElement: null },
+      notchedOutline: {
+        expectedClassName: classes.notchedOutline,
+        testWithElement: CustomNotchedOutline,
+      },
     },
     skip: [
       'componentProp',