[base-ui][Switch] Refine demos (mui#39822)

Co-authored-by: mnajdova <[email protected]>
oliviertassinari · Nov 11, 2023 · 5e5d03b · 5e5d03b
1 parent 7cbafe9
commit 5e5d03b
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 18 deletions.
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
@@ -120,6 +120,7 @@ function Styles() {
       }
 
       .CustomSwitchIntroduction-thumb {
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         display: block;
         width: 16px;
         height: 16px;

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
@@ -120,6 +120,7 @@ function Styles() {
       }
 
       .CustomSwitchIntroduction-thumb {
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
         display: block;
         width: 16px;
         height: 16px;

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -98,6 +98,7 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.thumb} {
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
     width: 16px;
     height: 16px;

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -98,6 +98,7 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.thumb} {
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     display: block;
     width: 16px;
     height: 16px;

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -42,7 +42,7 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative inline-block w-[38px] h-[24px] m-2.5  ${
+              `group relative inline-block w-[38px] h-[24px] m-2.5 ${
                 ownerState.disabled
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer'
@@ -73,10 +73,10 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:shadow-purple-200 dark:focus:shadow-purple-600 
+              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 group-[.Mui-focusVisible]:shadow-outline-switch
               ${
                 ownerState.checked
-                  ? 'bg-purple-500 border-none'
+                  ? 'bg-purple-500'
                   : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
               } `,
               resolvedSlotProps?.className,
@@ -93,7 +93,7 @@ const Switch = React.forwardRef((props, ref) => {
             className: clsx(
               `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
                 ownerState.checked
-                  ? 'left-[18px] bg-white border-none shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
+                  ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
                   : 'left-[4px] bg-white'
               }  relative transition-all`,
               resolvedSlotProps?.className,

diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -42,7 +42,7 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative inline-block w-[38px] h-[24px] m-2.5  ${
+              `group relative inline-block w-[38px] h-[24px] m-2.5 ${
                 ownerState.disabled
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer'
@@ -73,10 +73,10 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:shadow-purple-200 dark:focus:shadow-purple-600 
+              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 group-[.Mui-focusVisible]:shadow-outline-switch
               ${
                 ownerState.checked
-                  ? 'bg-purple-500 border-none'
+                  ? 'bg-purple-500'
                   : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
               } `,
               resolvedSlotProps?.className,
@@ -93,7 +93,7 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
             className: clsx(
               `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
                 ownerState.checked
-                  ? 'left-[18px] bg-white border-none shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
+                  ? 'left-[18px] bg-white shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
                   : 'left-[4px] bg-white'
               }  relative transition-all`,
               resolvedSlotProps?.className,

diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js
@@ -34,6 +34,7 @@ function BasicSwitch(props) {
 const blue = {
   200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -70,7 +71,7 @@ const BasicSwitchRoot = styled('span')(
   }
     
   &.Switch-focusVisible {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &.Switch-disabled {
@@ -79,11 +80,14 @@ const BasicSwitchRoot = styled('span')(
   }
 
   &.Switch-checked {
-    border: 1px solid transparent;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     background: ${blue[500]};
     box-shadow: inset 0px 1px 1px ${
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
     };
+    &.Switch-focusVisible {
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+    }
   }
   
   `,
@@ -110,7 +114,7 @@ const BasicSwitchThumb = styled('span')(
   left: 2px;
   border-radius: 16px;
   background-color: #fff;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
   position: relative;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -121,7 +125,7 @@ const BasicSwitchThumb = styled('span')(
   &.Switch-checked {
     left: 17px;
     background-color: #fff;
-    border: 1px solid transparent;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
   }
 `,
 );
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx
@@ -34,6 +34,7 @@ function BasicSwitch(props: UseSwitchParameters) {
 const blue = {
   200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -70,7 +71,7 @@ const BasicSwitchRoot = styled('span')(
   }
     
   &.Switch-focusVisible {
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &.Switch-disabled {
@@ -79,11 +80,14 @@ const BasicSwitchRoot = styled('span')(
   }
 
   &.Switch-checked {
-    border: 1px solid transparent;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     background: ${blue[500]};
     box-shadow: inset 0px 1px 1px ${
       theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
     };
+    &.Switch-focusVisible {
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+    }
   }
   
   `,
@@ -110,7 +114,7 @@ const BasicSwitchThumb = styled('span')(
   left: 2px;
   border-radius: 16px;
   background-color: #fff;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
   position: relative;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -121,7 +125,7 @@ const BasicSwitchThumb = styled('span')(
   &.Switch-checked {
     left: 17px;
     background-color: #fff;
-    border: 1px solid transparent;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
   }
 `,
 );
diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -49,7 +49,7 @@ export const getHtml = ({
               'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
               'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
               'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
-              'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
+              'outline-switch': '0 0 1px 3px rgba(168, 85, 247, 0.35)',
             },
             cursor: {
               inherit: 'inherit',

diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -24,7 +24,7 @@ module.exports = {
         'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
         'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
         'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
-        'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
+        'outline-switch': '0 0 1px 3px rgba(168, 85, 247, 0.35)',
       },
       cursor: {
         inherit: 'inherit',