Merge pull request #338 from belltalion/feat-toggle

Feat toggle

Author: belltalion

.changeset/true-stars-listen.md

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

packages/components/src/components/Radio/Radio.stories.tsx

@@ -8,20 +8,6 @@ export default {
 export const Default = {
   args: {
     checked: undefined,
-    colors: {
-      primary: 'var(--primary)',
-      border: 'var(--border)',
-      text: 'var(--text)',
-      bg: 'var(--bg)',
-      hoverBg: 'var(--hoverBg)',
-      hoverBorder: 'var(--hoverBorder)',
-      hoverColor: 'var(--hoverColor)',
-      checkedBg: 'var(--checkedBg)',
-      checkedBorder: 'var(--checkedBorder)',
-      checkedColor: 'var(--checkedColor)',
-      disabledBg: 'var(--disabledBg)',
-      disabledColor: 'var(--disabledColor)',
-    },
     name: 'radio',
     children: '옵션1',
     variant: 'default',

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

@@ -28,7 +28,7 @@ exports[`Radio > should Radio snapshot 2`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -69,7 +69,7 @@ exports[`Radio > should Radio snapshot 4`] = `
     />
     <div
       aria-disabled="true"
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -111,7 +111,7 @@ exports[`Radio > should Radio snapshot 6`] = `
     />
     <div
       aria-disabled="true"
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
       style="width: 500px;"
     />
@@ -154,7 +154,7 @@ exports[`Radio > should Radio snapshot 8`] = `
     />
     <div
       aria-disabled="true"
-      class="className cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
+      class="className cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 "
       data-radio-button="true"
     />
   </label>
@@ -192,7 +192,7 @@ exports[`Radio > should Radio snapshot 10`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-6px 0 0 6px--1"
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-8px 0 0 8px--1"
       data-radio-button="true"
     />
   </label>
@@ -210,7 +210,7 @@ exports[`Radio > should Radio snapshot 11`] = `
       type="radio"
     />
     <div
-      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-16px--1 padding-top-0-16px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 6px 6px 0--1"
+      class=" cursor-0-not-allowed-14172363753176421546-1 background-0-var(--bg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid--1 border-color-0-$border--1 color-0-var(--text,light-dark(#000,#FFF))--1 cursor-0-pointer--1 display-0-flex--1 padding-right-0-32px--1 padding-left-0-32px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 font-weight-0-600-13599873562982711818-1 background-0-var(--checkedBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 80%),color-mix(in srgb,var(--primary) 10%,black 80%)))-13599873562982711818-1 border-color-0-var(--checkedBorder,var(--primary))-13599873562982711818-1 color-0-var(--checkedColor,var(--primary))-13599873562982711818-1 background-0-var(--hoverBg,light-dark(color-mix(in srgb,var(--primary) 10%,white 90%),color-mix(in srgb,var(--primary) 10%,black 90%)))-17878486696247413219-1 border-color-0-var(--hoverBorder,var(--primary))-17878486696247413219-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#47474A))-13062485276290174291-1 color-0-var(--disabledColor,light-dark(#D6D7DE,#373737))-13062485276290174291-1 transition-0-background-color .25s,border-color .25s--1 width-0-fit-content--1 border-radius-0-0 8px 8px 0--1"
       data-radio-button="true"
     />
   </label>

packages/components/src/components/Radio/index.tsx

@@ -144,15 +144,15 @@ export function Radio({
           border="1px solid"
           borderColor="$border"
           borderRadius={
-            firstButton ? '6px 0 0 6px' : lastButton ? '0 6px 6px 0' : undefined
+            firstButton ? '8px 0 0 8px' : lastButton ? '0 8px 8px 0' : undefined
           }
           className={className}
           color="var(--text, light-dark(#000, #fff))"
           cursor="pointer"
           data-radio-button
           display="flex"
           px={8}
-          py={4}
+          py={3}
           selectors={{
             // checked
             '[data-radio-input]:checked + &:not([aria-disabled=true])': {

packages/components/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -9,20 +9,6 @@ export const Default = {
   args: {
     disabled: false,
     name: 'radio',
-    colors: {
-      primary: 'var(--primary)',
-      border: 'var(--border)',
-      text: 'var(--text)',
-      bg: 'var(--bg)',
-      hoverBg: 'var(--hoverBg)',
-      hoverBorder: 'var(--hoverBorder)',
-      hoverColor: 'var(--hoverColor)',
-      checkedBg: 'var(--checkedBg)',
-      checkedBorder: 'var(--checkedBorder)',
-      checkedColor: 'var(--checkedColor)',
-      disabledBg: 'var(--disabledBg)',
-      disabledColor: 'var(--disabledColor)',
-    },
     options: [
       {
         value: '1',