[docs] Add `theme.applyStyles` and migrate docs by siriwatknp · Pull Request #42498 · mui/material-ui

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

            '--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.

oliviertassinari

Great to see that we are getting closer to have the docs, e.g. https://mui.com/material-ui/getting-started/ use the best practice that the docs recommand.

oliviertassinari · 2024-12-28T22:51:14Z

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

-  borderBottom: `1px solid ${
-    theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-  }`,
+  borderBottom: `1px solid ${'#30363d'}`,


I think we should have expected:

Suggested change

borderBottom: `1px solid ${

theme.palette.mode === 'light' ? '#eaecef' : '#30363d'

}`,

borderBottom: `1px solid ${'#30363d'}`,

borderBottom: '1px solid #eaecef',

because the coding style doesn't fit, and the light/dark colors are inverted.

I'm cleaning this up in #44708.

oliviertassinari · 2024-12-28T22:57:20Z

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

  [`& .${autocompleteClasses.listbox}`]: {
-    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#1c2128',
+    backgroundColor: '#fff',
+


Suggested change

oliviertassinari · 2024-12-28T23:00:31Z

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

+      border: `1px solid ${'#eaecef'}`,
+    }),
  },
+  ...theme.applyStyles('dark', {


I feel like we should group light and dark values to be right next to each other, while we should think about light mode and dark mode standalone, in which world I find https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark a harmful API. I believe it's still more important to group dark/light style per selector, to so people can have a simple mental model.

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

mnajdova and others added 5 commits June 6, 2024 09:47

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

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

oliviertassinari reviewed Dec 28, 2024

View reviewed changes

Uh oh!

Conversation

siriwatknp commented Jun 2, 2024 • edited by oliviertassinari Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jun 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

danilo-leal Jun 3, 2024

Choose a reason for hiding this comment

Uh oh!

siriwatknp Jun 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danilo-leal Jun 4, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnajdova Jun 5, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

siriwatknp commented Jun 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mnajdova left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siriwatknp commented Jun 11, 2024

Uh oh!

mnajdova commented Jun 11, 2024

Uh oh!

mnajdova left a comment

Choose a reason for hiding this comment

Uh oh!

danilo-leal commented Jun 14, 2024

Uh oh!

siriwatknp commented Jun 18, 2024

Uh oh!

oliviertassinari Jun 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari left a comment

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Dec 28, 2024

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Dec 28, 2024

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Dec 28, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

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