feat(QCheckbox): add labelSize props and redesign

src/qComponents/QCheckbox/index.ts

@@ -4,4 +4,14 @@ import Checkbox from './src/QCheckbox.vue';
 
 export const QCheckbox = withInstall(Checkbox);
 
-export type { QCheckboxProps, QCheckboxInstance } from './src/types';
+export type {
+  QCheckboxProps,
+  QCheckboxInstance,
+  QCheckboxPropModelValue,
+  QCheckboxPropLabel,
+  QCheckboxPropIndeterminate,
+  QCheckboxPropDisabled,
+  QCheckboxPropRootTag,
+  QCheckboxPropValidateEvent,
+  QCheckboxPropLabelSize
+} from './src/types';

src/qComponents/QCheckbox/src/QCheckbox.vue

@@ -2,30 +2,20 @@
   <component
     :is="rootTag || 'label'"
     class="q-checkbox"
-    :class="{
-      'q-checkbox_disabled': isDisabled,
-      'q-checkbox_checked': isChecked
-    }"
+    :class="qCheckboxClasses"
     @click.prevent="handleCheckboxClick"
   >
     <span
       class="q-checkbox__input"
-      :class="{
-        'q-checkbox__input_disabled': isDisabled,
-        'q-checkbox__input_checked': isChecked,
-        'q-checkbox__input_focus': focus
-      }"
-      :tabindex="indeterminate ? 0 : false"
-      :role="indeterminate ? 'checkbox' : false"
-      :aria-checked="indeterminate ? 'mixed' : false"
+      :class="qCheckboxInputClasses"
+      :tabindex="isIndeterminate ? 0 : undefined"
+      :role="isIndeterminate ? 'checkbox' : undefined"
+      :aria-checked="isIndeterminate ? 'mixed' : false"
     >
       <span class="q-checkbox__inner">
         <span
           class="q-checkbox__inner-icon"
-          :class="{
-            'q-icon-minus': indeterminate,
-            'q-icon-check': isChecked
-          }"
+          :class="qCheckboxInnerIconClasses"
         />
       </span>
       <input
@@ -34,7 +24,7 @@
         :value="isChecked"
         class="q-checkbox__original"
         type="checkbox"
-        :aria-hidden="indeterminate ? 'true' : 'false'"
+        :aria-hidden="isIndeterminate ? 'true' : 'false'"
         :disabled="isDisabled"
         @focus="focus = true"
         @blur="focus = false"
@@ -43,6 +33,7 @@
     <span
       v-if="$slots.default || label"
       class="q-checkbox__label"
+      :class="labelClass"
     >
       <slot>{{ label }}</slot>
     </span>
@@ -51,14 +42,26 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, watch, ref } from 'vue';
+import type { PropType } from 'vue';
 
+import { validateArray } from '@/qComponents/helpers';
 import type { QCheckboxGroupProvider } from '@/qComponents/QCheckboxGroup';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, ClassValue } from '#/helpers';
 
