Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs-infra] Improve demos toolbar #37762

Merged
merged 2 commits into from
Jun 30, 2023
Merged

[docs-infra] Improve demos toolbar #37762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab0f5d4
[docs-infra] Improve demos toolbar
oliviertassinari Jun 30, 2023
6d9bb2a
tweak the bg: true demo styles
danilo-leal Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions docs/pages/experiments/docs/DemoInDocs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';

export default function DemoInDocs() {
return (
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>
</Stack>
);
}
4 changes: 4 additions & 0 deletions docs/pages/experiments/docs/DemoInDocs.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>
7 changes: 7 additions & 0 deletions docs/pages/experiments/docs/demos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import * as pageProps from './demos.md?@mui/markdown';

export default function Page() {
return <MarkdownDocs {...pageProps} />;
}
27 changes: 27 additions & 0 deletions docs/pages/experiments/docs/demos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Demos

<p class="description">Demos</p>

## Standard demo

{{"demo": "DemoInDocs.js"}}

## "bg": "inline" demo

{{"demo": "DemoInDocs.js", "bg": "inline"}}

## "bg": true

{{"demo": "DemoInDocs.js", "bg": true}}

## "hideToolbar": true

{{"demo": "DemoInDocs.js", "hideToolbar": true}}

## "hideToolbar": true, "bg": true

{{"demo": "DemoInDocs.js", "hideToolbar": true, "bg": true}}

## "hideToolbar": true, "bg": "inline"

{{"demo": "DemoInDocs.js", "hideToolbar": true, "bg": "inline"}}
21 changes: 6 additions & 15 deletions docs/src/modules/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ const DemoRootMaterial = styled('div', {
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.up('sm')]: {
borderRadius: '12px 12px 0 0',
borderRadius: hiddenToolbar ? 12 : '12px 12px 0 0',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix border-radius at the footer of https://mui.com/material-ui/react-grid/#interactive

...(bg === 'outlined' && {
borderLeftWidth: 1,
borderRightWidth: 1,
Expand All @@ -219,9 +219,6 @@ const DemoRootMaterial = styled('div', {
...(bg === 'inline' && {
padding: theme.spacing(0),
}),
...(hiddenToolbar && {
paddingTop: theme.spacing(1),
}),
Comment on lines -222 to -224
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This style seem irrelevant

},
/* Isolate the demo with an outline. */
...(bg === 'outlined' && {
Expand All @@ -233,10 +230,11 @@ const DemoRootMaterial = styled('div', {
}),
/* Prepare the background to display an inner elevation. */
...(bg === true && {
padding: theme.spacing(4),
backgroundColor: (theme.vars || theme).palette.grey[100],
padding: theme.spacing(3),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Match Joy UI

backgroundColor: (theme.vars || theme).palette.grey[50],
border: `1px solid ${(theme.vars || theme).palette.divider}`,
...theme.applyDarkStyles({
backgroundColor: (theme.vars || theme).palette.grey[900],
backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
}),
}),
/* Mostly meant for introduction demos. */
Expand Down Expand Up @@ -282,9 +280,6 @@ const DemoRootMaterial = styled('div', {
)} 0px, transparent 50%);`,
}),
}),
...(hiddenToolbar && {
paddingTop: theme.spacing(2),
}),
Comment on lines -285 to -287
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This style seem irrelevant

}));

const DemoRootJoy = joyStyled('div', {
Expand All @@ -296,11 +291,10 @@ const DemoRootJoy = joyStyled('div', {
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.up('sm')]: {
borderRadius: '12px 12px 0 0',
borderRadius: hiddenToolbar ? 12 : '12px 12px 0 0',
...(bg === 'outlined' && {
borderLeftWidth: 1,
borderRightWidth: 1,
borderRadius: '12px 12px 0 0',
}),
/* Make no difference between the demo and the markdown. */
...(bg === 'inline' && {
Expand Down Expand Up @@ -357,9 +351,6 @@ const DemoRootJoy = joyStyled('div', {
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
}),
}),
...(hiddenToolbar && {
paddingTop: theme.spacing(0),
}),
}));

const DemoCodeViewer = styled(HighlightedCode)(({ theme }) => ({
Expand Down
8 changes: 5 additions & 3 deletions docs/src/modules/components/DemoToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@ import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMappin
import codeSandbox from '../sandbox/CodeSandbox';
import stackBlitz from '../sandbox/StackBlitz';

const Root = styled('div')(({ theme }) => [
const Root = styled('div', {
shouldForwardProp: (prop) => prop !== 'demoOptions',
})(({ theme, demoOptions }) => [
{
display: 'none',
border: `1px solid ${(theme.vars || theme).palette.divider}`,
marginTop: -1,
marginTop: demoOptions.bg === 'inline' ? 8 : -1,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The negative margin when the bg is inline is strange, see https://mui.com/x/react-data-grid/#mit-version and https://mui.com/x/react-date-pickers/shortcuts/#customization as two examples.

marginBottom: 16,
[theme.breakpoints.up('sm')]: {
display: 'flex',
Expand Down Expand Up @@ -538,7 +540,7 @@ export default function DemoToolbar(props) {

return (
<React.Fragment>
<Root aria-label={t('demoToolbarLabel')} {...toolbarProps}>
<Root aria-label={t('demoToolbarLabel')} {...toolbarProps} demoOptions={demoOptions}>
{hasNonSystemDemos && (
<Button
id="styling-solution"
Expand Down