feat(VRadioGroup): improve styling for v-radio-group with dark mode s…

…upport
gitsindonesia · Feb 1, 2023 · 6ec6233 · 6ec6233
1 parent d315849
commit 6ec6233
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 40 deletions.
diff --git a/packages/forms/src/radio/VRadio.scss b/packages/forms/src/radio/VRadio.scss
@@ -9,7 +9,7 @@
 }
 
 .v-radio {
-  &-group {
+  &-wrapper {
     @apply flex w-full items-center gap-2 select-none;
   }
 

diff --git a/packages/forms/src/radio/VRadio.vue b/packages/forms/src/radio/VRadio.vue
@@ -92,7 +92,7 @@ const {errorMessage, uncontrolledValue, inputId} = useFormValue(props, emit);
       },
     ]"
   >
-    <div class="v-radio-group" :class="groupClass">
+    <div class="v-radio-wrapper" :class="groupClass">
       <input
         :id="id"
         v-model="uncontrolledValue"

diff --git a/packages/forms/src/radio/VRadioGroup.dark.scss b/packages/forms/src/radio/VRadioGroup.dark.scss
@@ -0,0 +1,16 @@
+.dark {
+  .v-radio-group {
+    --v-radio-group-label-color: var(--v-input-label-color);
+
+    // input
+    --v-radio-group-border-color: theme('colors.neutral.600');
+    --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');
+
+    // items text
+    --v-radio-group-items-text-color: theme('colors.neutral.200');
+  }
+}
diff --git a/packages/forms/src/radio/VRadioGroup.scss b/packages/forms/src/radio/VRadioGroup.scss
@@ -0,0 +1,76 @@
+:root {
+  /* label */
+  --v-radio-group-label-color: var(--v-input-label-color);
+  --v-radio-group-label-font-size: var(--v-input-label-font-size);
+  --v-radio-group-label-font-weight: var(--v-input-label-font-weight);
+  --v-radio-group-label-display: var(--v-input-label-display);
+  --v-radio-group-label-margin-bottom: var(--v-input-label-margin-bottom);
+
+  // input
+  --v-radio-group-border-color: theme('colors.gray.400');
+  --v-radio-group-bg-color: theme('colors.white');
+
+  // disabled
+  --v-radio-group-disabled-border-color: var(--v-input-disabled-border-color);
+  --v-radio-group-disabled-bg-color: var(--v-input-disabled-bg-color);
+
+  // items text
+  --v-radio-group-items-text-color: theme('colors.gray.800');
+}
+
+.v-radio-group {
+  $c: &;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  &-label {
+    color: var(--v-radio-group-label-color);
+    font-size: var(--v-radio-group-label-font-size);
+    font-weight: var(--v-radio-group-label-font-weight);
+    display: var(--v-radio-group-label-display);
+    margin-bottom: var(--v-radio-group-label-margin-bottom);
+  }
+
+  &-items {
+    @apply flex gap-y-2 sm:gap-x-8 flex-col;
+
+    &-input {
+      @apply transition duration-300 text-primary-500 focus:ring-primary-500;
+      border-color: var(--v-radio-group-border-color);
+      background-color: var(--v-radio-group-bg-color);
+
+      &:disabled {
+        @apply cursor-not-allowed;
+        border-color: var(--v-radio-group-disabled-border-color);
+        background-color: var(--v-radio-group-disabled-bg-color);
+      }
+    }
+
+    &-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 0.5rem;
+    }
+
+    &-text {
+      color: var(--v-radio-group-items-text-color);
+    }
+  }
+
+  // inline
+  &--inline {
+    #{$c}-items {
+      @apply flex-row;
+    }
+  }
+
+  // error
+  &--error {
+    #{$c}-label {
+      --v-radio-group-label-color: var(--v-input-error-color);
+    }
+  }
+}
diff --git a/packages/forms/src/radio/VRadioGroup.stories.ts b/packages/forms/src/radio/VRadioGroup.stories.ts
@@ -4,6 +4,9 @@ import {object, number, string} from 'yup';
 import VRadioGroup from './VRadioGroup.vue';
 import VBtn from '@gits-id/button';
 import {ref} from 'vue';
