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

siriwatknp · 2024-06-02T15:38:15Z

Docs update

Before:

https://deploy-preview-42496--material-ui.netlify.app/material-ui/customization/dark-mode/#styling-in-dark-mode

After:

The recommended approach for styling dark mode is to use theme.applyStyles('dark', …) and stop using theme.palette.mode === 'dark' check to smoothly migrate to Pigment CSS.

This PR includes the migration of the docs using codemods with manual adjustments. The changes are huge but I don't think we can avoid it.

I have followed (at least) the PR section of the contributing guide.

…pply-styles

mui-bot · 2024-06-02T15:41:04Z

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5df784d

danilo-leal · 2024-06-03T16:01:04Z

docs/data/joy/components/aspect-ratio/FlexRowRatio.js

+          sx={[
+            {
+              overflow: 'auto',
+            },
+            flexBasis
+              ? {
+                  flexBasis: `${flexBasis}px`,
+                }
+              : {
+                  flexBasis: null,
+                },
+          ]}


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 🤔

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.

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!

docs/data/joy/components/aspect-ratio/FlexRowRatio.js

docs/data/joy/components/autocomplete/GitHubLabel.tsx

docs/data/joy/components/drawer/DrawerTransition.js

mnajdova · 2024-06-05T12:56:18Z

docs/data/joy/components/list/ExampleCollapsibleList.tsx

@@ -31,14 +31,12 @@ export default function ExampleCollapsibleList() {
            '--joy-palette-text-secondary': '#635e69',
            '--joy-palette-primary-plainColor': '#d48cff',
          },
-


I think a saw a PR for fix this, but in case it was unrelated, we shouldn't transform these lines.

docs/data/joy/components/menu/MenuIconSideNavExample.js

…pply-styles

siriwatknp · 2024-06-09T04:41:49Z

I haven't tested the changes by browsing the docs, but we certanly should do it before merging, e.g. I noticed a bug on the landing page immediatelly (Move faster text has the wrong color):

This is fixed, I missed the default color primary.

mnajdova

I noticed we are missing the current item being highlighted in the Table of contents in both light and dark mode, this is how it looks like on master (the Sizes item being highlighted):

…pply-styles

siriwatknp · 2024-06-11T03:50:34Z

I noticed we are missing the current item being highlighted in the Table of contents in both light and dark mode, this is how it looks like on master (the Sizes item being highlighted):

Can you check again, it looks normal to me.

mnajdova · 2024-06-11T09:50:40Z

Can you check again, it looks normal to me.

Looks good on the latest netlify build, not sure what was the issue.

mnajdova

I can't find anything else, I think we can merge and fix any regression in case we missed something. Awesome job Jun, both on the codemod and the migration 🤩

…pply-styles

danilo-leal · 2024-06-14T19:58:30Z

Heya! @siriwatknp found a place where it seems like the new way to write conditional styles isn't working properly: https://next--material-ui.netlify.app/experiments/docs/demos/ — the toolbar borderRadius: 0 is not being applied when openDemoSource is true (see how there is border radius on them). Similarly with the demoOptions condition.

    variants: [
      {
        props: ({ demoOptions }) => demoOptions.bg === 'inline',
        style: {
          marginTop: theme.spacing(1),
          borderTopWidth: 1,
        },
      },
      {
        props: ({ openDemoSource }) => openDemoSource,
        style: {
          borderRadius: 0,
        },
      },
    ],

siriwatknp · 2024-06-18T03:14:29Z

Heya! @siriwatknp found a place where it seems like the new way to write conditional styles isn't working properly: https://next--material-ui.netlify.app/experiments/docs/demos/ — the toolbar borderRadius: 0 is not being applied when openDemoSource is true (see how there is border radius on them). Similarly with the demoOptions condition.
    variants: [
      {
        props: ({ demoOptions }) => demoOptions.bg === 'inline',
        style: {
          marginTop: theme.spacing(1),
          borderTopWidth: 1,
        },
      },
      {
        props: ({ openDemoSource }) => openDemoSource,
        style: {
          borderRadius: 0,
        },
      },
    ],

This is a codemod bug, I will open a fix today.

oliviertassinari · 2024-06-23T20:17:15Z

docs/src/modules/components/AdDisplay.js

