diff --git a/docs/data/css/slider-styled-css.json b/docs/data/css/slider-styled-css.json new file mode 100644 index 00000000000000..bf57871ef4f709 --- /dev/null +++ b/docs/data/css/slider-styled-css.json @@ -0,0 +1,22 @@ +{ + "root": { "class": ".MuiSlider-root", "description": "Class name applied to the root element." }, + "colorPrimary": { "class": ".MuiSlider-colorPrimary", "description": "Class name applied to the root element if `color=\"primary\"`." }, + "colorSecondary": { "class": ".MuiSlider-colorSecondary", "description": "Class name applied to the root element if `color=\"secondary\"`." }, + "marked": { "class": ".MuiSlider-marked", "description": "Class name applied to the root element if `marks` is provided with at least one label." }, + "vertical": { "class": ".MuiSlider-vertical", "description": "Class name applied to the root element if `orientation=\"vertical\"`." }, + "disabled": { "class": ".Mui-disabled", "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." }, + "rail": { "class": ".MuiSlider-rail", "description": "Class name applied to the rail element." }, + "track": { "class": ".MuiSlider-track", "description": "Class name applied to the track element." }, + "trackFalse": { "class": ".MuiSlider-trackFalse", "description": "Class name applied to the track element if `track={false}`." }, + "trackInverted": { "class": ".MuiSlider-trackInverted", "description": "Class name applied to the track element if `track=\"inverted\"`." }, + "thumb": { "class": ".MuiSlider-thumb", "description": "Class name applied to the thumb element." }, + "thumbColorPrimary": { "class": ".MuiSlider-thumbColorPrimary", "description": "Class name applied to the thumb element if `color=\"primary\"`." }, + "thumbColorSecondary": { "class": ".MuiSlider-thumbColorSecondary", "description": "Class name applied to the thumb element if `color=\"secondary\"`." }, + "active": { "class": ".MuiSlider-active", "description": "Pseudo-class applied to the thumb element if it's active." }, + "focusVisible": { "class": ".Mui-focusVisible", "description": "Pseudo-class applied to the thumb element if keyboard focused." }, + "valueLabel": { "class": ".MuiSlider-valueLabel", "description": "Class name applied to the thumb label element." }, + "mark": { "class": ".MuiSlider-mark", "description": "Class name applied to the mark element." }, + "markActive": { "class": ".MuiSlider-markActive", "description": "Class name applied to the mark element if active (depending on the value)." }, + "markLabel": { "class": ".MuiSlider-markLabel", "description": "Class name applied to the mark label element." }, + "markLabelActive": { "class": ".MuiSlider-markLabelActive", "description": "Class name applied to the mark label element if active (depending on the value)." } +} \ No newline at end of file diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index f16aef952a29c1..a085caeef09fb3 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiSlider-root | Class name applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Class name applied to the rail element. -| track | .MuiSlider-track | Class name applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Class name applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. -| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. -| mark | .MuiSlider-mark | Class name applied to the mark element. -| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). +| root | .MuiSlider-root | Class name applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .MuiSlider-rail | Class name applied to the rail element. +| track | .MuiSlider-track | Class name applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Class name applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. +| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. +| mark | .MuiSlider-mark | Class name applied to the mark element. +| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index af19da58c10d75..b90c68ce8c825c 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -192,78 +192,33 @@ async function annotateComponentDefinition(context: { writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); } -function trimComment(comment: string) { - let i = 0; - for (; i < comment.length; i += 1) { - if (comment[i] !== '*' && comment[i] !== ' ') { - break; - } - } - return comment.substr(i, comment.length - 1); +const camelCaseToKebabCase = (inputString: string) => { + const str = inputString.charAt(0).toLowerCase() + inputString.slice(1) + return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); } async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { + const workspaceRoot = path.resolve(__dirname, '../../'); const { api, component } = context; - const typesFilename = component.filename.replace(/\.js$/, '.d.ts'); - const typesSource = readFileSync(typesFilename, { encoding: 'utf8' }); - const typesAST = await babel.parseAsync(typesSource, { - configFile: false, - filename: typesFilename, - presets: [require.resolve('@babel/preset-typescript')], - }); - - if (typesAST === null) { - throw new Error('No AST returned from babel.'); - } - - if (api.styles.classes.length === 0) { - const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); - - traverse(typesAST, { - ExportNamedDeclaration(babelPath) { - const { node } = babelPath; - const declaration = node.declaration as babel.types.TSTypeAliasDeclaration; + const componentName = path.basename(component.filename).replace(/\.js$/, ''); + const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase(componentName)}-css.json`; - const name = declaration.id?.name; - - const typeAnnotation = declaration.typeAnnotation as babel.types.TSUnionType; - - if (name === `${componentName}ClassKey` && typeAnnotation.types) { - const classes: string[] = []; - - const nodeLeadingComments = declaration.typeAnnotation.leadingComments || []; - - typeAnnotation.types.forEach((typeNode) => { - const value = (typeNode as babel.types.TSLiteralType).literal.value as string; - - classes.push(value); - - let leadingComments = typeNode.leadingComments; - if (leadingComments) { - leadingComments = leadingComments.concat(nodeLeadingComments); - } else { - leadingComments = nodeLeadingComments; - } - - if (leadingComments) { - for (let i = 0; i < leadingComments.length; i += 1) { - if ( - leadingComments[i].end + 5 === - (typeNode as babel.types.TSLiteralType).literal.start - ) { - api.styles.descriptions[value] = trimComment(leadingComments[i].value); - } - } - } - - return ''; - }); - - api.styles.classes = classes; - } - }, - }); + try { + const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' }); + if (jsonCSSData) { + const cssData = JSON.parse(jsonCSSData.toString()); + const classes = Object.keys(cssData); + api.styles.classes = classes; + + api.styles.descriptions = classes.reduce((acc, key) => { + acc[key] = cssData[key].description; + return acc; + }, {} as Record); + } + } catch (err) { + // Do nothing if the file doesn't exist + // This is still not supported for all components } } diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 6d741d24ab6846..3b80b4c84322c5 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -48,46 +48,4 @@ export const SliderValueLabel: React.FC; */ declare const Slider: ExtendSliderUnstyled; -export type SliderStyledClassKey = - /** Class name applied to the root element. */ - | 'root' - /** Class name applied to the root element if `color="primary"`. */ - | 'colorPrimary' - /** Class name applied to the root element if `color="secondary"`. */ - | 'colorSecondary' - /** Class name applied to the root element if `marks` is provided with at least one label. */ - | 'marked' - /** Class name applied to the root element if `orientation="vertical"`. */ - | 'vertical' - /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ - | 'disabled' - /** Class name applied to the rail element. */ - | 'rail' - /** Class name applied to the track element. */ - | 'track' - /** Class name applied to the track element if `track={false}`. */ - | 'trackFalse' - /** Class name applied to the track element if `track="inverted"`. */ - | 'trackInverted' - /** Class name applied to the thumb element. */ - | 'thumb' - /** Class name applied to the thumb element if `color="primary"`. */ - | 'thumbColorPrimary' - /** Class name applied to the thumb element if `color="secondary"`. */ - | 'thumbColorSecondary' - /** Pseudo-class applied to the thumb element if it's active. */ - | 'active' - /** Pseudo-class applied to the thumb element if keyboard focused. */ - | 'focusVisible' - /** Class name applied to the thumb label element. */ - | 'valueLabel' - /** Class name applied to the mark element. */ - | 'mark' - /** Class name applied to the mark element if active (depending on the value). */ - | 'markActive' - /** Class name applied to the mark label element. */ - | 'markLabel' - /** Class name applied to the mark label element if active (depending on the value). */ - | 'markLabelActive'; - export default Slider;