chore(input): update disabled style

.changeset/friendly-poets-enjoy.md

@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+chore: update disabled styles

packages/styles/bases/base-input.css.ts

@@ -12,6 +12,20 @@ export const baseInputStyle = style({
     color: THEME.color.gray[500],
     fontSize: `calc((${THEME.fontSize.sm} + ${THEME.fontSize.xs}) / 2)`,
   },
+  ":disabled": {
+    opacity: 0.5,
+    color: THEME.color.gray[700],
+    backgroundColor: THEME.color.gray[300],
+    cursor: "not-allowed",
+  },
+  selectors: {
+    "&:disabled::placeholder": {
+      color: THEME.color.gray[700],
+    },
+    "&::-ms-reveal": {
+      display: "none",
+    },
+  },
 });
 
 export const baseInputPaddingStyle = styleVariants({
@@ -30,8 +44,3 @@ export const baseInputPaddingStyle = styleVariants({
     padding: `${THEME.spacing.sm} ${THEME.spacing.xs}`,
   },
 });
-
-export const baseInputDisabledStyle = style({
-  backgroundColor: THEME.color.gray[300],
-  cursor: "not-allowed",
-});

packages/styles/bases/date-picker-input.css.ts

@@ -24,8 +24,9 @@ export const datePickerVariantStyle = styleVariants({
     cursor: "pointer",
   },
   disabled: {
-    color: THEME.color.gray["500"],
-    background: THEME.color.gray["300"],
+    opacity: 0.5,
+    color: THEME.color.gray[700],
+    backgroundColor: THEME.color.gray[300],
     cursor: "not-allowed",
   },
 });
@@ -102,4 +103,7 @@ export const datePickerCancelIconStyle = style({
   ":active": {
     fill: THEME.color.green["800"],
   },
+  ":disabled": {
+    cursor: "not-allowed",
+  },
 });

packages/styles/bases/date-range-picker.css.ts

