From ff4a2ad0684bd16c2ea0a76c80f40a0ce1f737f5 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 13 Mar 2024 13:05:50 -0300 Subject: [PATCH 01/10] add approach one: FeatureList component --- docs/src/modules/components/FeatureList.js | 40 ++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 docs/src/modules/components/FeatureList.js diff --git a/docs/src/modules/components/FeatureList.js b/docs/src/modules/components/FeatureList.js new file mode 100644 index 00000000000000..fd29f76180524a --- /dev/null +++ b/docs/src/modules/components/FeatureList.js @@ -0,0 +1,40 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import IconImage from 'docs/src/components/icon/IconImage'; +import { styled } from '@mui/material/styles'; + +const ListRoot = styled('ul')({ + padding: 0, + margin: 0, + marginBottom: 16, + listStyle: 'none', + display: 'flex', + flexDirection: 'column', + gap: 6, +}); + +export default function FeatureList(props) { + const { features } = props; + + return ( + + {features.map((feature, item) => ( + + + {feature} + + ))} + + ); +} + +FeatureList.propTypes = {}; From 696be6d3c771bf53a3692289051484a46ac0c126 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 13 Mar 2024 13:06:00 -0300 Subject: [PATCH 02/10] add approach two: plain HTML --- .../src/modules/components/MarkdownElement.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 24f18dd51a749b..3020fda1a22e73 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -601,6 +601,21 @@ const Root = styled('div')( marginBottom: theme.spacing(1), }, }, + '& .feature-list': { + padding: 0, + listStyle: 'none', + '& li': { + marginBottom: 6, + display: 'flex', + alignItems: 'center', + gap: 12, + '::before': { + content: `url('/static/branding/pricing/yes-light.svg')`, + width: '18px', + height: '18px', + }, + }, + }, }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { @@ -747,6 +762,13 @@ const Root = styled('div')( backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`, }, }, + '& .feature-list': { + '& li': { + '::before': { + content: `url('/static/branding/pricing/yes-dark.svg')`, + }, + }, + }, }, }), ); From 1361e3e0c9be1d8ef32c09dbbb14916a6b299d19 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 13 Mar 2024 13:06:07 -0300 Subject: [PATCH 03/10] add experiment page for demo --- docs/data/docs-infra/pages.ts | 1 + .../experiments/docs/custom-components.js | 7 +++++ .../experiments/docs/custom-components.md | 27 +++++++++++++++++++ 3 files changed, 35 insertions(+) create mode 100644 docs/pages/experiments/docs/custom-components.js create mode 100644 docs/pages/experiments/docs/custom-components.md diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts index d8dbb02f3d954f..0cd74435bba91f 100644 --- a/docs/data/docs-infra/pages.ts +++ b/docs/data/docs-infra/pages.ts @@ -14,6 +14,7 @@ const pages: readonly MuiPage[] = [ children: [ { pathname: '/experiments/docs/callouts' }, { pathname: '/experiments/docs/codeblock' }, + { pathname: '/experiments/docs/custom-components' }, { pathname: '/experiments/docs/demos' }, { pathname: '/experiments/docs/data-grid-premium', title: 'API DataGridPremium' }, ], diff --git a/docs/pages/experiments/docs/custom-components.js b/docs/pages/experiments/docs/custom-components.js new file mode 100644 index 00000000000000..56cac9e3ca0c30 --- /dev/null +++ b/docs/pages/experiments/docs/custom-components.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from './custom-components.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md new file mode 100644 index 00000000000000..c91e51a1e24d07 --- /dev/null +++ b/docs/pages/experiments/docs/custom-components.md @@ -0,0 +1,27 @@ +# Callouts + +

Type of callouts.

+ +## Header chips + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Feature list + +### Approach 1: Componentized + +Easier to protect the styles, but worse to read and write + +{{"component": "modules/components/FeatureList.js", "features": ["Manages modal stacking when one-at-a-time just isn't enough.", "Creates a backdrop, for disabling interaction below the modal.", "It disables scrolling of the page content while open.", "It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.", "Adds the appropriate ARIA roles automatically."]}} + +### Approach 2: Plain HTML + +Easier to write and read, and potentially easier to violate the styles? + + From a0372c66a8112ce534b49b0234cbbc9644538cfe Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 13 Mar 2024 13:25:32 -0300 Subject: [PATCH 04/10] simplify FeatureList component --- docs/src/modules/components/FeatureList.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/src/modules/components/FeatureList.js b/docs/src/modules/components/FeatureList.js index fd29f76180524a..d568d82ef36d0c 100644 --- a/docs/src/modules/components/FeatureList.js +++ b/docs/src/modules/components/FeatureList.js @@ -15,9 +15,7 @@ const ListRoot = styled('ul')({ gap: 6, }); -export default function FeatureList(props) { - const { features } = props; - +export default function FeatureList({ features }) { return ( {features.map((feature, item) => ( @@ -37,4 +35,4 @@ export default function FeatureList(props) { ); } -FeatureList.propTypes = {}; +FeatureList.propTypes = {}; // do I need this given it's a JS file? From 09b535529aa240f2bb550aa324edb726a6d7d97d Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 13 Mar 2024 14:46:54 -0300 Subject: [PATCH 05/10] fix eslint ci --- docs/src/modules/components/FeatureList.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/FeatureList.js b/docs/src/modules/components/FeatureList.js index d568d82ef36d0c..c26e2e74a3e926 100644 --- a/docs/src/modules/components/FeatureList.js +++ b/docs/src/modules/components/FeatureList.js @@ -35,4 +35,6 @@ export default function FeatureList({ features }) { ); } -FeatureList.propTypes = {}; // do I need this given it's a JS file? +FeatureList.propTypes = { + features: PropTypes.string, +}; From 4a7ac06e638228c52a8a4b80451dac7ae2823d32 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 14 Mar 2024 10:46:57 +0100 Subject: [PATCH 06/10] remove warning --- docs/src/modules/components/FeatureList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/FeatureList.js b/docs/src/modules/components/FeatureList.js index c26e2e74a3e926..1ff25cdbb64ec6 100644 --- a/docs/src/modules/components/FeatureList.js +++ b/docs/src/modules/components/FeatureList.js @@ -36,5 +36,5 @@ export default function FeatureList({ features }) { } FeatureList.propTypes = { - features: PropTypes.string, + features: PropTypes.arrayOf(PropTypes.string), }; From a8cbe1cdf4b5a6e4273bca191481c34d2f71be50 Mon Sep 17 00:00:00 2001 From: alexandre Date: Thu, 14 Mar 2024 10:47:06 +0100 Subject: [PATCH 07/10] Implement option 3 --- .../experiments/docs/custom-components.md | 10 ++++ packages/markdown/parseMarkdown.js | 46 +++++++++++++------ packages/markdown/prepareMarkdown.js | 8 +++- 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md index c91e51a1e24d07..e2119d4cea13de 100644 --- a/docs/pages/experiments/docs/custom-components.md +++ b/docs/pages/experiments/docs/custom-components.md @@ -25,3 +25,13 @@ Easier to write and read, and potentially easier to violate the styles?
  • It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
  • Adds the appropriate ARIA roles automatically.
    • + +### Approach 3: Custom markdown + + +- Manages modal stacking when one-at-a-time just isn't enough. +- Creates a backdrop, for disabling interaction below the modal.est +- It disables scrolling of the page content while open. +- It properly manages focus; moving to the modal content, and keeping it there until the modal is closed. +- Adds the appropriate ARIA roles automatically. + diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 15feaa6c6372bc..ba95ecd8f06dd7 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -188,6 +188,7 @@ function getContents(markdown) { .replace(headerRegExp, '') // Remove header information .split(/^{{("(?:demo|component)":.*)}}$/gm) // Split markdown into an array, separating demos .flatMap((text) => text.split(/^()$/gmsu)) + .flatMap((text) => text.split(/^()$/gmsu)) .filter((content) => !emptyRegExp.test(content)); // Remove empty lines return rep; } @@ -212,23 +213,37 @@ function getDescription(markdown) { } function getCodeblock(content) { - if (content.startsWith(']*storageKey=["|'](\S*)["|'].*>/m)?.[1]; - const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map( - ([, language, tab, code]) => ({ language, tab, code }), - ); - - const blocksData = blocks.filter( - (block) => block.tab !== undefined && !emptyRegExp.test(block.code), - ); + if (!content.startsWith(']*storageKey=["|'](\S*)["|'].*>/m)?.[1]; + const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map( + ([, language, tab, code]) => ({ language, tab, code }), + ); + + const blocksData = blocks.filter( + (block) => block.tab !== undefined && !emptyRegExp.test(block.code), + ); + + return { + type: 'codeblock', + data: blocksData, + storageKey, + }; +} - return { - type: 'codeblock', - data: blocksData, - storageKey, - }; +function getFeatureList(content) { + if (!content.startsWith(' line.startsWith('- ')) + .map((line) => line.slice(2)); + + return ['
      ', ...lines.map((line) => `
    • ${line}
      • `), '
    '].join( + '', + ); } /** @@ -475,6 +490,7 @@ module.exports = { getContents, getDescription, getCodeblock, + getFeatureList, getHeaders, getTitle, renderMarkdown, diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index c66fbfebfc21cc..caaa61d0fbbd97 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -7,6 +7,7 @@ const { getContents, getDescription, getCodeblock, + getFeatureList, getHeaders, getTitle, } = require('./parseMarkdown'); @@ -155,13 +156,18 @@ ${headers.hooks return null; } } - const codeblock = getCodeblock(content); if (codeblock) { return codeblock; } + const featureList = getFeatureList(content); + + if (featureList) { + return featureList; + } + return render(content); }); From a9cb93516132f937c6fbb8acc88c2e75ebac6c87 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 14 Mar 2024 12:39:46 -0300 Subject: [PATCH 08/10] remove other approaches and focus go with the third --- .../experiments/docs/custom-components.md | 20 ---------- docs/src/modules/components/FeatureList.js | 40 ------------------- 2 files changed, 60 deletions(-) delete mode 100644 docs/src/modules/components/FeatureList.js diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md index e2119d4cea13de..e620c039a4b2e1 100644 --- a/docs/pages/experiments/docs/custom-components.md +++ b/docs/pages/experiments/docs/custom-components.md @@ -8,26 +8,6 @@ ## Feature list -### Approach 1: Componentized - -Easier to protect the styles, but worse to read and write - -{{"component": "modules/components/FeatureList.js", "features": ["Manages modal stacking when one-at-a-time just isn't enough.", "Creates a backdrop, for disabling interaction below the modal.", "It disables scrolling of the page content while open.", "It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.", "Adds the appropriate ARIA roles automatically."]}} - -### Approach 2: Plain HTML - -Easier to write and read, and potentially easier to violate the styles? - -
      -
    • Manages modal stacking when one-at-a-time just isn't enough.
      • -
    • Creates a backdrop, for disabling interaction below the modal.est
      • -
    • It disables scrolling of the page content while open.
      • -
    • It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
      • -
    • Adds the appropriate ARIA roles automatically.
      • -
    - -### Approach 3: Custom markdown - - Manages modal stacking when one-at-a-time just isn't enough. - Creates a backdrop, for disabling interaction below the modal.est diff --git a/docs/src/modules/components/FeatureList.js b/docs/src/modules/components/FeatureList.js deleted file mode 100644 index 1ff25cdbb64ec6..00000000000000 --- a/docs/src/modules/components/FeatureList.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import IconImage from 'docs/src/components/icon/IconImage'; -import { styled } from '@mui/material/styles'; - -const ListRoot = styled('ul')({ - padding: 0, - margin: 0, - marginBottom: 16, - listStyle: 'none', - display: 'flex', - flexDirection: 'column', - gap: 6, -}); - -export default function FeatureList({ features }) { - return ( - - {features.map((feature, item) => ( - - - {feature} - - ))} - - ); -} - -FeatureList.propTypes = { - features: PropTypes.arrayOf(PropTypes.string), -}; From a8644383db57f36138c73b8e92bf2e848daea0a1 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 14 Mar 2024 12:40:37 -0300 Subject: [PATCH 09/10] add instruction on the demo page --- docs/pages/experiments/docs/custom-components.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md index e620c039a4b2e1..815069181e013b 100644 --- a/docs/pages/experiments/docs/custom-components.md +++ b/docs/pages/experiments/docs/custom-components.md @@ -8,6 +8,8 @@ ## Feature list +Available through the custom `` tag. + - Manages modal stacking when one-at-a-time just isn't enough. - Creates a backdrop, for disabling interaction below the modal.est From eaed9d2ed4c2375df37dfe62b9a7f518db5680b3 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Thu, 14 Mar 2024 14:44:26 -0300 Subject: [PATCH 10/10] update custom components page name --- docs/pages/experiments/docs/custom-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md index 815069181e013b..18548cb1b10dda 100644 --- a/docs/pages/experiments/docs/custom-components.md +++ b/docs/pages/experiments/docs/custom-components.md @@ -1,6 +1,6 @@ -# Callouts +# Custom components -

    Type of callouts.

    +

    They're either custom markdown components or passed through directly via "components".

    ## Header chips