Merge pull request #344 from belltalion/fix-toggle

Fix toggle

Author: belltalion

.changeset/four-plants-jam.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix toggle ui

packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Toggle > should Toggle snapshot 1`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -21,7 +21,7 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 <div>
   <div
     aria-disabled="true"
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -38,7 +38,7 @@ exports[`Toggle > should Toggle snapshot 2`] = `
 exports[`Toggle > should Toggle snapshot 3`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -55,7 +55,7 @@ exports[`Toggle > should Toggle snapshot 3`] = `
 exports[`Toggle > should Toggle snapshot 4`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
     role="group"
   >
     <div
@@ -72,7 +72,7 @@ exports[`Toggle > should Toggle snapshot 4`] = `
 exports[`Toggle > should Toggle snapshot 5`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -90,7 +90,7 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 <div>
   <div
     aria-disabled="true"
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -107,7 +107,7 @@ exports[`Toggle > should Toggle snapshot 6`] = `
 exports[`Toggle > should Toggle snapshot 7`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -124,7 +124,7 @@ exports[`Toggle > should Toggle snapshot 7`] = `
 exports[`Toggle > should Toggle snapshot 8`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -141,7 +141,7 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 exports[`Toggle > should Toggle snapshot 9`] = `
 <div>
   <div
-    class="test-toggle-wrapper   border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class="test-toggle-wrapper   border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
   >
     <div
@@ -158,7 +158,7 @@ exports[`Toggle > should Toggle snapshot 9`] = `
 exports[`Toggle > should Toggle snapshot 10`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255  background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
     role="group"
     style="background-color: blue;"
   >
@@ -177,7 +177,7 @@ exports[`Toggle > should Toggle snapshot 10`] = `
 exports[`Toggle > should Toggle snapshot 11`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
     role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >
@@ -196,7 +196,7 @@ exports[`Toggle > should Toggle snapshot 11`] = `
 exports[`Toggle > should Toggle snapshot 12`] = `
 <div>
   <div
-    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255  padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
+    class=" border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 test-id-0-toggle-wrapper--255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255   background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
     role="group"
     style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
   >

packages/components/src/components/Toggle/index.tsx

@@ -68,7 +68,7 @@ export function Toggle({
         h={isDefault ? '28px' : '8px'}
         justifyContent={resultValue && 'flex-end'}
         onClick={() => !disabled && handleToggle(resultValue)}
-        p={!isDefault && 1}
+        p={isDefault && 1}
         position="relative"
         role="group"
         selectors={{