+  let Root = 'span';
+  if (shape === 'inline') {
+    Root = InlineShape;
+  }
+  if (shape === 'image') {
+    Root = ImageShape;
+  }
  /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
  return (
-    <Root shape={shape === 'inline' ? 'inline' : adShape} className={className}>
+    <Root className={className}>


This logic isn't equivalent. I have opened to fix this: #42735.

siriwatknp added 12 commits June 1, 2024 18:31

add docss

4f8fc0f

migrate test/regression

6fddebc

migrate docs/data/material

418ee0c

migrate docs/data/joy

9e61124

migrate docs/data/system

1a8b09a

migrate docs/src

346851e

migrate sx docs/data/material

4279553

migrate sx docs/data/joy

f74cdbc

migrate sx docs/data/system

621caf4

migrate sx docs/pages

32c35e0

manual migrate sx docs/data/material

36a10dd

Merge branch 'next' of https://github.com/mui/material-ui into docs/a…

0ab2456

…pply-styles

siriwatknp added the docs Improvements or additions to the documentation label Jun 2, 2024

siriwatknp added 5 commits June 2, 2024 11:45

fix lint

9f022f5

fix wrong migration

189256b

fix AppFrame

76c8d8e

fix variable

cd8e125

add bash

24ff08c

zannager requested a review from zanivan June 3, 2024 15:02

danilo-leal reviewed Jun 3, 2024

View reviewed changes

siriwatknp mentioned this pull request Jun 4, 2024

[docs] Add theme.applyStyles() documentation with a codemod #40963

Closed

3 tasks

siriwatknp added 2 commits June 3, 2024 20:25

fix demo

26c409f

run prettier

ca3dab6

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 4, 2024

mnajdova reviewed Jun 5, 2024

View reviewed changes

docs/data/joy/components/aspect-ratio/FlexRowRatio.js Outdated Show resolved Hide resolved

mnajdova reviewed Jun 5, 2024

View reviewed changes

docs/data/joy/components/autocomplete/GitHubLabel.tsx Show resolved Hide resolved

mnajdova reviewed Jun 5, 2024

View reviewed changes

docs/data/joy/components/drawer/DrawerTransition.js Show resolved Hide resolved

mnajdova reviewed Jun 5, 2024

View reviewed changes

docs/data/joy/components/menu/MenuIconSideNavExample.js Show resolved Hide resolved

siriwatknp and others added 6 commits June 5, 2024 19:03

Fix GradientText

24e6634

fix visual regression

d760fb5

Merge branch 'next' of https://github.com/mui/material-ui into docs/a…

e6e442e

…pply-styles

fix lint

09fab94

run docs format

e92733b

restore

6468411

siriwatknp mentioned this pull request Jun 10, 2024

[codemod] Improve styled and sx prop transformation #42598

Merged

1 task

siriwatknp requested review from danilo-leal and mnajdova June 10, 2024 07:10

mnajdova reviewed Jun 10, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 10, 2024

Merge branch 'next' of https://github.com/mui/material-ui into docs/a…

eb882d6

…pply-styles

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 11, 2024

siriwatknp requested a review from mnajdova June 11, 2024 04:46

mnajdova approved these changes Jun 11, 2024

View reviewed changes

Merge branch 'next' of https://github.com/mui/material-ui into docs/a…

5df784d

…pply-styles

siriwatknp enabled auto-merge (squash) June 11, 2024 10:45

siriwatknp merged commit 219380c into mui:next Jun 11, 2024
18 checks passed

mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Jun 12, 2024

[docs] Add theme.applyStyles and migrate docs (mui#42498)

ebe9a16

This was referenced Jun 18, 2024

[docs] Fix wrong transformation #42674

Closed

[docs-infra] Fix wrong migration #42675

Merged

oliviertassinari mentioned this pull request Jun 23, 2024

[docs-infra] Fix visual look of in-house ad #42735

Merged

oliviertassinari reviewed Jun 23, 2024

View reviewed changes

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[docs] Add theme.applyStyles and migrate docs (mui#42498)

dd7e51c

oliviertassinari mentioned this pull request Nov 24, 2024

[docs-infra] Fix TOC RTL padding regression #44535

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

siriwatknp commented Jun 2, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Jun 2, 2024 •

edited

Loading

danilo-leal Jun 3, 2024

siriwatknp Jun 4, 2024 •

edited

Loading

danilo-leal Jun 4, 2024

mnajdova Jun 5, 2024

siriwatknp commented Jun 9, 2024 •

edited

Loading

mnajdova left a comment •

edited

Loading

siriwatknp commented Jun 11, 2024

mnajdova commented Jun 11, 2024

mnajdova left a comment

danilo-leal commented Jun 14, 2024

siriwatknp commented Jun 18, 2024

oliviertassinari Jun 23, 2024 •

edited

Loading

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

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

Conversation

siriwatknp commented Jun 2, 2024 • edited by oliviertassinari Loading

mui-bot commented Jun 2, 2024 • edited Loading

Netlify deploy preview

Bundle size report

danilo-leal Jun 3, 2024

Choose a reason for hiding this comment

siriwatknp Jun 4, 2024 • edited Loading

Choose a reason for hiding this comment

danilo-leal Jun 4, 2024

Choose a reason for hiding this comment

mnajdova Jun 5, 2024

Choose a reason for hiding this comment

siriwatknp commented Jun 9, 2024 • edited Loading

mnajdova left a comment • edited Loading

Choose a reason for hiding this comment

siriwatknp commented Jun 11, 2024

mnajdova commented Jun 11, 2024

mnajdova left a comment

Choose a reason for hiding this comment

danilo-leal commented Jun 14, 2024

siriwatknp commented Jun 18, 2024

oliviertassinari Jun 23, 2024 • edited Loading

Choose a reason for hiding this comment

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

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

siriwatknp commented Jun 2, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Jun 2, 2024 •

edited

Loading

siriwatknp Jun 4, 2024 •

edited

Loading

siriwatknp commented Jun 9, 2024 •

edited

Loading

mnajdova left a comment •

edited

Loading

oliviertassinari Jun 23, 2024 •

edited

Loading