[docs][material] Keep consistency in description of classes (#36631)

mui · Mar 31, 2023 · 26cf8a1 · 26cf8a1
1 parent 167e130
commit 26cf8a1
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 92 deletions.
diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json
@@ -19,38 +19,38 @@
     "variant": "The variant to use."
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "badge": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the badge `span` element"
     },
     "dot": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>variant=\"dot\"</code>"
     },
     "standard": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>variant=\"standard\"</code>"
     },
     "anchorOriginTopRight": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
     },
     "anchorOriginBottomRight": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
     },
     "anchorOriginTopLeft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
     },
     "anchorOriginBottomLeft": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
     },
@@ -90,52 +90,52 @@
       "conditions": "<code>color=\"warning\"</code>"
     },
     "anchorOriginTopRightRectangular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"rectangular\"</code>"
     },
     "anchorOriginBottomRightRectangular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"rectangular\"</code>"
     },
     "anchorOriginTopLeftRectangular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"rectangular\"</code>"
     },
     "anchorOriginBottomLeftRectangular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"rectangular\"</code>"
     },
     "anchorOriginTopRightCircular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'right' }} overlap=\"circular\"</code>"
     },
     "anchorOriginBottomRightCircular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }} overlap=\"circular\"</code>"
     },
     "anchorOriginTopLeftCircular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'top', 'left' }} overlap=\"circular\"</code>"
     },
     "anchorOriginBottomLeftCircular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }} overlap=\"circular\"</code>"
     },
     "overlapRectangular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>overlap=\"rectangular\"</code>"
     },
     "overlapCircular": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the badge `span` element",
       "conditions": "<code>overlap=\"circular\"</code>"
     }

diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
@@ -33,24 +33,24 @@
     "valueLabelFormat": "The format function the value label&#39;s value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format"
   },
   "classDescriptions": {
-    "root": { "description": "Class name applied to the root element." },
+    "root": { "description": "Styles applied to the root element." },
     "colorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"primary\"</code>"
     },
     "colorSecondary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>color=\"secondary\"</code>"
     },
     "marked": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>marks</code> is provided with at least one label"
     },
     "vertical": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     },
@@ -64,28 +64,19 @@
       "nodeName": "the root",
       "conditions": "a thumb is being dragged"
     },
-    "rail": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the rail element"
-    },
-    "track": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the track element"
-    },
+    "rail": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the rail element" },
+    "track": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the track element" },
     "trackFalse": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track={false}</code>"
     },
     "trackInverted": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>track=\"inverted\"</code>"
     },
-    "thumb": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the thumb element"
-    },
+    "thumb": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the thumb element" },
     "active": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
@@ -96,59 +87,56 @@
       "nodeName": "the thumb element",
       "conditions": "keyboard focused"
     },
-    "mark": {
-      "description": "Class name applied to {{nodeName}}.",
-      "nodeName": "the mark element"
-    },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the mark element" },
     "markActive": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the mark element",
       "conditions": "active (depending on the value)"
     },
     "markLabel": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the mark label element"
     },
     "markLabelActive": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the mark label element",
       "conditions": "active (depending on the value)"
     },
     "sizeSmall": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
     "thumbColorPrimary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
       "conditions": "<code>color=\"primary\"</code>"
     },
     "thumbColorSecondary": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
       "conditions": "<code>color=\"secondary\"</code>"
     },
     "thumbSizeSmall": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb element",
       "conditions": "<code>size=\"small\"</code>"
     },
     "valueLabel": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the thumb label element"
     },
     "valueLabelOpen": {
-      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the thumb label element",
       "conditions": "it's open"
     },
     "valueLabelCircle": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the thumb label's circle element"
     },
     "valueLabelLabel": {
-      "description": "Class name applied to {{nodeName}}.",
+      "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the thumb label's label element"
     }
   }

