[docs][base-ui] Update number input API docs (#38363)

mui · Aug 9, 2023 · 1b38b4b · 1b38b4b
1 parent 6265a00
commit 1b38b4b
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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',