From 69d74f990007b48088e7828dee5f0865f57d0351 Mon Sep 17 00:00:00 2001 From: Nedal <73669345+cipherlogs@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:52:52 +0100 Subject: [PATCH 1/7] [joy-ui][docs] Remove wrong css prop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The term align-items: left doesn’t exist and also There’s no need to worry about cross axis alignment because there’s no extra height. So, you can remove it from the code without any issues. Signed-off-by: Nedal <73669345+cipherlogs@users.noreply.github.com> --- docs/data/joy/getting-started/templates/sign-in-side/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index ea764cec4e5a77..5f129f94cc6a46 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -106,7 +106,6 @@ export default function JoySignInSideTemplate() { sx={{ py: 3, display: 'flex', - alignItems: 'left', justifyContent: 'space-between', }} > From 41423bb0ccc3208900dd87dfaf0b695dfa5888e8 Mon Sep 17 00:00:00 2001 From: Nedal <73669345+cipherlogs@users.noreply.github.com> Date: Wed, 6 Mar 2024 13:06:09 +0100 Subject: [PATCH 2/7] [joy-ui][docs] Remove hacky use of clamp --- .../getting-started/templates/sign-in-side/App.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index 5f129f94cc6a46..92d8c2bb186704 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -66,8 +66,6 @@ export default function JoySignInSideTemplate() { ({ - width: - 'clamp(100vw - var(--Cover-width), (var(--Collapsed-breakpoint) - 100vw) * 999, 100vw)', + width: '100vw', + [theme.breakpoints.up(769)]: { width: '50vw' }, transition: 'width var(--Transition-duration)', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)', position: 'relative', @@ -95,9 +93,7 @@ export default function JoySignInSideTemplate() { display: 'flex', flexDirection: 'column', minHeight: '100dvh', - width: - 'clamp(var(--Form-maxWidth), (var(--Collapsed-breakpoint) - 100vw) * 999, 100%)', - maxWidth: '100%', + width: "100%", px: 2, }} > @@ -229,7 +225,8 @@ export default function JoySignInSideTemplate() { right: 0, top: 0, bottom: 0, - left: 'clamp(0px, (100vw - var(--Collapsed-breakpoint)) * 999, 100vw - var(--Cover-width))', + left: 0, + [theme.breakpoints.up(769)]: { left: '50vw' }, transition: 'background-image var(--Transition-duration), left var(--Transition-duration) !important', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)', From 7c4a17319699edfc37fa7fdeab70d7ccee5f2245 Mon Sep 17 00:00:00 2001 From: cipherlogs <73669345+0x78logs@users.noreply.github.com> Date: Wed, 6 Mar 2024 13:41:16 +0100 Subject: [PATCH 3/7] Remove unused css var '--Divider-lineColor' --- docs/data/joy/getting-started/templates/sign-in-side/App.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index 92d8c2bb186704..b308dc2534c32f 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -161,10 +161,6 @@ export default function JoySignInSideTemplate() { sx={(theme) => ({ [theme.getColorSchemeSelector('light')]: { color: { xs: '#FFF', md: 'text.tertiary' }, - '--Divider-lineColor': { - xs: '#FFF', - md: 'var(--joy-palette-divider)', - }, }, })} > From 09aa7e6f069718a6a437b7de6eeacaf8c4996bf3 Mon Sep 17 00:00:00 2001 From: cipherlogs <73669345+0x78logs@users.noreply.github.com> Date: Wed, 6 Mar 2024 14:04:19 +0100 Subject: [PATCH 4/7] [joy-ui][docs] Fix divider visibility issue on light-mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When using light mode, there’s an issue between the `769px` and `900px` width range. During this range, the divider is not visible. I recommend removing the collapsing breakpoint altogether and relying solely on the defaul `md` value breakpoint. --- .../data/joy/getting-started/templates/sign-in-side/App.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index b308dc2534c32f..53d518463cba18 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -73,8 +73,7 @@ export default function JoySignInSideTemplate() { /> ({ - width: '100vw', - [theme.breakpoints.up(769)]: { width: '50vw' }, + width: {xs: '100%', md: '50vw'}, transition: 'width var(--Transition-duration)', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)', position: 'relative', @@ -221,8 +220,7 @@ export default function JoySignInSideTemplate() { right: 0, top: 0, bottom: 0, - left: 0, - [theme.breakpoints.up(769)]: { left: '50vw' }, + left: {xs: 0, md: '50vw'}, transition: 'background-image var(--Transition-duration), left var(--Transition-duration) !important', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)', From d9ff4a3981b6292af1d594270805a1359054f11d Mon Sep 17 00:00:00 2001 From: cipherlogs <73669345+0x78logs@users.noreply.github.com> Date: Wed, 6 Mar 2024 15:19:20 +0100 Subject: [PATCH 5/7] [joy-ui][docs] Refactor FormLabel asterisks visibility There's no need for an extra import, we can use the class name directly to target all asterisk slots withing the form container. --- docs/data/joy/getting-started/templates/sign-in-side/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index 53d518463cba18..f60bef10a6c81c 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -7,7 +7,7 @@ import Button from '@mui/joy/Button'; import Checkbox from '@mui/joy/Checkbox'; import Divider from '@mui/joy/Divider'; import FormControl from '@mui/joy/FormControl'; -import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel'; +import FormLabel from '@mui/joy/FormLabel'; import IconButton, { IconButtonProps } from '@mui/joy/IconButton'; import Link from '@mui/joy/Link'; import Input from '@mui/joy/Input'; @@ -130,7 +130,7 @@ export default function JoySignInSideTemplate() { flexDirection: 'column', gap: 2, }, - [`& .${formLabelClasses.asterisk}`]: { + [`& .MuiFormLabel-asterisk`]: { visibility: 'hidden', }, }} From d4e43555b7b18c3ce4936ac40e398fbd702ecf52 Mon Sep 17 00:00:00 2001 From: cipherlogs <73669345+0x78logs@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:08:32 +0100 Subject: [PATCH 6/7] [joy-ui][docs] Simplify ColorSchemeToggle() Better provide a meaningful feedback to users and screen readers, regardless of whether the component is mounted or not. Here are the changes made: 1. When component isn't mounted + an aria-label and a default icon will be provided for better context. + the button will be disabled + `onClick` will be attached, but it won't be invoked because the button is disabled 2. When component is mounted + The user will be able to toggle the color scheme as expected --- .../templates/sign-in-side/App.tsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index f60bef10a6c81c..497db06d23cc96 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -31,28 +31,20 @@ function ColorSchemeToggle(props: IconButtonProps) { const { onClick, ...other } = props; const { mode, setMode } = useColorScheme(); const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return ; - } + + React.useEffect(() => setMounted(true), []); + return ( { - if (mode === 'light') { - setMode('dark'); - } else { - setMode('light'); - } + setMode(mode === 'light' ? 'dark' : 'light'); onClick?.(event); }} + {...other} > {mode === 'light' ? : } From dc4237d9448146b9924a48cb3f398b1c4bd63ae7 Mon Sep 17 00:00:00 2001 From: cipherlogs <73669345+0x78logs@users.noreply.github.com> Date: Wed, 6 Mar 2024 17:49:09 +0100 Subject: [PATCH 7/7] Fix code style | pnpm prettier --- .../data/joy/getting-started/templates/sign-in-side/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx index 497db06d23cc96..5e87d8cca28c47 100644 --- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx +++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx @@ -65,7 +65,7 @@ export default function JoySignInSideTemplate() { /> ({ - width: {xs: '100%', md: '50vw'}, + width: { xs: '100%', md: '50vw' }, transition: 'width var(--Transition-duration)', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)', position: 'relative', @@ -84,7 +84,7 @@ export default function JoySignInSideTemplate() { display: 'flex', flexDirection: 'column', minHeight: '100dvh', - width: "100%", + width: '100%', px: 2, }} > @@ -212,7 +212,7 @@ export default function JoySignInSideTemplate() { right: 0, top: 0, bottom: 0, - left: {xs: 0, md: '50vw'}, + left: { xs: 0, md: '50vw' }, transition: 'background-image var(--Transition-duration), left var(--Transition-duration) !important', transitionDelay: 'calc(var(--Transition-duration) + 0.1s)',