[docs] Improve Joy UI tutorial demo #34653
Conversation
oliviertassinari
force-pushed
the
fix-404
branch
3 times, most recently
from
55f2b43
to
7196bb2
Compare
oliviertassinari
force-pushed
the
fix-404
branch
from
7196bb2
to
a5c053b
Compare
| if (mode === 'light') { | ||
| setMode('dark'); | ||
| } else { | ||
| setMode('light'); | ||
| } | ||
| setMode(mode === 'light' ? 'dark' : 'light'); |
There was a problem hiding this comment.
It seems mentally simpler to follow by calling setMode once rather than branching it entirely.
| @@ -17,7 +17,7 @@ By the end, you should understand how to: | |||
|
|
|||
| Here's what the final product looks like—click on the **< >** icon underneath the demo to see the full source code: | |||
|
|
|||
| {{"demo": "LoginFinal.js", "hideToolbar": false, "bg": true}} | |||
| {{"demo": "LoginFinal.js"}} | |||
There was a problem hiding this comment.
I have removed hideToolbar": false because it's already the default. I have added a check to avoid this case going forward.
I have removed "bg": true so it looks the same when you export to codesandbox https://codesandbox.io/s/m1r0yt?file=/demo.tsx/import it in your codebase.
| }} | ||
| > | ||
| {mode === 'light' ? 'Turn dark' : 'Turn light'} | ||
| </Button> | ||
| ); | ||
| }; | ||
| } | ||
| ``` | ||
|
|
||
| Finally, add your newly built `<ModeToggle />` button above `<Sheet />`: | ||
|
|
||
| ```diff |
There was a problem hiding this comment.
The correct format of the git diff output is to prefix all the lines with one character:
-if something was removed+if something was added
It looks strange otherwise.
| @@ -3,6 +3,7 @@ | |||
| /inbox* / 301 | |||
| /trash / 301 | |||
| /spam / 301 | |||
| /sign-up / 301 | |||
There was a problem hiding this comment.
To fix https://app.ahrefs.com/site-audit/3524616/33/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2Cdepth%2Ccompliant%2CincomingAllLinks%2Corigin&filterCollapsed=true&filterId=91013c8aafad4fe1f7a0ad504eccad42&issueId=c64da643-d0f4-11e7-8ed1-001e67ed4656&sorting=-pageRating. We might get a MUI real page in the future.
| @@ -6,7 +6,7 @@ import TextField from '@mui/joy/TextField'; | |||
| import Button from '@mui/joy/Button'; | |||
| import Link from '@mui/joy/Link'; | |||
|
|
|||
| const ModeToggle = () => { | |||
| function ModeToggle() { | |||
There was a problem hiding this comment.
I think the convention we use in the docs to create components. It's related to this PR https://github.com/mui/material-ui/pull/34644/files#diff-559bb65f49006b76c9495639f8c69571711721a76d0a19ae279ca4f93772e6ffR9
| @@ -42,7 +38,7 @@ export default function App() { | |||
| <ModeToggle /> | |||
| <Sheet | |||
| sx={{ | |||
| maxWidth: 400, | |||
| width: 300, | |||
There was a problem hiding this comment.
So it looks better?
Before
After
After
| > | ||
| Log in | ||
| </Button> | ||
| <Button sx={{ mt: 1 /* margin top */ }}>Log in</Button> |
There was a problem hiding this comment.
This takes a lot less vertical space
| src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=forma&fit=cropt&h=80" | ||
| srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=160 2x" |
There was a problem hiding this comment.
I started to fix https://app.ahrefs.com/site-audit/3524616/33/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2Cdepth%2Ccompliant%2CincomingAllLinks%2Corigin&filterCollapsed=true&filterId=91013c8aafad4fe1f7a0ad504eccad42&issueId=c64da643-d0f4-11e7-8ed1-001e67ed4656&sorting=-pageRating and made a follow-up on #34569.