@@ -24,7 +24,9 @@ export const bodyStyle = styleVariants({
   disabled: [
     baseBodyStyle,
     {
-      background: THEME.color.gray["300"],
+      opacity: 0.5,
+      color: THEME.color.gray[700],
+      backgroundColor: THEME.color.gray[300],
       cursor: "not-allowed",
     },
   ],
@@ -63,6 +65,12 @@ export const inputTextStyle = styleVariants({
       color: THEME.color.gray["800"],
     },
   ],
+  disabled: [
+    inputTextBaseStyle,
+    {
+      color: "inherit",
+    },
+  ],
 });
 
 export const popupStyle = style({
@@ -199,4 +207,7 @@ export const popupCalendarCancelIconStyle = style({
   ":active": {
     fill: THEME.color.green["800"],
   },
+  ":disabled": {
+    cursor: "not-allowed",
+  },
 });

packages/styles/bases/password-input.css.ts

@@ -32,6 +32,9 @@ export const passwordVisibleIconStyle = style({
   height: THEME.fontSize.xl2,
   padding: THEME.spacing.no,
   fill: THEME.color.gray["400"],
+  ":disabled": {
+    cursor: "not-allowed",
+  },
 });
 
 export const passwordVisibleIconActiveStyle = style({

packages/styles/bases/search-input.css.ts

@@ -29,6 +29,8 @@ export const searchInputStyle = style({
 });
 
 export const searchInputDisabledStyle = style({
+  opacity: 0.5,
+  color: THEME.color.gray[700],
   backgroundColor: THEME.color.gray[300],
   cursor: "not-allowed",
 });
@@ -42,7 +44,6 @@ export const searchInputIconStyle = style({
   lineHeight: THEME.fontSize.xl2,
   width: THEME.fontSize.xl2,
   height: THEME.fontSize.xl2,
-  fill: THEME.color.gray["400"],
 });
 
 export const searchContainerStyle = style({
@@ -301,4 +302,9 @@ export const searchInputInnerInputStyle = style({
     cursor: "not-allowed",
     backgroundColor: THEME.color.gray["300"],
   },
+  selectors: {
+    "&:disabled::placeholder": {
+      color: THEME.color.gray[700],
+    },
+  },
 });

packages/styles/bases/search-selector.css.ts

@@ -8,8 +8,9 @@ export const selectBoxStyle = style({
 });
 
 export const selectBoxDisabledStyle = style({
-  color: THEME.color.gray["700"],
-  backgroundColor: THEME.color.gray["300"],
+  opacity: 0.5,
+  color: THEME.color.gray[700],
+  backgroundColor: THEME.color.gray[300],
 });
 
 export const selectBoxCursorStyle = styleVariants({
@@ -145,6 +146,11 @@ export const selectBoxSearchInputStyle = style({
     cursor: "not-allowed",
     backgroundColor: THEME.color.gray["300"],
   },
+  selectors: {
+    "&:disabled::placeholder": {
+      color: THEME.color.gray[700],
+    },
+  },
 });
 
 export const selectBoxAddStyle = style({

packages/styles/bases/selectbox-input.css.ts

@@ -9,7 +9,8 @@ export const selectBoxStyle = style({
 });
 
 export const selectBoxDisabledStyle = style({
-  color: THEME.color.gray["700"],
+  opacity: 0.5,
+  color: THEME.color.gray[700],
   backgroundColor: THEME.color.gray["300"],
 });
 
@@ -87,6 +88,11 @@ export const selectBoxSelectorOptionStyle = style({
     color: THEME.color.gray["400"],
     cursor: "not-allowed",
   },
+  selectors: {
+    "&:disabled::placeholder": {
+      color: THEME.color.gray[700],
+    },
+  },
 });
 
 export const selectBoxPlaceholderStyle = style({

packages/styles/bases/text-area.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 import { THEME } from "@wizleap-inc/wiz-ui-constants";
 
 export const textAreaStyle = style({
@@ -8,21 +8,21 @@ export const textAreaStyle = style({
   padding: THEME.spacing.xs,
   fontSize: THEME.fontSize.sm,
   lineHeight: 1.5,
-
+  color: THEME.color.gray[700],
   "::placeholder": {
     color: THEME.color.gray[500],
   },
-});
-
-export const textAreaVariantStyle = styleVariants({
-  default: {
+  ":disabled": {
+    opacity: 0.5,
     color: THEME.color.gray[700],
-  },
-  disabled: {
     backgroundColor: THEME.color.gray[300],
-    color: THEME.color.gray[500],
     cursor: "not-allowed",
   },
+  selectors: {
+    "&:disabled::placeholder": {
+      color: THEME.color.gray[700],
+    },
+  },
 });
 
 export const textAreaExpandStyle = style({

packages/styles/bases/time-picker-input.css.ts

@@ -15,7 +15,9 @@ export const timePickerStyle = style({
 });
 
 export const timePickerDisabledStyle = style({
-  backgroundColor: THEME.color.gray["300"],
+  opacity: 0.5,
+  color: THEME.color.gray[700],
+  backgroundColor: THEME.color.gray[300],
 });
 
 export const timePickerCursorStyle = styleVariants({
@@ -35,7 +37,7 @@ export const timePickerBoxColorStyle = styleVariants({
     color: THEME.color.gray["800"],
   },
   disabled: {
-    color: THEME.color.gray["500"],
+    color: THEME.color.gray["700"],
   },
 });
 
@@ -119,8 +121,7 @@ export const cancelButtonStyle = style({
   ":active": {
     fill: THEME.color.green["800"],
   },
-});
-
-export const cancelButtonDisabledStyle = style({
-  cursor: "not-allowed",
+  ":disabled": {
+    cursor: "not-allowed",
+  },
 });

packages/wiz-ui-next/src/components/base/inputs/base/base.vue

@@ -3,7 +3,6 @@
     :class="[
       baseInputStyle,
       baseInputPaddingStyle[spaceType],
-      disabled && baseInputDisabledStyle,
       inputBorderStyle[state],
     ]"
     :style="{ width: computedWidth }"
@@ -19,14 +18,13 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentName, AutoCompleteKeys } from "@wizleap-inc/wiz-ui-constants";
+import { AutoCompleteKeys, ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import {
-  baseInputStyle,
-  baseInputDisabledStyle,
   baseInputPaddingStyle,
+  baseInputStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/base-input.css";
 import { inputBorderStyle } from "@wizleap-inc/wiz-ui-styles/commons";
-import { computed, PropType } from "vue";
+import { PropType, computed } from "vue";
 
 defineOptions({
   name: ComponentName.BaseInput,

packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts

@@ -322,6 +322,7 @@ export const InitialValueRange: StoryFn<typeof WizDateRangePicker> = (
   template: `
     <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
       <WizDateRangePicker
+        v-bind="args"
         v-model="dateRange1"
         v-model:selectBoxValue="selectBoxValue1"
         :selectBoxOptions="selectBoxOptions"
@@ -358,6 +359,7 @@ export const InitialValueRange2: StoryFn<typeof WizDateRangePicker> = (
   template: `
     <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
       <WizDateRangePicker
+        v-bind="args"
         v-model="dateRange1"
         v-model:selectBoxValue="selectBoxValue1"
         :selectBoxOptions="selectBoxOptions"
@@ -394,6 +396,7 @@ export const InitialValueStart: StoryFn<typeof WizDateRangePicker> = (
   template: `
     <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
       <WizDateRangePicker
+        v-bind="args"
         v-model="dateRange3"
         v-model:selectBoxValue="selectBoxValue3"
         :selectBoxOptions="selectBoxOptions"
@@ -406,6 +409,53 @@ export const InitialValueStart: StoryFn<typeof WizDateRangePicker> = (
   `,
 });
 
+export const Hover: StoryFn<typeof WizDateRangePicker> = (args) => ({
+  components: { WizDateRangePicker },
+  setup() {
+    const dateRange = ref<DateRange>({
+      start: new Date(2020, 0, 15),
+      end: new Date(2020, 1, 15),
+    });
+    const selectBoxValue = ref<string>();
+
+    const isOpen = ref(true);
+    const isHover = ref(true);
+    const updateIsOpen = (value: boolean) => {
+      isOpen.value = value;
+    };
+    const updateIsHover = (value: boolean) => {
+      isHover.value = value;
+    };
+    return {
+      dateRange,
+      selectBoxValue,
+      selectBoxOptions,
+      isOpen,
+      isHover,
+      updateIsOpen,
+      updateIsHover,
+      args,
+    };
+  },
+  template: `
+    <div>
+      <WizDateRangePicker
+
+        v-bind="args"
+        v-model="dateRange"
+        v-model:selectBoxValue="selectBoxValue"
+        :selectBoxOptions="selectBoxOptions"
+        :isOpen="isOpen"
+        :isHover="isHover"
+        @update:modelValue="args.onDateSelected"
+        @update:isOpen="updateIsOpen"
+        @update:isHover="updateIsHover"
+        @update:selectBoxValue="args.onSelectBoxValueChange"
+      />
+    </div>
+  `,
+});
+
 export const Test: StoryFn<typeof WizDateRangePicker> = (args) => ({
   components: { WizDateRangePicker },
   setup() {
@@ -437,6 +487,7 @@ export const Test: StoryFn<typeof WizDateRangePicker> = (args) => ({
   template: `
     <div>
       <WizDateRangePicker
+        v-bind="args"
         v-model="dateRange"
         v-model:selectBoxValue="selectBoxValue"
         :selectBoxOptions="selectBoxOptions"

packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue

@@ -20,7 +20,9 @@
         <span
           :class="
             styles.inputTextStyle[
-              modelValue.start && !disabled ? 'selected' : 'default'
+              (disabled && 'disabled') ||
+                (modelValue.start && 'selected') ||
+                'default'
             ]
           "
           >{{
@@ -31,7 +33,9 @@
         <span
           :class="
             styles.inputTextStyle[
-              modelValue.end && !disabled ? 'selected' : 'default'
+              (disabled && 'disabled') ||
+                (modelValue.end && 'selected') ||
+                'default'
             ]
           "
           >{{ modelValue.end ? formatDate(modelValue.end) : "終了日" }}</span