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] Update unstyled demos to not depend on @material-ui/core #26869

Merged
merged 9 commits into from
Jun 28, 2021
Merged

[docs] Update unstyled demos to not depend on @material-ui/core #26869

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6b2887e
init
mnajdova Jun 21, 2021
f70e232
prettier
mnajdova Jun 21, 2021
e61fac5
remove unused theme
mnajdova Jun 21, 2021
5031898
fix lint
mnajdova Jun 21, 2021
35554f6
fix dark mode
mnajdova Jun 21, 2021
c2b7a41
Update docs/src/pages/components/badges/UnstyledBadge.js
mnajdova Jun 25, 2021
d397f28
Update docs/src/pages/components/badges/UnstyledBadge.tsx
mnajdova Jun 25, 2021
9c0e7c4
Update docs/src/pages/components/slider/UnstyledSlider.tsx
mnajdova Jun 25, 2021
5d0313d
prettier
mnajdova Jun 25, 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
10 changes: 5 additions & 5 deletions docs/src/pages/components/badges/UnstyledBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as React from 'react';
import { styled } from '@material-ui/core/styles';
import { styled, Box } from '@material-ui/system';
import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
import Box from '@material-ui/core/Box';
import Stack from '@material-ui/core/Stack';

const StyledBadge = styled(BadgeUnstyled)`
box-sizing: border-box;
Expand Down Expand Up @@ -74,13 +72,15 @@ function BadgeContent() {

export default function UnstyledBadge() {
return (
<Stack spacing={4} direction="row">
<Box
sx={{ '& > :not(style) + :not(style)': { ml: (theme) => theme.spacing(4) } }}
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
>
<StyledBadge badgeContent={5} overlap="circular">
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot" overlap="circular">
<BadgeContent />
</StyledBadge>
</Stack>
</Box>
);
}
10 changes: 5 additions & 5 deletions docs/src/pages/components/badges/UnstyledBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as React from 'react';
import { styled } from '@material-ui/core/styles';
import { styled, Box } from '@material-ui/system';
import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
import Box from '@material-ui/core/Box';
import Stack from '@material-ui/core/Stack';

const StyledBadge = styled(BadgeUnstyled)`
box-sizing: border-box;
Expand Down Expand Up @@ -74,13 +72,15 @@ function BadgeContent() {

export default function UnstyledBadge() {
return (
<Stack spacing={4} direction="row">
Copy link
Member

@oliviertassinari oliviertassinari Jun 21, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Why not keep the Stack? It's meant as a CSS helper. It might where the limit between @material-ui/system and @material-ui/core is. Developers won't use it when they copy the demo.

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 goal was to eliminate any dependency on @material-ui/core. Once we have a dedicated doc for the unstyled components I think it would be strange that we have the @material-ui/core as a dependency here. Anyway, no strong opinion as as you mention it is a CSS helper, so I could revert this change.

Copy link
Member

@oliviertassinari oliviertassinari Jun 21, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Interesting problem, not sure what would be best, no objection to moving forward with your approach.

  • Stack break the system only dependency narrative
  • Stack is superior to Box in this case
  • Stack is not meant to be part of the examples, but to support the demo ("demo" is the whole file, "example" is one instance of the demo".
  • Stack is not available in the system, maybe Grid, Typography, Stack should be in the system, generic style helpers unrelated to Material Design.

We could likely add the Stack back once migrated to the system?

Copy link
Member Author

Choose a reason for hiding this comment

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

Stack is not available in the system, maybe Grid, Typography, Stack should be in the system, generic style helpers unrelated to Material Design.

This makes sense 👍 will leave the comment open for reference, and will keep the demo without the Stack component for now.

Copy link
Member

Choose a reason for hiding this comment

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

What changed now? I remember also trying to remove unrelated components from demos and I think I was shut down.

To be clear: I'm very much in favor of removing unrelated components like Stack or Box because they make the learning curve steeper.

Copy link
Member

Choose a reason for hiding this comment

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

Oops, the conversation got moved to #26869 (comment).

<Box
sx={{ '& > :not(style) + :not(style)': { ml: (theme) => theme.spacing(4) } }}
mnajdova marked this conversation as resolved.
Show resolved Hide resolved
>
<StyledBadge badgeContent={5} overlap="circular">
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot" overlap="circular">
<BadgeContent />
</StyledBadge>
</Stack>
</Box>
);
}
3 changes: 1 addition & 2 deletions docs/src/pages/components/modal/ModalUnstyled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import { styled, Box } from '@material-ui/system';
import ModalUnstyled from '@material-ui/unstyled/ModalUnstyled';

const StyledModal = styled(ModalUnstyled)`
Expand Down
3 changes: 1 addition & 2 deletions docs/src/pages/components/modal/ModalUnstyled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import { styled, Box } from '@material-ui/system';
import ModalUnstyled from '@material-ui/unstyled/ModalUnstyled';

const StyledModal = styled(ModalUnstyled)`
Expand Down
18 changes: 8 additions & 10 deletions docs/src/pages/components/slider/UnstyledSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import * as React from 'react';
import { styled, alpha } from '@material-ui/core/styles';
import { styled, alpha, Box } from '@material-ui/system';
import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
import Box from '@material-ui/core/Box';

const StyledSlider = styled(SliderUnstyled)(
({ theme }) => `
color: ${theme.palette.primary.main};
const StyledSlider = styled(SliderUnstyled)`
color: #1976d2;
height: 4px;
width: 100%;
padding: 13px 0;
Expand All @@ -15,6 +13,7 @@ const StyledSlider = styled(SliderUnstyled)(
touch-action: none;
-webkit-tap-highlight-color: transparent;
opacity: 0.75;

&:hover {
opacity: 1;
}
Expand Down Expand Up @@ -47,19 +46,18 @@ const StyledSlider = styled(SliderUnstyled)(
border-radius: 50%;
outline: 0;
border: 2px solid currentColor;
background-color: ${theme.palette.getContrastText(theme.palette.primary.main)};
background-color: white;

:hover,
&.Mui-focusVisible {
box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.15)};
box-shadow: 0 0 0 0.25rem ${alpha('#1976d2', 0.15)};
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
}

&.Mui-active {
box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.3)};
box-shadow: 0 0 0 0.25rem ${alpha('#1976d2', 0.3)};
}
}
`,
);
`;

