feat(DateInput): update calendar icon to use 'calendar-month-outline' and adjust related styles

Author: haoziqaq

packages/varlet-ui/src/date-input/DateInput.vue

@@ -48,7 +48,9 @@
 
         <template #append-icon>
           <slot name="append-icon">
-            <var-icon :class="n('calendar-icon')" name="calendar" />
+            <span :class="n('calendar-icon-container')">
+              <var-icon :class="n('calendar-icon')" name="calendar-month-outline" />
+            </span>
           </slot>
         </template>
 

packages/varlet-ui/src/date-input/__tests__/index.spec.js

@@ -398,6 +398,7 @@ describe('test dateInput input behavior', () => {
     })
 
     expect(wrapper.find('.var-date-input__calendar-icon').exists()).toBe(false)
+    expect(wrapper.find('.var-date-input__calendar-icon-container').exists()).toBe(false)
     expect(wrapper.find('.custom-append-icon').exists()).toBe(true)
 
     wrapper.unmount()

packages/varlet-ui/src/date-input/date-input.less

@@ -26,10 +26,16 @@
     }
   }
 
-  &__calendar-icon {
+  &__calendar-icon-container {
+    display: inline-flex;
+    align-items: center;
     margin-left: 6px;
   }
 
+  &__calendar-icon {
+    font-size: var(--field-decorator-icon-size);
+  }
+
   &__clear-icon-container {
     display: inline-flex;
     align-items: center;

packages/varlet-ui/src/date-input/docs/en-US.md

@@ -55,7 +55,7 @@ const allowedDates = (date) => Number(date.split('-')[2]) % 2 === 1
     />
     <var-date-input v-model="standardValue9" placeholder="Display Icon">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -157,7 +157,7 @@ const allowedTimes = () => ({
     />
     <var-date-input v-model="outlinedValue9" variant="outlined" placeholder="Display Icon">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -286,7 +286,7 @@ const allowedDates = (date) => Number(date.split('-')[2]) % 2 === 1
     />
     <var-date-input v-model="filledValue9" variant="filled" placeholder="Display Icon">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />

packages/varlet-ui/src/date-input/docs/zh-CN.md

@@ -55,7 +55,7 @@ const allowedDates = (date) => Number(date.split('-')[2]) % 2 === 1
     />
     <var-date-input v-model="standardValue9" placeholder="显示图标">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -157,7 +157,7 @@ const allowedTimes = () => ({
     />
     <var-date-input v-model="outlinedValue9" variant="outlined" placeholder="显示图标">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -286,7 +286,7 @@ const allowedDates = (date) => Number(date.split('-')[2]) % 2 === 1
     />
     <var-date-input v-model="filledValue9" variant="filled" placeholder="显示图标">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />

packages/varlet-ui/src/date-input/example/index.vue

@@ -103,7 +103,7 @@ onThemeChange()
     />
     <var-date-input v-model="standardValue9" :placeholder="t('displayIcon')">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -150,7 +150,7 @@ onThemeChange()
     />
     <var-date-input v-model="outlinedValue9" variant="outlined" :placeholder="t('displayIcon')">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />
@@ -251,7 +251,7 @@ onThemeChange()
     />
     <var-date-input v-model="filledValue9" variant="filled" :placeholder="t('displayIcon')">
       <template #prepend-icon>
-        <var-icon class="prepend-icon" name="calendar" />
+        <var-icon class="prepend-icon" name="calendar-month-outline" />
       </template>
       <template #append-icon>
         <var-icon class="append-icon" name="heart-outline" />