diff --git a/packages/mui-material/src/Badge/badgeClasses.ts b/packages/mui-material/src/Badge/badgeClasses.ts
@@ -2,21 +2,21 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import generateUtilityClass from '../generateUtilityClass';
 
 export interface BadgeClasses {
-  /** Class name applied to the root element. */
+  /** Styles applied to the root element. */
   root: string;
-  /** Class name applied to the badge `span` element. */
+  /** Styles applied to the badge `span` element. */
   badge: string;
-  /** Class name applied to the badge `span` element if `variant="dot"`. */
+  /** Styles applied to the badge `span` element if `variant="dot"`. */
   dot: string;
-  /** Class name applied to the badge `span` element if `variant="standard"`. */
+  /** Styles applied to the badge `span` element if `variant="standard"`. */
   standard: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
   anchorOriginTopRight: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
   anchorOriginBottomRight: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
   anchorOriginTopLeft: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
   anchorOriginBottomLeft: string;
   /** State class applied to the badge `span` element if `invisible={true}`. */
   invisible: string;
@@ -32,25 +32,25 @@ export interface BadgeClasses {
   colorSuccess: string;
   /** Styles applied to the badge `span` element if `color="warning"`. */
   colorWarning: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
   anchorOriginTopRightRectangular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
   anchorOriginBottomRightRectangular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
   anchorOriginTopLeftRectangular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
   anchorOriginBottomLeftRectangular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
   anchorOriginTopRightCircular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
   anchorOriginBottomRightCircular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
   anchorOriginTopLeftCircular: string;
-  /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+  /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
   anchorOriginBottomLeftCircular: string;
-  /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
+  /** Styles applied to the badge `span` element if `overlap="rectangular"`. */
   overlapRectangular: string;
-  /** Class name applied to the badge `span` element if `overlap="circular"`. */
+  /** Styles applied to the badge `span` element if `overlap="circular"`. */
   overlapCircular: string;
 }
 

diff --git a/packages/mui-material/src/Slider/sliderClasses.ts b/packages/mui-material/src/Slider/sliderClasses.ts
@@ -2,57 +2,57 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import generateUtilityClass from '../generateUtilityClass';
 
 export interface SliderClasses {
-  /** Class name applied to the root element. */
+  /** Styles applied to the root element. */
   root: string;
-  /** Class name applied to the root element if `color="primary"`. */
+  /** Styles applied to the root element if `color="primary"`. */
   colorPrimary: string;
-  /** Class name applied to the root element if `color="secondary"`. */
+  /** Styles applied to the root element if `color="secondary"`. */
   colorSecondary: string;
-  /** Class name applied to the root element if `marks` is provided with at least one label. */
+  /** Styles applied to the root element if `marks` is provided with at least one label. */
   marked: string;
-  /** Class name applied to the root element if `orientation="vertical"`. */
+  /** Styles applied to the root element if `orientation="vertical"`. */
   vertical: string;
   /** State class applied to the root and thumb element if `disabled={true}`. */
   disabled: string;
   /** State class applied to the root if a thumb is being dragged. */
   dragging: string;
-  /** Class name applied to the rail element. */
+  /** Styles applied to the rail element. */
   rail: string;
-  /** Class name applied to the track element. */
+  /** Styles applied to the track element. */
   track: string;
-  /** Class name applied to the root element if `track={false}`. */
+  /** Styles applied to the root element if `track={false}`. */
   trackFalse: string;
-  /** Class name applied to the root element if `track="inverted"`. */
+  /** Styles applied to the root element if `track="inverted"`. */
   trackInverted: string;
-  /** Class name applied to the thumb element. */
+  /** Styles applied to the thumb element. */
   thumb: string;
   /** State class applied to the thumb element if it's active. */
   active: string;
   /** State class applied to the thumb element if keyboard focused. */
   focusVisible: string;
-  /** Class name applied to the mark element. */
+  /** Styles applied to the mark element. */
   mark: string;
-  /** Class name applied to the mark element if active (depending on the value). */
+  /** Styles applied to the mark element if active (depending on the value). */
   markActive: string;
-  /** Class name applied to the mark label element. */
+  /** Styles applied to the mark label element. */
   markLabel: string;
-  /** Class name applied to the mark label element if active (depending on the value). */
+  /** Styles applied to the mark label element if active (depending on the value). */
   markLabelActive: string;
-  /** Class name applied to the root element if `size="small"`. */
+  /** Styles applied to the root element if `size="small"`. */
   sizeSmall: string;
-  /** Class name applied to the thumb element if `color="primary"`. */
+  /** Styles applied to the thumb element if `color="primary"`. */
   thumbColorPrimary: string;
-  /** Class name applied to the thumb element if `color="secondary"`. */
+  /** Styles applied to the thumb element if `color="secondary"`. */
   thumbColorSecondary: string;
-  /** Class name applied to the thumb element if `size="small"`. */
+  /** Styles applied to the thumb element if `size="small"`. */
   thumbSizeSmall: string;
-  /** Class name applied to the thumb label element. */
+  /** Styles applied to the thumb label element. */
   valueLabel: string;
-  /** Class name applied to the thumb label element if it's open. */
+  /** Styles applied to the thumb label element if it's open. */
   valueLabelOpen: string;
-  /** Class name applied to the thumb label's circle element. */
+  /** Styles applied to the thumb label's circle element. */
   valueLabelCircle: string;
-  /** Class name applied to the thumb label's label element. */
+  /** Styles applied to the thumb label's label element. */
   valueLabelLabel: string;
 }