feat(dark mode): fix dark mode radio & radio group

gitsindonesia · Feb 1, 2023 · ef00512 · ef00512
1 parent c1432ee
commit ef00512
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 48 deletions.
diff --git a/packages/forms/src/radio/VRadio.dark.scss b/packages/forms/src/radio/VRadio.dark.scss
@@ -1,9 +1,13 @@
 .dark {
   .v-radio {
     --v-radio-bg-color: theme('colors.neutral.700');
-    --v-radio-border-color: theme('colors.gray.700');
+    --v-radio-border-color: theme('colors.neutral.700');
+
+    // disabled
+    --v-radio-disabled-border-color: theme('colors.neutral.400');
+    --v-radio-disabled-bg-color: theme('colors.neutral.400');
 
     // label
-    --v-radio-label-color: theme('colors.gray.200');
+    --v-radio-label-color: theme('colors.neutral.200');
   }
 }
diff --git a/packages/forms/src/radio/VRadio.scss b/packages/forms/src/radio/VRadio.scss
@@ -31,8 +31,8 @@
 
     &:disabled {
       @apply cursor-not-allowed;
-      border-color: var(--v-radio-disabled-border-color);
-      background-color: var(--v-radio-disabled-bg-color);
+      --v-radio-bg-color: var(--v-radio-disabled-border-color);
+      --v-radio-border-color: var(--v-radio-disabled-bg-color);
     }
   }
 

diff --git a/packages/forms/src/radio/VRadio.stories.ts b/packages/forms/src/radio/VRadio.stories.ts
@@ -13,30 +13,18 @@ import './VRadio.dark.scss';
 export default {
   title: 'Forms/Radio',
   component: VRadio,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: sizes,
-    },
-    color: {
-      control: 'select',
-      options: themeColors,
-    },
-  },
-  args: {
-    modelValue: '',
-    label: 'Radio',
-    color: '',
-    size: '',
-  },
 } as Meta;
 
 const Template: Story = (args) => ({
   components: {VRadio},
   setup() {
-    return {args};
+    const value = ref('1');
+    return {args, value};
   },
-  template: `<VRadio v-bind='args'>${args.label}</VRadio>`,
+  template: `
+  <VRadio v-model="value" value="1" label="Choose 1" id="1" />
+  <VRadio v-model="value" value="0" label="Choose 0" id="0" />
+  `,
 });
 
 export const Radio = Template.bind({});
@@ -214,31 +202,14 @@ TestInputState.args = {
 export const DarkMode: Story<{}> = () => ({
   components: {VRadio},
   setup() {
-    const items = ['fire', 'earth', 'wind', 'water'];
-    const modelValue = ref();
-    return {items, modelValue};
+    const value = ref('1');
+    return {value};
   },
   template: `
   <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
-    <p>Default</p>
-    <VRadio
-      v-for="item in items"
-      v-model="modelValue"
-      :key="item"
-      :id="item"
-      :label="item"
-      :value="item"
-    />
-    <p class="mt-5 mb-2">Disabled</p>
-    <VRadio
-      v-for="item in items"
-      v-model="modelValue"
-      :key="item"
-      :id="item"
-      :label="item"
-      :value="item"
-      disabled
-    />
+    <VRadio v-model="value" value="1" label="Choose 1" id="1" />
+    <VRadio v-model="value" value="0" label="Choose 0" id="0" />
+    <VRadio v-model="value" value="2" label="Disabled" disabled />
   </div>
   `,
 });
diff --git a/packages/forms/src/radio/VRadioGroup.dark.scss b/packages/forms/src/radio/VRadioGroup.dark.scss
@@ -7,8 +7,8 @@
     --v-radio-group-bg-color: theme('colors.neutral.700');
 
     // disabled
-    --v-radio-group-disabled-border-color: theme('colors.neutral.500');
-    --v-radio-group-disabled-bg-color: theme('colors.neutral.500');
+    --v-radio-group-disabled-border-color: theme('colors.neutral.400');
+    --v-radio-group-disabled-bg-color: theme('colors.neutral.400');
 
     // items text
     --v-radio-group-items-text-color: theme('colors.neutral.200');

diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
@@ -150,8 +150,8 @@ const buttonVariants = ['default', 'outlined', 'text', 'disabled', 'loading'];
             {text: 'Option 3', value: '3'},
           ]"
         />
-        <v-radio disabled label="Option 1" value="1" />
-        <v-radio disabled label="Option 2" value="2" />
+        <v-radio disabled label="Option 1" value="1" name="gender" />
+        <v-radio disabled label="Option 2" value="2" name="gender" />
         <v-radio-group
           disabled
           placeholder="Placeholder"

diff --git a/packages/ui/src/style.dark.scss b/packages/ui/src/style.dark.scss
@@ -18,6 +18,7 @@
 @import '@gits-id/forms/src/forms.dark.scss';
 @import '@gits-id/forms/src/checkbox/VCheckbox.dark.scss';
 @import '@gits-id/forms/src/radio/VRadio.dark.scss';
+@import '@gits-id/forms/src/radio/VRadioGroup.dark.scss';
 @import '@gits-id/list/src/List.dark.scss';
 @import '@gits-id/menus/src/VMenus.dark.scss';
 @import '@gits-id/modal/src/VModal.dark.scss';