-import type { QCheckboxProps, QCheckboxInstance } from './types';
+import type {
+  QCheckboxProps,
+  QCheckboxInstance,
+  QCheckboxPropLabelSize,
+  QCheckboxPropModelValue,
+  QCheckboxPropLabel,
+  QCheckboxPropIndeterminate,
+  QCheckboxPropDisabled,
+  QCheckboxPropRootTag,
+  QCheckboxPropValidateEvent
+} from './types';
 
 export default defineComponent({
   name: 'QCheckbox',
@@ -70,24 +73,50 @@ export default defineComponent({
     /**
      * Array for group, Boolean for single
      */
-    modelValue: { type: Boolean, default: null },
+    modelValue: {
+      type: Boolean as PropType<QCheckboxPropModelValue>,
+      default: null
+    },
     /**
      * Checkbox label
      */
-    label: { type: String, default: null },
+    label: {
+      type: String as PropType<QCheckboxPropLabel>,
+      default: null
+    },
     /**
      * wheteher Checkbox is indeterminate
      */
-    indeterminate: { type: Boolean, default: false },
+    indeterminate: {
+      type: Boolean as PropType<QCheckboxPropIndeterminate>,
+      default: false
+    },
     /**
      * wheteher Checkbox is disabled
      */
-    disabled: { type: Boolean, default: false },
-    rootTag: { type: String, default: 'label' },
+    disabled: {
+      type: Boolean as PropType<QCheckboxPropDisabled>,
+      default: false
+    },
+    rootTag: {
+      type: String as PropType<QCheckboxPropRootTag>,
+      default: 'label'
+    },
     /**
      * wheteher is validate parent q-form if present
      */
-    validateEvent: { type: Boolean, default: false }
+    validateEvent: {
+      type: Boolean as PropType<QCheckboxPropValidateEvent>,
+      default: false
+    },
+    /**
+     * label size
+     */
+    labelSize: {
+      type: String as PropType<QCheckboxPropLabelSize>,
+      default: 'regular',
+      validator: validateArray<QCheckboxPropLabelSize>(['regular', 'small'])
+    }
   },
 
   emits: [
@@ -145,6 +174,32 @@ export default defineComponent({
         : props.disabled || (qForm?.disabled.value ?? false)
     );
 
+    const isIndeterminate = computed<boolean>(
+      () => !isChecked.value && Boolean(props.indeterminate)
+    );
+
+    const labelClass = computed<ClassValue>(
+      () => `q-checkbox__label_size_${props.labelSize ?? 'regular'}`
+    );
+
+    const qCheckboxClasses = computed<ClassValue>(() => ({
+      'q-checkbox_disabled': isDisabled.value,
+      'q-checkbox_checked': isChecked.value,
+      'q-checkbox_indeterminate': isIndeterminate.value
+    }));
+
+    const qCheckboxInputClasses = computed<ClassValue>(() => ({
+      'q-checkbox__input_disabled': isDisabled.value,
+      'q-checkbox__input_checked': isChecked.value,
+      'q-checkbox__input_indeterminate': isIndeterminate.value,
+      'q-checkbox__input_focus': focus.value
+    }));
+
+    const qCheckboxInnerIconClasses = computed<ClassValue>(() => ({
+      'q-icon-minus': isIndeterminate.value,
+      'q-icon-check': isChecked.value
+    }));
+
     const handleCheckboxClick = (event: Event): void => {
       if (isDisabled.value) return;
 
@@ -188,11 +243,16 @@ export default defineComponent({
     return {
       focus,
       isChecked,
+      isIndeterminate,
       isLimitDisabled,
       isDisabled,
       nativeClick,
       checkboxInput,
-      handleCheckboxClick
+      handleCheckboxClick,
+      labelClass,
+      qCheckboxClasses,
+      qCheckboxInputClasses,
+      qCheckboxInnerIconClasses
     };
   }
 });

src/qComponents/QCheckbox/src/q-checkbox.scss

@@ -1,23 +1,14 @@
 .q-checkbox {
-  --checkbox-color-base: var(--color-primary-black);
+  --checkbox-color-base: rgb(var(--color-base-regular-rgb) / 96%);
   --checkbox-color-disabled: rgb(var(--color-rgb-gray) / 64%);
   --checkbox-background-color-base: var(--color-tertiary-gray-ultra-light);
   --checkbox-background-color-hover: var(--color-tertiary-gray);
-  --checkbox-background-color-focus: var(--color-tertiary-gray-ultra-light);
-  --checkbox-background-color-checked: var(--color-tertiary-gray-ultra-light);
   --checkbox-background-color-disabled: var(--color-tertiary-gray);
-  --checkbox-mark-color-base: var(--color-primary-blue);
+  --checkbox-mark-color-base: var(--color-accent-secondary-main);
   --checkbox-mark-color-disabled: rgb(var(--color-rgb-gray) / 64%);
-  --checkbox-box-shadow-base: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
-    inset -1px -1px 1px rgb(var(--color-rgb-white) / 70%),
-    inset 1px 1px 2px rgb(var(--color-rgb-blue) / 20%);
-  --checkbox-box-shadow-focus: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
-    1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
-    4px 4px 10px rgb(var(--color-rgb-blue) / 40%),
-    -4px -4px 10px rgb(var(--color-rgb-white) / 25%),
-    inset -1px -1px 1px rgb(var(--color-rgb-white) / 70%),
-    inset 1px 1px 2px rgb(var(--color-rgb-blue) / 20%);
+  --checkbox-box-shadow-base: 1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
+  --checkbox-box-shadow-focus: 1px 1px 3px rgb(var(--color-rgb-blue) / 40%),
+    inset 0 0 0 1px var(--color-accent-secondary-main);
 
   position: relative;
   display: inline-flex;
@@ -33,16 +24,31 @@
 
   &__label {
     padding-left: 16px;
-    margin-top: 3px;
     font-size: var(--font-size-base);
-    line-height: 18px;
+    color: var(--checkbox-color-base);
     word-break: break-word;
     white-space: normal;
 
     .q-checkbox_disabled & {
       color: var(--checkbox-color-disabled);
       cursor: not-allowed;
     }
+
+    &_size {
+      &_regular {
+        margin-top: 2px;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      &_small {
+        --checkbox-color-base: rgb(var(--color-base-regular-rgb) / 64%);
+
+        margin-top: 5px;
+        font-size: 10px;
+        line-height: 14px;
+      }
+    }
   }
 
   &__input {
@@ -67,6 +73,10 @@
     border-radius: var(--border-radius-base);
     box-shadow: var(--checkbox-box-shadow-base);
 
+    &:hover {
+      background-color: var(--checkbox-background-color-hover);
+    }
+
     &-icon {
       position: absolute;
       top: 4px;
@@ -80,15 +90,12 @@
 
     .q-checkbox_checked &,
     .q-checkbox__input_indeterminate & {
-      background-color: var(--checkbox-background-color-checked);
-
       &::after {
         opacity: 1;
       }
     }
 
     .q-checkbox__input_focus & {
-      background-color: var(--checkbox-background-color-focus);
       box-shadow: var(--checkbox-box-shadow-focus);
     }
 
@@ -102,11 +109,10 @@
       }
     }
 
-    .q-checkbox__input_focus &,
-    .q-checkbox_checked &,
-    .q-checkbox__input_indeterminate & {
-      &:hover {
-        background-color: var(--checkbox-background-color-hover);
+    .q-form-item_is-error & {
+      &,
+      .q-checkbox__input_focus {
+        border: var(--border-error);
       }
     }
   }

src/qComponents/QCheckbox/src/types.ts

@@ -1,22 +1,36 @@
 import type { Ref, ComputedRef } from 'vue';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, ClassValue } from '#/helpers';
+
+export type QCheckboxPropModelValue = Nullable<boolean>;
+export type QCheckboxPropLabel = Nullable<string>;
+export type QCheckboxPropIndeterminate = Nullable<boolean>;
+export type QCheckboxPropDisabled = Nullable<boolean>;
+export type QCheckboxPropRootTag = Nullable<string>;
+export type QCheckboxPropValidateEvent = Nullable<boolean>;
+export type QCheckboxPropLabelSize = Nullable<'regular' | 'small'>;
 
 export interface QCheckboxProps {
-  modelValue: Nullable<boolean>;
-  label: Nullable<string>;
-  indeterminate: Nullable<boolean>;
-  disabled: Nullable<boolean>;
-  rootTag: Nullable<string>;
-  validateEvent: Nullable<boolean>;
+  modelValue: QCheckboxPropModelValue;
+  label: QCheckboxPropLabel;
+  indeterminate: QCheckboxPropIndeterminate;
+  disabled: QCheckboxPropDisabled;
+  rootTag: QCheckboxPropRootTag;
+  validateEvent: QCheckboxPropValidateEvent;
+  labelSize: QCheckboxPropLabelSize;
 }
 
 export interface QCheckboxInstance {
   focus: Ref<boolean>;
   isChecked: ComputedRef<boolean>;
+  isIndeterminate: ComputedRef<boolean>;
   isLimitDisabled: ComputedRef<boolean>;
   isDisabled: ComputedRef<boolean>;
   nativeClick: () => void;
   handleCheckboxClick: (event: Event) => void;
   checkboxInput: Ref<Nullable<HTMLInputElement>>;
+  labelClass: ComputedRef<ClassValue>;
+  qCheckboxClasses: ComputedRef<ClassValue>;
+  qCheckboxInputClasses: ComputedRef<ClassValue>;
+  qCheckboxInnerIconClasses: ComputedRef<ClassValue>;
 }

src/vars.scss

@@ -9,6 +9,7 @@
   --color-secondary-orange: #f95e2d;
   --color-secondary-green: #40ba3e;
   --color-secondary-yellow: #f2d22b;
+  --color-accent-secondary-main: #4262f0;
   --color-tertiary-white: #fff;
   --color-tertiary-gray-ultra-light: #fafafa;
   --color-tertiary-gray-lighter: #f4f4f6;
@@ -19,6 +20,7 @@
   --color-tertiary-gray-ultra-dark: #c4c4c4;
   --color-tertiary-gray-ultra-darker: #adacae;
   --color-tertiary-gray-ultra-darker-rgb: 173 172 174;
+  --color-base-regular-rgb: 29 29 27;
   --color-rgb-white: 255 255 255;
   --color-rgb-blue: 174 174 192;
   --color-rgb-gray: 29 28 26;

stories/components/QCheckbox.stories.ts

@@ -8,7 +8,12 @@ const storyMetadata: Meta = {
   title: 'Components/QCheckbox',
   component: QCheckbox,
   argTypes: {
-    modelValue: { control: { type: 'none' } }
+    modelValue: { control: { type: 'none' } },
+    labelSize: {
+      options: ['regular', 'small'],
+      control: { type: 'select' },
+      defaultValue: 'regular'
+    }
   }
 };
 
@@ -30,6 +35,7 @@ const Template: Story<QCheckboxProps> = args =>
         :indeterminate="args.indeterminate"
         :disabled="args.disabled"
         :rootTag="args.rootTag"
+        :labelSize="args.labelSize"
       />
     `
   });