From fc40e0eb2053f65661d6462a2855120ab906d4a8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:21:53 +0100 Subject: [PATCH 01/24] init --- docs/pages/api-docs/slider-styled.md | 35 +++++++++ docs/scripts/buildApi.ts | 77 ++++++++++++++++++- .../src/SliderStyled/SliderStyled.d.ts | 42 ++++++++++ .../src/SliderStyled/SliderStyled.js | 4 + 4 files changed, 155 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index d4e100bc90b44e..86c6e59f62a7fd 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -20,7 +20,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi +## Component name +The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -56,6 +58,39 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .undefined | Styles applied to the root element. +| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. +| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. +| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. +| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. +| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .undefined | Styles applied to the rail element. +| track | .undefined | Styles applied to the track element. +| trackFalse | .undefined | Styles applied to the track element if `track={false}`. +| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. +| thumb | .undefined | Styles applied to the thumb element. +| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. +| active | .undefined | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .undefined | Styles applied to the thumb label element. +| mark | .undefined | Styles applied to the mark element. +| markActive | .undefined | Styles applied to the mark element if active (depending on the value). +| markLabel | .undefined | Styles applied to the mark label element. +| markLabelActive | .undefined | Styles 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: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SliderStyled/SliderStyled.js) for more detail. + ## Demos - [Slider Styled](/components/slider-styled/) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index d1d57b32b128af..e7d4ca1205e323 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -134,8 +134,8 @@ async function annotateComponentDefinition(context: { } const { leadingComments } = node; - const jsdocBlock = leadingComments != null ? leadingComments[0] : null; - if (leadingComments != null && leadingComments.length > 1) { + const jsdocBlock = leadingComments !== null ? leadingComments[0] : null; + if (leadingComments !== null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } if (jsdocBlock != null) { @@ -192,6 +192,71 @@ async function annotateComponentDefinition(context: { writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); } +function trimComment(comment: string) { + let i = 0; + for (; i < comment.length; i++) { + if (comment[i] !== '*' && comment[i] !== ' ') { + break; + } + } + return comment.substr(i, comment.length - 1); +} + +async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { + 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 parts = component.filename.split('\\'); + const componentName = parts[parts.length - 1].replace(/\.js$/, ''); + + typesAST.program.body.forEach((node) => { + const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; + if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { + const classes = node.declaration.typeAnnotation.types.map( + (node: babel.types.TSLiteralType) => node.literal.value, + ); + + const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; + + node.declaration.typeAnnotation.types.forEach( + (typeNode: babel.types.TSLiteralType, idx: number) => { + let leadingComments = typeNode.leadingComments; + if (idx === 0) { + if (leadingComments) { + leadingComments = leadingComments.concat(nodeLeadingComments); + } else { + leadingComments = nodeLeadingComments; + } + } + if (leadingComments) { + for (let i = 0; i < leadingComments.length; i++) { + if (leadingComments[i].end + 6 === typeNode.literal.start) { + api.styles.descriptions[typeNode.literal.value as string] = trimComment( + leadingComments[i].value, + ); + } + } + } + return ''; + }, + ); + api.styles.classes = classes; + } + }); + } +} + async function annotateClassesDefinition(context: { api: ReactApi; component: { filename: string }; @@ -300,12 +365,13 @@ async function buildDocs(options: { globalClasses: {}, }; + styles.name = component?.default?.options?.name; + if (component.styles && component.default.options) { // Collect the customization points of the `classes` property. styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( (className) => !className.match(/^(@media|@keyframes|@global)/), ); - styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error @@ -376,6 +442,11 @@ async function buildDocs(options: { reactAPI.filename = componentObject.filename.replace(workspaceRoot, ''); reactAPI.inheritance = getInheritance(testInfo, src); + await updateStylesDefinition({ + api: reactAPI, + component: componentObject, + }); + let markdown; try { markdown = generateMarkdown(reactAPI); diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 3b80b4c84322c5..3def13595a0c01 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -48,4 +48,46 @@ export const SliderValueLabel: React.FC; */ declare const Slider: ExtendSliderUnstyled; +export type SliderStyledClassKey = + /** Styles applied to the root element. */ + | 'root' + /** Styles applied to the root element if `color="primary"`. */ + | 'colorPrimary' + /** Styles applied to the root element if `color="secondary"`. */ + | 'colorSecondary' + /** Styles applied to the root element if `marks` is provided with at least one label. */ + | 'marked' + /** Pseudo-class applied to the root element if `orientation="vertical"`. */ + | 'vertical' + /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ + | 'disabled' + /** Styles applied to the rail element. */ + | 'rail' + /** Styles applied to the track element. */ + | 'track' + /** Styles applied to the track element if `track={false}`. */ + | 'trackFalse' + /** Styles applied to the track element if `track="inverted"`. */ + | 'trackInverted' + /** Styles applied to the thumb element. */ + | 'thumb' + /** Styles applied to the thumb element if `color="primary"`. */ + | 'thumbColorPrimary' + /** Styles 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' + /** Styles applied to the thumb label element. */ + | 'valueLabel' + /** Styles applied to the mark element. */ + | 'mark' + /** Styles applied to the mark element if active (depending on the value). */ + | 'markActive' + /** Styles applied to the mark label element. */ + | 'markLabel' + /** Styles applied to the mark label element if active (depending on the value). */ + | 'markLabelActive'; + export default Slider; diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index f47f91b54b331a..9392b9fa754b41 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -303,6 +303,10 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); +Slider.options = { + name: 'MuiSlider', +}; + Slider.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | From 6e5325beff7efb117d1ec460502b4aee291f343c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:36:22 +0100 Subject: [PATCH 02/24] types :\ --- docs/scripts/buildApi.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index e7d4ca1205e323..794173d85ace73 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -212,6 +212,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil filename: typesFilename, presets: [require.resolve('@babel/preset-typescript')], }); + if (typesAST === null) { throw new Error('No AST returned from babel.'); } @@ -220,7 +221,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil const parts = component.filename.split('\\'); const componentName = parts[parts.length - 1].replace(/\.js$/, ''); - typesAST.program.body.forEach((node) => { + (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { const classes = node.declaration.typeAnnotation.types.map( From c6df4f74653839a602556b14b8693536113165e3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:42:18 +0100 Subject: [PATCH 03/24] test ci --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 794173d85ace73..60d1008ec4d507 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -218,7 +218,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (api.styles.classes.length === 0) { - const parts = component.filename.split('\\'); + const parts = component.filename.split('\/'); const componentName = parts[parts.length - 1].replace(/\.js$/, ''); (typesAST as any).program.body.forEach((node: any) => { From 7a866bc3a1d53de38634e7af4e3ae88c67006b9b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:48:23 +0100 Subject: [PATCH 04/24] fixed componentName --- docs/scripts/buildApi.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 60d1008ec4d507..de054a0155506c 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -218,9 +218,8 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (api.styles.classes.length === 0) { - const parts = component.filename.split('\/'); - const componentName = parts[parts.length - 1].replace(/\.js$/, ''); - + const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); + console.log(componentName); (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { From 371063845986cb1ecd653628be8d3dc8a3da055f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:48:46 +0100 Subject: [PATCH 05/24] componentName --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index de054a0155506c..c07b5acd6834fc 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -219,7 +219,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (api.styles.classes.length === 0) { const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); - console.log(componentName); + (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { From 094fa7d537ea10b98c711c86caaa308c6a33ca55 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:11:14 +0100 Subject: [PATCH 06/24] fixes on the global classes --- docs/pages/api-docs/slider-styled.md | 40 ++++++++++++++-------------- docs/scripts/buildApi.ts | 29 +++++++++++++++----- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 86c6e59f62a7fd..3a71e4a69b050c 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 | .undefined | Styles applied to the root element. -| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. -| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. -| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. -| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. -| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .undefined | Styles applied to the rail element. -| track | .undefined | Styles applied to the track element. -| trackFalse | .undefined | Styles applied to the track element if `track={false}`. -| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. -| thumb | .undefined | Styles applied to the thumb element. -| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. -| active | .undefined | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .undefined | Styles applied to the thumb label element. -| mark | .undefined | Styles applied to the mark element. -| markActive | .undefined | Styles applied to the mark element if active (depending on the value). -| markLabel | .undefined | Styles applied to the mark label element. -| markLabelActive | .undefined | Styles applied to the mark label element if active (depending on the value). +| root | .MuiSlider-root | Styles applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Pseudo-class 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 | Styles applied to the rail element. +| track | .MuiSlider-track | Styles applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Styles applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles 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 | Styles applied to the thumb label element. +| mark | .MuiSlider-mark | Styles applied to the mark element. +| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Styles 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 c07b5acd6834fc..ea00d73365eed3 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -232,13 +232,12 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil node.declaration.typeAnnotation.types.forEach( (typeNode: babel.types.TSLiteralType, idx: number) => { let leadingComments = typeNode.leadingComments; - if (idx === 0) { - if (leadingComments) { - leadingComments = leadingComments.concat(nodeLeadingComments); - } else { - leadingComments = nodeLeadingComments; - } + if (leadingComments) { + leadingComments = leadingComments.concat(nodeLeadingComments); + } else { + leadingComments = nodeLeadingComments; } + if (leadingComments) { for (let i = 0; i < leadingComments.length; i++) { if (leadingComments[i].end + 6 === typeNode.literal.start) { @@ -447,6 +446,24 @@ async function buildDocs(options: { component: componentObject, }); + if(reactAPI.styles.classes) { + reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { + acc[key] = generateClassName( + // @ts-expect-error + { + key, + }, + { + options: { + name: styles.name, + theme: {}, + }, + }, + ); + return acc; + }, {} as Record); + } + let markdown; try { markdown = generateMarkdown(reactAPI); From 773888e8a60649da95cc488379087005018610a4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:26:38 +0100 Subject: [PATCH 07/24] updates on comments and fixes --- docs/pages/api-docs/slider-styled.md | 32 +++++++++---------- docs/scripts/buildApi.ts | 5 +-- .../src/SliderStyled/SliderStyled.d.ts | 32 +++++++++---------- 3 files changed, 35 insertions(+), 34 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 3a71e4a69b050c..28c11cab0d40f2 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 | Styles applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. +| 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 | Pseudo-class 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 | Styles applied to the rail element. -| track | .MuiSlider-track | Styles applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Styles applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. +| 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 | Styles applied to the thumb label element. -| mark | .MuiSlider-mark | Styles applied to the mark element. -| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). +| 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 ea00d73365eed3..b62a9d5e44bbc5 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -240,13 +240,14 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (leadingComments) { for (let i = 0; i < leadingComments.length; i++) { - if (leadingComments[i].end + 6 === typeNode.literal.start) { + if (leadingComments[i].end + 5 === typeNode.literal.start) { api.styles.descriptions[typeNode.literal.value as string] = trimComment( leadingComments[i].value, ); } } } + return ''; }, ); @@ -446,7 +447,7 @@ async function buildDocs(options: { component: componentObject, }); - if(reactAPI.styles.classes) { + if (reactAPI.styles.classes) { reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 3def13595a0c01..7b02670201ff01 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -49,45 +49,45 @@ export const SliderValueLabel: React.FC; declare const Slider: ExtendSliderUnstyled; export type SliderStyledClassKey = - /** Styles applied to the root element. */ + /** Class name applied to the root element. */ | 'root' - /** Styles applied to the root element if `color="primary"`. */ + /** Class name applied to the root element if `color="primary"`. */ | 'colorPrimary' - /** Styles applied to the root element if `color="secondary"`. */ + /** Class name applied to the root element if `color="secondary"`. */ | 'colorSecondary' - /** Styles applied to the root element if `marks` is provided with at least one label. */ + /** Class name applied to the root element if `marks` is provided with at least one label. */ | 'marked' /** Pseudo-class applied to the root element if `orientation="vertical"`. */ | 'vertical' /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ | 'disabled' - /** Styles applied to the rail element. */ + /** Class name applied to the rail element. */ | 'rail' - /** Styles applied to the track element. */ + /** Class name applied to the track element. */ | 'track' - /** Styles applied to the track element if `track={false}`. */ + /** Class name applied to the track element if `track={false}`. */ | 'trackFalse' - /** Styles applied to the track element if `track="inverted"`. */ + /** Class name applied to the track element if `track="inverted"`. */ | 'trackInverted' - /** Styles applied to the thumb element. */ + /** Class name applied to the thumb element. */ | 'thumb' - /** Styles applied to the thumb element if `color="primary"`. */ + /** Class name applied to the thumb element if `color="primary"`. */ | 'thumbColorPrimary' - /** Styles applied to the thumb element if `color="secondary"`. */ + /** 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' - /** Styles applied to the thumb label element. */ + /** Class name applied to the thumb label element. */ | 'valueLabel' - /** Styles applied to the mark element. */ + /** Class name applied to the mark element. */ | 'mark' - /** Styles applied to the mark element if active (depending on the value). */ + /** Class name applied to the mark element if active (depending on the value). */ | 'markActive' - /** Styles applied to the mark label element. */ + /** Class name applied to the mark label element. */ | 'markLabel' - /** Styles applied to the mark label element if active (depending on the value). */ + /** Class name applied to the mark label element if active (depending on the value). */ | 'markLabelActive'; export default Slider; From f447fd88a8766f055c4b6e074f91acbe54698f35 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:29:47 +0100 Subject: [PATCH 08/24] Update docs/scripts/buildApi.ts --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index b62a9d5e44bbc5..114c56a8b79a1f 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -134,7 +134,7 @@ async function annotateComponentDefinition(context: { } const { leadingComments } = node; - const jsdocBlock = leadingComments !== null ? leadingComments[0] : null; + const jsdocBlock = leadingComments != null ? leadingComments[0] : null; if (leadingComments !== null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } From f310f0d91ebb19f5dac4ea74c710e6e498cd2511 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:30:26 +0100 Subject: [PATCH 09/24] revert some changes --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 114c56a8b79a1f..ee5489923f70b5 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -135,7 +135,7 @@ async function annotateComponentDefinition(context: { const { leadingComments } = node; const jsdocBlock = leadingComments != null ? leadingComments[0] : null; - if (leadingComments !== null && leadingComments.length > 1) { + if (leadingComments != null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } if (jsdocBlock != null) { From 582c59a8951d3c258e044928b81d6f46a6a87475 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:48:56 +0100 Subject: [PATCH 10/24] lint fixes --- docs/scripts/buildApi.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index ee5489923f70b5..ef8310b1a08ae3 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -194,7 +194,7 @@ async function annotateComponentDefinition(context: { function trimComment(comment: string) { let i = 0; - for (; i < comment.length; i++) { + for (; i < comment.length; i+=1) { if (comment[i] !== '*' && comment[i] !== ' ') { break; } @@ -224,13 +224,13 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { const classes = node.declaration.typeAnnotation.types.map( - (node: babel.types.TSLiteralType) => node.literal.value, + (typeNode: babel.types.TSLiteralType) => typeNode.literal.value, ); const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; node.declaration.typeAnnotation.types.forEach( - (typeNode: babel.types.TSLiteralType, idx: number) => { + (typeNode: babel.types.TSLiteralType) => { let leadingComments = typeNode.leadingComments; if (leadingComments) { leadingComments = leadingComments.concat(nodeLeadingComments); @@ -239,7 +239,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (leadingComments) { - for (let i = 0; i < leadingComments.length; i++) { + for (let i = 0; i < leadingComments.length; i+=1) { if (leadingComments[i].end + 5 === typeNode.literal.start) { api.styles.descriptions[typeNode.literal.value as string] = trimComment( leadingComments[i].value, From 37033226ef99d36231ae4f50ee52a99670b242f8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 19:23:24 +0100 Subject: [PATCH 11/24] refactored traversing of the AST tree --- docs/scripts/buildApi.ts | 48 ++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index ef8310b1a08ae3..af19da58c10d75 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -194,7 +194,7 @@ async function annotateComponentDefinition(context: { function trimComment(comment: string) { let i = 0; - for (; i < comment.length; i+=1) { + for (; i < comment.length; i += 1) { if (comment[i] !== '*' && comment[i] !== ' ') { break; } @@ -220,17 +220,25 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (api.styles.classes.length === 0) { const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); - (typesAST as any).program.body.forEach((node: any) => { - const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; - if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { - const classes = node.declaration.typeAnnotation.types.map( - (typeNode: babel.types.TSLiteralType) => typeNode.literal.value, - ); + traverse(typesAST, { + ExportNamedDeclaration(babelPath) { + const { node } = babelPath; + const declaration = node.declaration as babel.types.TSTypeAliasDeclaration; - const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; + 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); - node.declaration.typeAnnotation.types.forEach( - (typeNode: babel.types.TSLiteralType) => { let leadingComments = typeNode.leadingComments; if (leadingComments) { leadingComments = leadingComments.concat(nodeLeadingComments); @@ -239,20 +247,22 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (leadingComments) { - for (let i = 0; i < leadingComments.length; i+=1) { - if (leadingComments[i].end + 5 === typeNode.literal.start) { - api.styles.descriptions[typeNode.literal.value as string] = trimComment( - leadingComments[i].value, - ); + 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; - } + }); + + api.styles.classes = classes; + } + }, }); } } From 2e56a2220fb3ffae5553e36aed0183374186ba08 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 19:45:01 +0100 Subject: [PATCH 12/24] trigger build From 0653705152fbc865943d7db4db792d3310184736 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 08:25:05 +0100 Subject: [PATCH 13/24] Update packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts Co-authored-by: Olivier Tassinari --- packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 7b02670201ff01..6d741d24ab6846 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -57,7 +57,7 @@ export type SliderStyledClassKey = | 'colorSecondary' /** Class name applied to the root element if `marks` is provided with at least one label. */ | 'marked' - /** Pseudo-class applied to the root element if `orientation="vertical"`. */ + /** Class name applied to the root element if `orientation="vertical"`. */ | 'vertical' /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ | 'disabled' From 07f00786680c31d5a28b2e55d121d2c79805a14b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 13:50:36 +0100 Subject: [PATCH 14/24] docs:api --- docs/pages/api-docs/slider-styled.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 28c11cab0d40f2..f16aef952a29c1 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -66,7 +66,7 @@ Any other props supplied will be provided to the root element (native 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 | Pseudo-class applied to the root element if `orientation="vertical"`. +| 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. From 03f94a9b8d37daad4fdd35f0fbe5b950b76b0300 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 5 Nov 2020 12:55:38 +0100 Subject: [PATCH 15/24] refactored --- docs/data/css/slider-styled-css.js | 24 +++++ docs/pages/api-docs/slider-styled.md | 40 ++++----- docs/scripts/buildApi.ts | 87 +++++-------------- .../src/SliderStyled/SliderStyled.d.ts | 42 --------- 4 files changed, 64 insertions(+), 129 deletions(-) create mode 100644 docs/data/css/slider-styled-css.js diff --git a/docs/data/css/slider-styled-css.js b/docs/data/css/slider-styled-css.js new file mode 100644 index 00000000000000..a37e1181be4e60 --- /dev/null +++ b/docs/data/css/slider-styled-css.js @@ -0,0 +1,24 @@ +const sliderStyledCSS = { + 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).' }, +}; + +export default sliderStyledCSS; \ 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..92b133b047c72a 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -192,78 +192,31 @@ 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 { 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 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; - } - }, - }); + const componentName = path.basename(component.filename).replace(/\.js$/, ''); + const cssFilename = `../data/css/${camelCaseToKebabCase(componentName)}-css.js`; + try { + const cssModule = require(cssFilename); + if (cssModule) { + const cssData = cssModule.default; + 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; From 57f041917ab23f8462848ad809ce4cf4befac58c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 6 Nov 2020 12:35:28 +0100 Subject: [PATCH 16/24] changed file to json & used readFileSync --- docs/data/css/slider-styled-css.js | 24 ------------------------ docs/data/css/slider-styled-css.json | 22 ++++++++++++++++++++++ docs/scripts/buildApi.ts | 10 ++++++---- 3 files changed, 28 insertions(+), 28 deletions(-) delete mode 100644 docs/data/css/slider-styled-css.js create mode 100644 docs/data/css/slider-styled-css.json diff --git a/docs/data/css/slider-styled-css.js b/docs/data/css/slider-styled-css.js deleted file mode 100644 index a37e1181be4e60..00000000000000 --- a/docs/data/css/slider-styled-css.js +++ /dev/null @@ -1,24 +0,0 @@ -const sliderStyledCSS = { - 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).' }, -}; - -export default sliderStyledCSS; \ No newline at end of file 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/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 92b133b047c72a..b90c68ce8c825c 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -198,14 +198,16 @@ const camelCaseToKebabCase = (inputString: string) => { } async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { + const workspaceRoot = path.resolve(__dirname, '../../'); const { api, component } = context; const componentName = path.basename(component.filename).replace(/\.js$/, ''); - const cssFilename = `../data/css/${camelCaseToKebabCase(componentName)}-css.js`; + const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase(componentName)}-css.json`; + try { - const cssModule = require(cssFilename); - if (cssModule) { - const cssData = cssModule.default; + const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' }); + if (jsonCSSData) { + const cssData = JSON.parse(jsonCSSData.toString()); const classes = Object.keys(cssData); api.styles.classes = classes; From 45b3d2d0bb7fcee455408778ffc72f0f04df4b37 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 6 Nov 2020 13:54:58 +0100 Subject: [PATCH 17/24] prettier --- docs/data/css/slider-styled-css.json | 87 ++++++++++++++++++++++------ docs/scripts/buildApi.ts | 10 ++-- 2 files changed, 75 insertions(+), 22 deletions(-) diff --git a/docs/data/css/slider-styled-css.json b/docs/data/css/slider-styled-css.json index bf57871ef4f709..13511cb76826d7 100644 --- a/docs/data/css/slider-styled-css.json +++ b/docs/data/css/slider-styled-css.json @@ -1,22 +1,73 @@ { "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}`." }, + "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." }, + "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 + "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)." + } +} diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index b90c68ce8c825c..cd2225764c1a22 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -193,16 +193,18 @@ async function annotateComponentDefinition(context: { } const camelCaseToKebabCase = (inputString: string) => { - const str = inputString.charAt(0).toLowerCase() + inputString.slice(1) + 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 componentName = path.basename(component.filename).replace(/\.js$/, ''); - const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase(componentName)}-css.json`; + const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase( + componentName, + )}-css.json`; try { const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' }); @@ -210,7 +212,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil 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; From ef0bfdaa718b66abe5e4dd518401ab5045ef476e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 9 Nov 2020 11:32:35 +0100 Subject: [PATCH 18/24] updated generated markdown for styled() components --- docs/pages/api-docs/slider-styled.md | 7 ++----- docs/scripts/buildApi.ts | 13 ++++++++----- docs/src/modules/utils/generateMarkdown.ts | 13 ++++++++----- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index a085caeef09fb3..f7436db3cd45c9 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -85,11 +85,8 @@ Any other props supplied will be provided to the root element (native element). You can override the style of the component thanks to one of these customization points: -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SliderStyled/SliderStyled.js) for more detail. +- With a [global class name](/guides/interoperability/#global-css). +- With a rule name as part of the theme's component's [`styleOverrides` property](/customization/components/#global-theme-override). ## Demos diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index cd2225764c1a22..42b6aad8fd2312 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -409,10 +409,13 @@ async function buildDocs(options: { reactAPI.filename = componentObject.filename.replace(workspaceRoot, ''); reactAPI.inheritance = getInheritance(testInfo, src); - await updateStylesDefinition({ - api: reactAPI, - component: componentObject, - }); + const styledComponent = reactAPI.styles.classes.length === 0; + if(styledComponent) { + await updateStylesDefinition({ + api: reactAPI, + component: componentObject, + }); + } if (reactAPI.styles.classes) { reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { @@ -434,7 +437,7 @@ async function buildDocs(options: { let markdown; try { - markdown = generateMarkdown(reactAPI); + markdown = generateMarkdown(reactAPI, styledComponent); } catch (err) { console.log('Error generating markdown for', componentObject.filename); throw err; diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index bf52051245dd7f..47018ef76b312e 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -440,7 +440,7 @@ Any other props supplied will be provided to the root element (${ return text; } -function generateClasses(reactAPI: ReactApi) { +function generateClasses(reactAPI: ReactApi, styledComponent: boolean) { if (!reactAPI.styles.classes.length) { return ''; } @@ -476,7 +476,10 @@ function generateClasses(reactAPI: ReactApi) { ${text} You can override the style of the component thanks to one of these customization points: - +${styledComponent ? ` +- With a [global class name](/guides/interoperability/#global-css). +- With a rule name as part of the theme's component's [\`styleOverrides\` property](/customization/components/#global-theme-override). +` : ` - With a rule name of the [\`classes\` object prop](/customization/components/#overriding-styles-with-classes). - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [\`overrides\` property](/customization/globals/#css). @@ -484,7 +487,7 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](${SOURCE_CODE_ROOT_URL}${normalizePath( reactAPI.filename, )}) for more detail. - +`} `; } @@ -552,7 +555,7 @@ import { ${reactAPI.name} } from '${source}'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).`; } -export default function generateMarkdown(reactAPI: ReactApi) { +export default function generateMarkdown(reactAPI: ReactApi, styledComponent = false) { return [ generateHeader(reactAPI), '', @@ -570,6 +573,6 @@ export default function generateMarkdown(reactAPI: ReactApi) { generateName(reactAPI), generateProps(reactAPI), '', - `${generateClasses(reactAPI)}${generateInheritance(reactAPI)}${generateDemos(reactAPI)}`, + `${generateClasses(reactAPI, styledComponent)}${generateInheritance(reactAPI)}${generateDemos(reactAPI)}`, ].join('\n'); } From 7709d1e490bc16e75cc24dbe1159b3064764cf8b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 9 Nov 2020 12:06:10 +0100 Subject: [PATCH 19/24] prettier --- docs/scripts/buildApi.ts | 2 +- docs/src/modules/utils/generateMarkdown.ts | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 42b6aad8fd2312..77ebe16d489093 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -410,7 +410,7 @@ async function buildDocs(options: { reactAPI.inheritance = getInheritance(testInfo, src); const styledComponent = reactAPI.styles.classes.length === 0; - if(styledComponent) { + if (styledComponent) { await updateStylesDefinition({ api: reactAPI, component: componentObject, diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 47018ef76b312e..322879ff67194b 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -476,18 +476,22 @@ function generateClasses(reactAPI: ReactApi, styledComponent: boolean) { ${text} You can override the style of the component thanks to one of these customization points: -${styledComponent ? ` +${ + styledComponent + ? ` - With a [global class name](/guides/interoperability/#global-css). - With a rule name as part of the theme's component's [\`styleOverrides\` property](/customization/components/#global-theme-override). -` : ` +` + : ` - With a rule name of the [\`classes\` object prop](/customization/components/#overriding-styles-with-classes). - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [\`overrides\` property](/customization/globals/#css). If that's not sufficient, you can check the [implementation of the component](${SOURCE_CODE_ROOT_URL}${normalizePath( - reactAPI.filename, - )}) for more detail. -`} + reactAPI.filename, + )}) for more detail. +` +} `; } @@ -573,6 +577,8 @@ export default function generateMarkdown(reactAPI: ReactApi, styledComponent = f generateName(reactAPI), generateProps(reactAPI), '', - `${generateClasses(reactAPI, styledComponent)}${generateInheritance(reactAPI)}${generateDemos(reactAPI)}`, + `${generateClasses(reactAPI, styledComponent)}${generateInheritance(reactAPI)}${generateDemos( + reactAPI, + )}`, ].join('\n'); } From 4385578c05abf666b924ddeb9da754a7665304c9 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 11:02:53 +0100 Subject: [PATCH 20/24] added name as part of the JSON --- docs/data/css/slider-styled-css.json | 73 ------------------ docs/data/slider-styled.json | 76 +++++++++++++++++++ docs/scripts/buildApi.ts | 40 +++++----- .../src/SliderStyled/SliderStyled.js | 4 - 4 files changed, 97 insertions(+), 96 deletions(-) delete mode 100644 docs/data/css/slider-styled-css.json create mode 100644 docs/data/slider-styled.json diff --git a/docs/data/css/slider-styled-css.json b/docs/data/css/slider-styled-css.json deleted file mode 100644 index 13511cb76826d7..00000000000000 --- a/docs/data/css/slider-styled-css.json +++ /dev/null @@ -1,73 +0,0 @@ -{ - "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)." - } -} diff --git a/docs/data/slider-styled.json b/docs/data/slider-styled.json new file mode 100644 index 00000000000000..41ce414d6b4772 --- /dev/null +++ b/docs/data/slider-styled.json @@ -0,0 +1,76 @@ +{ + "name": "MuiSlider", + "css": { + "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)." + } + } +} diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 77ebe16d489093..da10e5bd922f3c 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -197,29 +197,30 @@ const camelCaseToKebabCase = (inputString: string) => { return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); }; -async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { +async function updateStylesDefinition(context: { styles: ReactApi['styles']; component: { filename: string } }) { const workspaceRoot = path.resolve(__dirname, '../../'); - const { api, component } = context; + const { styles, component } = context; const componentName = path.basename(component.filename).replace(/\.js$/, ''); - const cssFilename = `${workspaceRoot}/docs/data/css/${camelCaseToKebabCase( + const dataFilename = `${workspaceRoot}/docs/data/${camelCaseToKebabCase( componentName, - )}-css.json`; + )}.json`; try { - const jsonCSSData = readFileSync(cssFilename, { encoding: 'utf8' }); - if (jsonCSSData) { - const cssData = JSON.parse(jsonCSSData.toString()); + const jsonDataString = readFileSync(dataFilename, { encoding: 'utf8' }); + const jsonData = JSON.parse(jsonDataString); + if (jsonData) { + const cssData = jsonData.css; const classes = Object.keys(cssData); - api.styles.classes = classes; - - api.styles.descriptions = classes.reduce((acc, key) => { + styles.classes = classes; + styles.name = jsonData.name; + 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 + // Do nothing for now if the file doesn't exist // This is still not supported for all components } } @@ -334,6 +335,15 @@ async function buildDocs(options: { styles.name = component?.default?.options?.name; + // styled components does not have the options static + const styledComponent = !component?.default?.options; + if (styledComponent) { + await updateStylesDefinition({ + styles, + component: componentObject, + }); + } + if (component.styles && component.default.options) { // Collect the customization points of the `classes` property. styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( @@ -409,14 +419,6 @@ async function buildDocs(options: { reactAPI.filename = componentObject.filename.replace(workspaceRoot, ''); reactAPI.inheritance = getInheritance(testInfo, src); - const styledComponent = reactAPI.styles.classes.length === 0; - if (styledComponent) { - await updateStylesDefinition({ - api: reactAPI, - component: componentObject, - }); - } - if (reactAPI.styles.classes) { reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { acc[key] = generateClassName( diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 9392b9fa754b41..f47f91b54b331a 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -303,10 +303,6 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); -Slider.options = { - name: 'MuiSlider', -}; - Slider.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | From 8d6791515facf533656effe452fc91d846e1d388 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 11:06:53 +0100 Subject: [PATCH 21/24] prettier & reverted some changes --- docs/data/slider-styled.json | 15 ++++++++++++--- docs/scripts/buildApi.ts | 12 ++++++------ 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/docs/data/slider-styled.json b/docs/data/slider-styled.json index 41ce414d6b4772..7eb1be301beea7 100644 --- a/docs/data/slider-styled.json +++ b/docs/data/slider-styled.json @@ -1,7 +1,10 @@ { "name": "MuiSlider", "css": { - "root": { "class": ".MuiSlider-root", "description": "Class name applied to the root element." }, + "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\"`." @@ -22,7 +25,10 @@ "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." }, + "rail": { + "class": ".MuiSlider-rail", + "description": "Class name applied to the rail element." + }, "track": { "class": ".MuiSlider-track", "description": "Class name applied to the track element." @@ -59,7 +65,10 @@ "class": ".MuiSlider-valueLabel", "description": "Class name applied to the thumb label element." }, - "mark": { "class": ".MuiSlider-mark", "description": "Class name applied to the mark 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)." diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index da10e5bd922f3c..9336d2374e55d5 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -197,14 +197,15 @@ const camelCaseToKebabCase = (inputString: string) => { return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); }; -async function updateStylesDefinition(context: { styles: ReactApi['styles']; component: { filename: string } }) { +async function updateStylesDefinition(context: { + styles: ReactApi['styles']; + component: { filename: string }; +}) { const workspaceRoot = path.resolve(__dirname, '../../'); const { styles, component } = context; const componentName = path.basename(component.filename).replace(/\.js$/, ''); - const dataFilename = `${workspaceRoot}/docs/data/${camelCaseToKebabCase( - componentName, - )}.json`; + const dataFilename = `${workspaceRoot}/docs/data/${camelCaseToKebabCase(componentName)}.json`; try { const jsonDataString = readFileSync(dataFilename, { encoding: 'utf8' }); @@ -333,8 +334,6 @@ async function buildDocs(options: { globalClasses: {}, }; - styles.name = component?.default?.options?.name; - // styled components does not have the options static const styledComponent = !component?.default?.options; if (styledComponent) { @@ -349,6 +348,7 @@ async function buildDocs(options: { styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( (className) => !className.match(/^(@media|@keyframes|@global)/), ); + styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error From d623e4fb32e77829c1227038787f9075333421e8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 14:08:10 +0100 Subject: [PATCH 22/24] Update docs/src/modules/utils/generateMarkdown.ts Co-authored-by: Matt --- docs/src/modules/utils/generateMarkdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 322879ff67194b..0e8da04b383ba1 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -480,7 +480,7 @@ ${ styledComponent ? ` - With a [global class name](/guides/interoperability/#global-css). -- With a rule name as part of the theme's component's [\`styleOverrides\` property](/customization/components/#global-theme-override). +- With a rule name as part of the component's [\`styleOverrides\` property](/customization/components/#global-theme-override) in a custom theme. ` : ` - With a rule name of the [\`classes\` object prop](/customization/components/#overriding-styles-with-classes). From 38fed1ad6510d934ed25376e16783c8c800b293d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 15:11:38 +0100 Subject: [PATCH 23/24] docs:api --- docs/pages/api-docs/slider-styled.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index f7436db3cd45c9..577816bc1b2c95 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -86,7 +86,7 @@ Any other props supplied will be provided to the root element (native element). You can override the style of the component thanks to one of these customization points: - With a [global class name](/guides/interoperability/#global-css). -- With a rule name as part of the theme's component's [`styleOverrides` property](/customization/components/#global-theme-override). +- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme. ## Demos From 99bae46c5e17e09fbdd56b44489724e88dc5829f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 15:27:11 +0100 Subject: [PATCH 24/24] trigger build