+import '@gits-id/forms/src/forms.scss';
+import '@gits-id/forms/src/forms.dark.scss';
+import './VRadioGroup.dark.scss';
 
 const items = [...Array(5)].map((v, k) => ({
   text: `Item ${k + 1}`,
@@ -341,7 +344,8 @@ export const DarkMode: Story = (args) => ({
   },
   template: `
   <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
-    <VRadioGroup v-bind='args'/>
+    <VRadioGroup v-bind='args' />
+    <VRadioGroup v-bind='args' disabled label="Disabled" class="mt-5" />
   </div>
   `,
 });
diff --git a/packages/forms/src/radio/VRadioGroup.vue b/packages/forms/src/radio/VRadioGroup.vue
@@ -6,7 +6,6 @@ import {
   onMounted,
   onBeforeUnmount,
 } from 'vue';
-import {useTextSize} from '@gits-id/utils';
 import { type ValidationMode, useFormValue } from '../composables';
 
 type Value = string | number | object | boolean | Record<string, any>;
@@ -84,7 +83,7 @@ const props = defineProps({
   },
   errorClass: {
     type: String,
-    default: 'text-error-600 text-sm mt-1',
+    default: '',
   },
   rules: {
     type: String,
@@ -113,12 +112,6 @@ const groupRef = ref();
 const {errorMessage, uncontrolledValue, isEagerValidation, validate, meta} =
   useFormValue(props, emit);
 
-const classes = computed(() =>
-  props.error
-    ? 'text-error-600 focus:ring-error-600'
-    : 'text-primary-600 focus:ring-primary-600',
-);
-
 const getValue = (item: RadioItem) => {
   return typeof item === 'object' ? item?.[props.itemValue] : item;
 };
@@ -127,8 +120,6 @@ const getText = (item: RadioItem) => {
   return typeof item === 'object' ? item?.[props.itemText] : item;
 };
 
-const {class: sizeClass} = useTextSize(props.size);
-
 const onChange = (event: any) => {
   emit('change', event);
 
@@ -175,25 +166,25 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div>
+  <div
+    class="v-radio-group"
+    :class="{
+      'v-radio-group--error': error,
+      'v-radio-group--inline': inline,
+    }"
+  >
     <label
       v-if="label"
       :for="name"
-      class="font-medium mb-1 block"
-      :class="[
-        error ? 'text-error-500' : 'text-gray-700 dark:text-neutral-200',
-        labelClass,
-      ]"
+      class="v-radio-group-label"
+      :class="labelClass"
     >
       {{ label }}
     </label>
-    <div
-      ref="groupRef"
-      class="flex gap-y-2 sm:gap-y-0 gap-x-8"
-      :class="[inline ? 'flex-row' : 'flex-col']"
-    >
+    <div ref="groupRef" class="v-radio-group-items">
       <label
         :class="[
+          'v-radio-group-items-label',
           uncontrolledValue === getValue(item) ? selectedClass : '',
           defaultClass,
         ]"
@@ -207,32 +198,25 @@ onBeforeUnmount(() => {
           :name="name"
           type="radio"
           :value="getValue(item)"
-          class="
-            mr-2
-            transition
-            duration-300
-            disabled:cursor-not-allowed
-            disabled:border-gray-300
-            dark:bg-neutral-800
-            dark:border-neutral-700
-            dark:disabled:bg-neutral-300
-          "
-          :class="classes"
+          class="v-radio-group-items-input"
           :disabled="disabled"
           @change="onChange"
         />
         <slot name="label" :item="item" :selected="uncontrolledValue">
-          <span
-            class="text-gray-800 dark:text-neutral-200"
-            :class="[sizeClass]"
-          >
+          <span class="v-radio-group-items-text">
             {{ getText(item) }}
           </span>
         </slot>
       </label>
     </div>
-    <div v-if="errorMessage && !hideError" :class="errorClass">
+    <div
+      v-if="errorMessage && !hideError"
+      class="v-radio-group-error"
+      :class="errorClass"
+    >
       {{ errorMessage }}
     </div>
   </div>
 </template>
+
+<style src="./VRadioGroup.scss" lang="scss"></style>