Skip to content

[docs] Add theme.applyStyles and migrate docs #42498

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

Merged
merged 33 commits into from
Jun 11, 2024
Merged

[docs] Add theme.applyStyles and migrate docs #42498

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4f8fc0f
add docss
siriwatknp Jun 1, 2024
6fddebc
migrate test/regression
siriwatknp Jun 1, 2024
418ee0c
migrate docs/data/material
siriwatknp Jun 1, 2024
9e61124
migrate docs/data/joy
siriwatknp Jun 1, 2024
1a8b09a
migrate docs/data/system
siriwatknp Jun 1, 2024
346851e
migrate docs/src
siriwatknp Jun 2, 2024
4279553
migrate sx docs/data/material
siriwatknp Jun 2, 2024
f74cdbc
migrate sx docs/data/joy
siriwatknp Jun 2, 2024
621caf4
migrate sx docs/data/system
siriwatknp Jun 2, 2024
32c35e0
migrate sx docs/pages
siriwatknp Jun 2, 2024
36a10dd
manual migrate sx docs/data/material
siriwatknp Jun 2, 2024
0ab2456
Merge branch 'next' of https://github.com/mui/material-ui into docs/a…
siriwatknp Jun 2, 2024
9f022f5
fix lint
siriwatknp Jun 2, 2024
189256b
fix wrong migration
siriwatknp Jun 2, 2024
76c8d8e
fix AppFrame
siriwatknp Jun 2, 2024
cd8e125
fix variable
siriwatknp Jun 2, 2024
24ff08c
add bash
siriwatknp Jun 2, 2024
26c409f
fix demo
siriwatknp Jun 4, 2024
ca3dab6
run prettier
siriwatknp Jun 4, 2024
061556f
Merge branch 'next' of https://github.com/mui/material-ui into docs/a…
siriwatknp Jun 5, 2024
2d99cd2
run docs format
siriwatknp Jun 5, 2024
f4cd253
remove line breaks
siriwatknp Jun 5, 2024
9c9303c
manual update batch light to dark
siriwatknp Jun 5, 2024
2df6b9a
add deprecation for callback as a value
siriwatknp Jun 5, 2024
0d0b3e0
revert unnecessary change
siriwatknp Jun 5, 2024
24e6634
Fix GradientText
siriwatknp Jun 5, 2024
d760fb5
fix visual regression
mnajdova Jun 6, 2024
e6e442e
Merge branch 'next' of https://github.com/mui/material-ui into docs/a…
siriwatknp Jun 9, 2024
09fab94
fix lint
siriwatknp Jun 9, 2024
e92733b
run docs format
siriwatknp Jun 9, 2024
6468411
restore
siriwatknp Jun 9, 2024
eb882d6
Merge branch 'next' of https://github.com/mui/material-ui into docs/a…
siriwatknp Jun 11, 2024
5df784d
Merge branch 'next' of https://github.com/mui/material-ui into docs/a…
siriwatknp Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
6 changes: 3 additions & 3 deletions docs/data/joy/components/accordion/AccordionDepthPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ export default function AccordionDepthPanel() {
<AccordionGroup
variant="outlined"
transition="0.2s"
sx={{
sx={(theme) => ({
maxWidth: 400,
borderRadius: 'lg',
[`& .${accordionSummaryClasses.button}:hover`]: {
bgcolor: 'transparent',
},
[`& .${accordionDetailsClasses.content}`]: {
boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
[`&.${accordionDetailsClasses.expanded}`]: {
paddingBlock: '0.75rem',
},
},
}}
})}
>
<Accordion defaultExpanded>
<AccordionSummary>First accordion</AccordionSummary>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/components/accordion/AccordionDepthPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@ export default function AccordionDepthPanel() {
<AccordionGroup
variant="outlined"
transition="0.2s"
sx={{
sx={(theme) => ({
maxWidth: 400,
borderRadius: 'lg',
[`& .${accordionSummaryClasses.button}:hover`]: {
bgcolor: 'transparent',
},
[`& .${accordionDetailsClasses.content}`]: {
boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
[`&.${accordionDetailsClasses.expanded}`]: {
paddingBlock: '0.75rem',
},
},
}}
})}
>
<Accordion defaultExpanded>
<AccordionSummary>First accordion</AccordionSummary>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/components/accordion/AccordionStylingExpansion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary';
export default function AccordionStylingExpansion() {
return (
<AccordionGroup
sx={{
sx={(theme) => ({
maxWidth: 400,
[`& .${accordionClasses.root}`]: {
marginTop: '0.5rem',
Expand All @@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() {
borderColor: 'background.level2',
},
'& [aria-expanded="true"]': {
boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`,
boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
},
}}
})}
>
<Accordion>
<AccordionSummary>First accordion</AccordionSummary>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/components/accordion/AccordionStylingExpansion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary';
export default function AccordionStylingExpansion() {
return (
<AccordionGroup
sx={{
sx={(theme) => ({
maxWidth: 400,
[`& .${accordionClasses.root}`]: {
marginTop: '0.5rem',
Expand All @@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() {
borderColor: 'background.level2',
},
'& [aria-expanded="true"]': {
boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`,
boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
},
}}
})}
>
<Accordion>
<AccordionSummary>First accordion</AccordionSummary>
Expand Down
16 changes: 12 additions & 4 deletions docs/data/joy/components/aspect-ratio/FlexRowRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,18 @@ export default function FlexRowRatio() {
sx={{ gap: 2, minWidth: 300 }}
>
<AspectRatio
sx={{
flexBasis: flexBasis ? `${flexBasis}px` : undefined,
overflow: 'auto',
}}
sx={[
{
overflow: 'auto',
},
flexBasis
? {
flexBasis: `${flexBasis}px`,
}
: {
flexBasis: null,
},
]}
Copy link
Contributor

Choose a reason for hiding this comment

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

Are all of these sx ternary stuff related to the PR's goal or should we keep it separate? Also, I'm curious why this approach is better than the previous one 🤔

Copy link
Member Author

@siriwatknp siriwatknp Jun 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Ideally, it can be a separate PR. It was updated due to the sx codemod (also transforming theme.palette.mode condition).

I'm curious why this approach is better than the previous one 🤔

It's compatible with Pigment CSS. If you don't mind, I can update the sx prop docs in this PR altogether.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah cool! I'm slightly sad as this syntax is way uglier than the previous one 😅 but it feels all right to update the docs in a dedicated PR. Maybe it's worth highlighting these things (why these ternaries were picked up and missing tasks) in the PR's description, though!

>
<img
src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
Expand Down
16 changes: 12 additions & 4 deletions docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,18 @@ export default function FlexRowRatio() {
sx={{ gap: 2, minWidth: 300 }}
>
<AspectRatio
sx={{
flexBasis: flexBasis ? `${flexBasis}px` : undefined,
overflow: 'auto',
}}
sx={[
{
overflow: 'auto',
},
flexBasis
? {
flexBasis: `${flexBasis}px`,
}
: {
flexBasis: null,
},
]}
>
<img
src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
Expand Down
24 changes: 22 additions & 2 deletions docs/data/joy/components/autocomplete/GitHubLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,17 @@ export default function GitHubLabel() {
},
})}
>
<DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
<DoneIcon
sx={[
selected
? {
visibility: 'visible',
}
: {
visibility: 'hidden',
},
]}
/>
<Box
component="span"
sx={{
Expand All @@ -201,7 +211,17 @@ export default function GitHubLabel() {
<Typography level="title-sm">{option.name}</Typography>
<Typography level="body-xs">{option.description}</Typography>
</Box>
<CloseIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
<CloseIcon
sx={[
selected
? {
visibility: 'visible',
}
: {
visibility: 'hidden',
},
]}
/>
</AutocompleteOption>
)}
options={[...labels].sort((a, b) => {
Expand Down
24 changes: 22 additions & 2 deletions docs/data/joy/components/autocomplete/GitHubLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,17 @@ export default function GitHubLabel() {
},
})}
>
<DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
<DoneIcon
sx={[
selected
? {
visibility: 'visible',
}
: {
visibility: 'hidden',
},
]}
/>
<Box
component="span"
sx={{
Expand All @@ -202,7 +212,17 @@ export default function GitHubLabel() {
<Typography level="title-sm">{option.name}</Typography>
<Typography level="body-xs">{option.description}</Typography>
</Box>
<CloseIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
<CloseIcon
sx={[
selected
? {
visibility: 'visible',
}
: {
visibility: 'hidden',
},
]}
/>
</AutocompleteOption>
)}
options={[...labels].sort((a, b) => {
Expand Down
20 changes: 14 additions & 6 deletions docs/data/joy/components/card/InstagramPost.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,20 @@ export default function InstagramPost() {
{[...Array(5)].map((_, index) => (
<Box
key={index}
sx={{
borderRadius: '50%',
width: `max(${6 - index}px, 3px)`,
height: `max(${6 - index}px, 3px)`,
bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
}}
sx={[
{
borderRadius: '50%',
width: `max(${6 - index}px, 3px)`,
height: `max(${6 - index}px, 3px)`,
},
index === 0
? {
bgcolor: 'primary.solidBg',
}
: {
bgcolor: 'background.level3',
},
]}
/>
))}
</Box>
Expand Down
20 changes: 14 additions & 6 deletions docs/data/joy/components/card/InstagramPost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,20 @@ export default function InstagramPost() {
{[...Array(5)].map((_, index) => (
<Box
key={index}
sx={{
borderRadius: '50%',
width: `max(${6 - index}px, 3px)`,
height: `max(${6 - index}px, 3px)`,
bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
}}
sx={[
{
borderRadius: '50%',
width: `max(${6 - index}px, 3px)`,
height: `max(${6 - index}px, 3px)`,
},
index === 0
? {
bgcolor: 'primary.solidBg',
}
: {
bgcolor: 'background.level3',
},
]}
/>
))}
</Box>
Expand Down
12 changes: 7 additions & 5 deletions docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() {
{['Mobile', 'Laptop', 'Monitor'].map((item) => (
<ListItem key={item}>
<ListItemDecorator
sx={{
zIndex: 2,
pointerEvents: 'none',
...(value.includes(item) && { color: 'text.primary' }),
}}
sx={[
{
zIndex: 2,
pointerEvents: 'none',
},
value.includes(item) && { color: 'text.primary' },
]}
>
{
{
Expand Down
12 changes: 7 additions & 5 deletions docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() {
{['Mobile', 'Laptop', 'Monitor'].map((item) => (
<ListItem key={item}>
<ListItemDecorator
sx={{
zIndex: 2,
pointerEvents: 'none',
...(value.includes(item) && { color: 'text.primary' }),
}}
sx={[
{
zIndex: 2,
pointerEvents: 'none',
},
value.includes(item) && { color: 'text.primary' },
]}
>
{
{
Expand Down
25 changes: 23 additions & 2 deletions docs/data/joy/components/divider/DividerInCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,17 @@ export default function DividerInCard() {
Headline
</Typography>
<Divider />
<Box sx={{ display: orientation === 'horizontal' ? 'block' : 'contents' }}>
<Box
sx={[
orientation === 'horizontal'
? {
display: 'block',
}
: {
display: 'contents',
},
]}
>
<Typography level="body-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry standard dummy text ever
Expand All @@ -39,7 +49,18 @@ export default function DividerInCard() {
variant="soft"
color="neutral"
endDecorator={<ArrowForward />}
sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }}
sx={[
{
width: '100%',
},
orientation === 'horizontal'
? {
mt: 2,
}
: {
mt: 0,
},
]}
>
See more
</Button>
Expand Down
25 changes: 23 additions & 2 deletions docs/data/joy/components/divider/DividerInCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,17 @@ export default function DividerInCard() {
Headline
</Typography>
<Divider />
<Box sx={{ display: orientation === 'horizontal' ? 'block' : 'contents' }}>
<Box
sx={[
orientation === 'horizontal'
? {
display: 'block',
}
: {
display: 'contents',
},
]}
>
<Typography level="body-sm">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry standard dummy text ever
Expand All @@ -40,7 +50,18 @@ export default function DividerInCard() {
variant="soft"
color="neutral"
endDecorator={<ArrowForward />}
sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }}
sx={[
{
width: '100%',
},
orientation === 'horizontal'
? {
mt: 2,
}
: {
mt: 0,
},
]}
>
See more
</Button>
Expand Down
Loading
Loading