export default function UnstyledSlider() {
return (
Expand Down
18 changes: 8 additions & 10 deletions docs/src/pages/components/slider/UnstyledSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import * as React from 'react';
import { styled, alpha } from '@material-ui/core/styles';
import { styled, alpha, Box } from '@material-ui/system';
import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
import Box from '@material-ui/core/Box';

const StyledSlider = styled(SliderUnstyled)(
({ theme }) => `
color: ${theme.palette.primary.main};
const StyledSlider = styled(SliderUnstyled)`
color: #1976d2;
height: 4px;
width: 100%;
padding: 13px 0;
Expand All @@ -15,6 +13,7 @@ const StyledSlider = styled(SliderUnstyled)(
touch-action: none;
-webkit-tap-highlight-color: transparent;
opacity: 0.75;

&:hover {
opacity: 1;
}
Expand Down Expand Up @@ -47,19 +46,18 @@ const StyledSlider = styled(SliderUnstyled)(
border-radius: 50%;
outline: 0;
border: 2px solid currentColor;
background-color: ${theme.palette.getContrastText(theme.palette.primary.main)};
background-color: white;
mnajdova marked this conversation as resolved.
Show resolved Hide resolved

:hover,
&.Mui-focusVisible {
box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.15)};
box-shadow: 0 0 0 0.25rem ${alpha('#1976d2', 0.15)};
}

&.Mui-active {
box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.3)};
box-shadow: 0 0 0 0.25rem ${alpha('#1976d2', 0.3)};
}
}
`,
);
`;

export default function UnstyledSlider() {
return (
Expand Down