From e19879c700c6458456436a194d8413fbae42ab89 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 7 Aug 2023 23:03:14 +0800
Subject: [PATCH] Update api docs

---
 docs/pages/base-ui/api/number-input.json      | 30 ++++++++++++
 .../number-input/number-input.json            | 47 ++++++++++++++++++-
 .../Unstable_NumberInput/NumberInput.types.ts | 30 +++++++++---
 3 files changed, 100 insertions(+), 7 deletions(-)

diff --git a/docs/pages/base-ui/api/number-input.json b/docs/pages/base-ui/api/number-input.json
index f289da20b97203..a0d7fab153a16d 100644
--- a/docs/pages/base-ui/api/number-input.json
+++ b/docs/pages/base-ui/api/number-input.json
@@ -43,6 +43,36 @@
   },
   "name": "NumberInput",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "'div'",
+      "class": ".MuiNumberInput-root"
+    },
+    {
+      "name": "input",
+      "description": "The component that renders the input.",
+      "default": "'input'",
+      "class": ".MuiNumberInput-input"
+    },
+    {
+      "name": "incrementButton",
+      "description": "The component that renders the increment button.",
+      "default": "'button'",
+      "class": ".MuiNumberInput-incrementButton"
+    },
+    {
+      "name": "decrementButton",
+      "description": "The component that renders the decrement button.",
+      "default": "'button'",
+      "class": ".MuiNumberInput-decrementButton"
+    }
+  ],
+  "classes": {
+    "classes": ["disabled", "error", "focused", "formControl", "readOnly"],
+    "globalClasses": { "focused": "Mui-focused", "disabled": "Mui-disabled", "error": "Mui-error" }
+  },
   "spread": true,
   "muiName": "MuiNumberInput",
   "forwardsRefTo": "HTMLDivElement",
diff --git a/docs/translations/api-docs-base/number-input/number-input.json b/docs/translations/api-docs-base/number-input/number-input.json
index b588e42ddadeb0..321d31af64704a 100644
--- a/docs/translations/api-docs-base/number-input/number-input.json
+++ b/docs/translations/api-docs-base/number-input/number-input.json
@@ -40,5 +40,50 @@
     "step": { "description": "The amount that the value changes on each increment or decrement." },
     "value": { "description": "The current value. Use when the component is controlled." }
   },
-  "classDescriptions": {}
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "formControl": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the component is a descendant of <code>FormControl</code>"
+    },
+    "focused": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "the component is focused"
+    },
+    "disabled": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "readOnly": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>readOnly={true}</code>"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
+    },
+    "input": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the input element"
+    },
+    "incrementButton": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the increment button element"
+    },
+    "decrementButton": {
+      "description": "Class name applied to {{nodeName}}.",
+      "nodeName": "the decrement button element"
+    }
+  },
+  "slotDescriptions": {
+    "root": "The component that renders the root.",
+    "input": "The component that renders the input.",
+    "incrementButton": "The component that renders the increment button.",
+    "decrementButton": "The component that renders the decrement button."
+  }
 }
diff --git a/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts b/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts
index 513ba18a0a3b1d..16406b02e37f51 100644
--- a/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts
+++ b/packages/mui-base/src/Unstable_NumberInput/NumberInput.types.ts
@@ -44,14 +44,32 @@ export type NumberInputOwnProps = Omit<UseNumberInputParameters, 'error'> & {
    * Either a string to use a HTML element or a component.
    * @default {}
    */
-  slots?: {
-    root?: React.ElementType;
-    input?: React.ElementType;
-    incrementButton?: React.ElementType;
-    decrementButton?: React.ElementType;
-  };
+  slots?: NumberInputSlots;
 };
 
+export interface NumberInputSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the input.
+   * @default 'input'
+   */
+  input?: React.ElementType;
+  /**
+   * The component that renders the increment button.
+   * @default 'button'
+   */
+  incrementButton?: React.ElementType;
+  /**
+   * The component that renders the decrement button.
+   * @default 'button'
+   */
+  decrementButton?: React.ElementType;
+}
+
 export interface NumberInputTypeMap<
   AdditionalProps = {},
   RootComponentType extends React.ElementType = 'div',