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] Use defaultCodeOpen where appropriate #25418

Merged
merged 3 commits into from
Mar 22, 2021
Merged

[docs] Use defaultCodeOpen where appropriate #25418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f42f41d
[docs] Use jsxImportSource instead of jsx directive
eps1lon Mar 19, 2021
3318657
jsxImportSource only works with automatic runtime
eps1lon Mar 20, 2021
d5495f5
Use defaultCodeOpen where appropriate
eps1lon Mar 20, 2021
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
4 changes: 2 additions & 2 deletions docs/src/pages/guides/interoperability/StyledComponentsDeep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
import Box from '@material-ui/core/Box';

const SliderCustomized = styled(Slider)`
const CustomizedSlider = styled(Slider)`
color: #20b2aa;

:hover {
Expand All @@ -19,7 +19,7 @@ export default function StyledComponentsDeep() {
return (
<Box sx={{ width: 300 }}>
<Slider defaultValue={30} />
<SliderCustomized defaultValue={30} />
<CustomizedSlider defaultValue={30} />
</Box>
);
}
4 changes: 2 additions & 2 deletions docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
import Box from '@material-ui/core/Box';

const SliderCustomized = styled(Slider)`
const CustomizedSlider = styled(Slider)`
color: #20b2aa;

:hover {
Expand All @@ -19,7 +19,7 @@ export default function StyledComponentsDeep() {
return (
<Box sx={{ width: 300 }}>
<Slider defaultValue={30} />
<SliderCustomized defaultValue={30} />
<CustomizedSlider defaultValue={30} />
</Box>
);
}
57 changes: 2 additions & 55 deletions docs/src/pages/guides/interoperability/interoperability.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,34 +324,7 @@ In Material-UI, all child elements have an increased specificity of 2: `.parent

The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.

{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": false}}

```jsx
import * as React from 'react';
import Slider from '@material-ui/core/Slider';
import { experimentalStyled as styled } from '@material-ui/core/styles';

const CustomizedSlider = styled(Slider)`
color: #20b2aa;

:hover {
color: #2e8b57;
}

& .MuiSlider-thumb {
border-radius: 1px;
}
`;

export default function StyledComponentsDeep1() {
return (
<div>
<Slider defaultValue={30} />
<CustomizedSlider defaultValue={30} />
</div>
);
}
```
{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}}

The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core), but you can provide your own class name with the `componentsProps` API.

Expand Down Expand Up @@ -589,33 +562,7 @@ export default function CssModulesSliderDeep2() {

Emotion's **css()** method works seamlessly with Material-UI.

{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideToolbar": true}}

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-interoperability-idymy)

```jsx
/** @jsx jsx */
import { jsx, css } from '@emotion/react';
import Slider from '@material-ui/core/Slider';

export default function EmotionCSS() {
return (
<div>
<Slider defaultValue={30} />
<Slider
defaultValue={30}
css={css`
color: #20b2aa;

:hover {
color: #2e8b57;
}
`}
/>
</div>
);
}
```
Comment on lines -592 to -618
Copy link
Member

@oliviertassinari oliviertassinari Mar 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I'm commenting as it seems to be the intended objective of the draft PR.

Mainly interested why we had a separate codesandbox for this demo.

I would ask the same question. Why remove the codesandbox and the inlined JSX? These demos are meant to show that it works in isolation. I don't think that it matters that it works in our dev environment. I would even argue that it defeats the objective. We have used codesandbox and "hideToolbar": true as much as possible. "as much as possible", meaning up to a point where the maintenance pain of the sync of the codesandbox is acceptable.

@material-ui/styled-engine is meant to hide most of the underlying engine. It helps to switch to a different engine in the future if needed, and to provide extra features. We document emotion because developers might want to use it raw.

Copy link
Member Author

Choose a reason for hiding this comment

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

We have used codesandbox and "hideToolbar": true as much as possible.

Why would we use it as much as possible?

Why remove the codesandbox and the inlined JSX?

Because we have existing code that does it for us.

Copy link
Member

@oliviertassinari oliviertassinari Mar 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Why would we use it as much as possible?

The problem is:

  1. have these demos isolated (probably what's more important, to avoid depending on specifics of the documentation)
  2. not complexify the webpack config of the documentation for one-off use cases (e.g. CSS modules)

The solution was to:

Move them outside of the documentation. However, it comes with a maintenance cost. I believe we have both use a live demo (with different customization, only demonstrating the final output, with hidden sources), as well as showing the source for the most advanced portal to mitigate the cost.

Is it possible to improve the previous solution? Yeah, likely

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh, I definitely agree with the multi-file demos. But for single file demos that work just fine in our demo setup I don't see why we wouldn't use it.

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, agree, especially if the edit to codesandbox button in the toolbar works as-is.

{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}}

### Theme

Expand Down