fix(comp:input): sync design and update css variable (#1602)

* fix(comp:input): sync design and update css variable * fix(comp:*): sync style and locales * fix: use flex-start/flex-end instead of start/end
IDuxFE · Jul 14, 2023 · 5a5eaea · 5a5eaea
1 parent f68df61
commit 5a5eaea
Show file tree

Hide file tree

Showing 50 changed files with 255 additions and 206 deletions.
diff --git a/packages/cdk/resize/style/index.less b/packages/cdk/resize/style/index.less
@@ -1,6 +1,6 @@
 .cdk-resizable {
   position: relative;
-  
+
   &-handle {
     position: absolute;
     user-select: none;
@@ -22,14 +22,14 @@
 
     &-start {
       width: 10px;
-      height: 100%;
+      height: inherit;
       top: 0;
       left: -5px;
     }
 
     &-end {
       width: 10px;
-      height: 100%;
+      height: inherit;
       top: 0;
       right: -5px;
     }

diff --git a/packages/components/_private/overlay/style/index.less b/packages/components/_private/overlay/style/index.less
@@ -1,4 +1,4 @@
-@import "../../../style/mixins/reset.less";
+@import '../../../style/mixins/reset.less';
 
 .@{overlay-prefix} {
   .reset-component-new();

diff --git a/packages/components/_private/selector/style/index.less b/packages/components/_private/selector/style/index.less
@@ -52,11 +52,24 @@
     overflow: hidden;
     color: @select-placeholder-color;
     position: absolute;
-    right: @select-padding-horizontal-md;
-    left: @select-padding-horizontal-md;
     .ellipsis();
   }
 
+  &-sm &-placeholder {
+    right: @form-new-padding-horizontal-sm;
+    left: @form-new-padding-horizontal-sm;
+  }
+
+  &-md &-placeholder {
+    right: @form-new-padding-horizontal-md;
+    left: @form-new-padding-horizontal-md;
+  }
+
+  &-lg &-placeholder {
+    right: @form-new-padding-horizontal-lg;
+    left: @form-new-padding-horizontal-lg;
+  }
+
   &-sm &-suffix,
   &-sm &-clear {
     .selector-icon(@select-height-sm);
@@ -145,4 +158,4 @@
   font-size: @select-icon-font-size;
   color: @select-icon-color;
   transition: color @transition-duration-base @ease-in-out;
-}
+}
diff --git a/packages/components/_private/selector/style/single.less b/packages/components/_private/selector/style/single.less
@@ -44,14 +44,14 @@
   }
 
   &.@{selector-prefix}-sm {
-    .select-size(@select-height-sm, @select-padding-horizontal-sm, @select-font-size-sm);
+    .select-size(@select-height-sm, @form-new-padding-horizontal-sm, @select-font-size-sm);
   }
 
   &.@{selector-prefix}-md {
-    .select-size(@select-height-md, @select-padding-horizontal-md, @select-font-size-md);
+    .select-size(@select-height-md, @form-new-padding-horizontal-md, @select-font-size-md);
   }
 
   &.@{selector-prefix}-lg {
-    .select-size(@select-height-lg, @select-padding-horizontal-lg, @select-font-size-lg);
+    .select-size(@select-height-lg, @form-new-padding-horizontal-lg, @select-font-size-lg);
   }
 }
diff --git a/packages/components/_private/trigger/style/index.less b/packages/components/_private/trigger/style/index.less
@@ -26,15 +26,15 @@
   @icon-padding: @trigger-icon-margin-left + @trigger-icon-margin-right;
 
   &-sm {
-    .trigger-size(@trigger-height-sm, @trigger-padding-vertical-sm, @trigger-padding-horizontal-sm, @trigger-font-size-sm);
+    .trigger-size(@trigger-height-sm, @trigger-padding-vertical-sm, @form-new-padding-horizontal-sm, @trigger-font-size-sm);
   }
 
   &-md {
-    .trigger-size(@trigger-height-md, @trigger-padding-vertical-md, @trigger-padding-horizontal-md, @trigger-font-size-md);
+    .trigger-size(@trigger-height-md, @trigger-padding-vertical-md, @form-new-padding-horizontal-md, @trigger-font-size-md);
   }
 
   &-lg {
-    .trigger-size(@trigger-height-lg, @trigger-padding-vertical-lg, @trigger-padding-horizontal-lg, @trigger-font-size-lg);
+    .trigger-size(@trigger-height-lg, @trigger-padding-vertical-lg, @form-new-padding-horizontal-lg, @trigger-font-size-lg);
   }
 
   &:hover:not(&-disabled):not(&-borderless) {

diff --git a/packages/components/_private/trigger/style/themes/default.ts b/packages/components/_private/trigger/style/themes/default.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/icon/style/themes/default'
 
 import './default.less'
diff --git a/packages/components/_private/trigger/style/themes/default.variable.less b/packages/components/_private/trigger/style/themes/default.variable.less
@@ -5,9 +5,6 @@
 @trigger-height-sm: @form-height-sm;
 @trigger-height-md: @form-height-md;
 @trigger-height-lg: @form-height-lg;
-@trigger-padding-horizontal-sm: @form-padding-horizontal-sm;
-@trigger-padding-horizontal-md: @form-padding-horizontal-md;
-@trigger-padding-horizontal-lg: @form-padding-horizontal-lg;
 @trigger-padding-vertical-sm: @form-padding-vertical-sm;
 @trigger-padding-vertical-md: @form-padding-vertical-md;
 @trigger-padding-vertical-lg: @form-padding-vertical-lg;

diff --git a/packages/components/_private/trigger/style/themes/seer.ts b/packages/components/_private/trigger/style/themes/seer.ts
@@ -1,3 +1,4 @@
 // style dependencies
+import '@idux/components/icon/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/_private/trigger/style/themes/seer.variable.less b/packages/components/_private/trigger/style/themes/seer.variable.less
@@ -1 +1,6 @@
 @import './default.variable.less';
+
+@trigger-icon-margin-right: @spacing-sm;
+@trigger-icon-font-size: @font-size-lg;
+@trigger-icon-color: @color-graphite-l10;
+@trigger-clear-icon-color: @color-graphite-d20;
diff --git a/packages/components/breadcrumb/style/index.less b/packages/components/breadcrumb/style/index.less
@@ -24,7 +24,7 @@
   }
 
   &-item {
-    display: inline-block;
+    display: inline-flex;
 
     &-separator {
       margin: @breadcrumb-separator-margin;

diff --git a/packages/components/card/style/themes/default.ts b/packages/components/card/style/themes/default.ts
@@ -3,5 +3,6 @@
 import '@idux/components/button/style/themes/default'
 import '@idux/components/grid/style/themes/default'
 import '@idux/components/header/style/themes/default'
+import '@idux/components/icon/style/themes/default'
 
 import './default.less'
diff --git a/packages/components/card/style/themes/seer.ts b/packages/components/card/style/themes/seer.ts
@@ -3,5 +3,6 @@
 import '@idux/components/button/style/themes/seer'
 import '@idux/components/grid/style/themes/seer'
 import '@idux/components/header/style/themes/seer'
+import '@idux/components/icon/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/date-picker/style/themes/default.ts b/packages/components/date-picker/style/themes/default.ts
@@ -1,6 +1,7 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style/themes/default'
+import '@idux/components/_private/trigger/style/themes/default'
 import '@idux/components/icon/style/themes/default'
 import '@idux/components/input/style/themes/default'
 

diff --git a/packages/components/date-picker/style/themes/seer.ts b/packages/components/date-picker/style/themes/seer.ts
@@ -1,6 +1,8 @@
 // style dependencies
 
 import '@idux/components/_private/overlay/style/themes/seer'
+import '@idux/components/_private/trigger/style/themes/seer'
 import '@idux/components/icon/style/themes/seer'
+import '@idux/components/input/style/themes/seer'
 
 import './seer.less'
diff --git a/packages/components/form/docs/Theme.zh.md b/packages/components/form/docs/Theme.zh.md
@@ -9,9 +9,9 @@
 | `@form-height-sm` | `@height-sm` | - | - |
 | `@form-height-md` | `@height-md` | - | - |
 | `@form-height-lg` | `@height-lg` | - | - |
-| `@form-padding-horizontal-sm` | `@spacing-sm - 2px` | - | - |
-| `@form-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@form-padding-horizontal-lg` | `@spacing-sm + 2px` | - | - |
+| `@form-padding-horizontal-sm` | `7px` | `11px` | - |
+| `@form-padding-horizontal-md` | `11px` | - | - |
+| `@form-padding-horizontal-lg` | `11px` | - | - |
 | `@form-padding-vertical-sm` | `max(  (round(((@form-height-sm - @form-font-size-sm * @form-line-height) / 2) * 10) / 10) - @form-border-width,  0)` | - | - |
 | `@form-padding-vertical-md` | `max(  (round(((@form-height-md - @form-font-size-md * @form-line-height) / 2) * 10) / 10) - @form-border-width,  2px)` | - | - |
 | `@form-padding-vertical-lg` | `(ceil(((@form-height-lg - @form-font-size-lg * @form-line-height) / 2) * 10) / 10) -  @form-border-width` | - | - |
@@ -36,6 +36,31 @@
 | `@form-disabled-background-color` | `var(--ix-background-color-deep)` | - | - |
 | `@form-icon-color` | `@color-graphite-d20` | - | - |
 | `@form-icon-hover-color` | `@color-graphite-d20` | `@color-primary` | - |
+| `@form-new-height-sm` | `var(--ix-height-sm)` | - | - |
+| `@form-new-height-md` | `var(--ix-height-md)` | - | - |
+| `@form-new-height-lg` | `var(--ix-height-lg)` | - | - |
+| `@form-new-padding-horizontal-sm` | `7px` | - | - |
+| `@form-new-padding-horizontal-md` | `11px` | - | - |
+| `@form-new-padding-horizontal-lg` | `11px` | - | - |
+| `@form-new-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@form-new-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@form-new-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
+| `@form-new-border-radius-sm` | `var(--ix-border-radius-sm)` | - | - |
+| `@form-new-border-radius-md` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
+| `@form-new-border-radius-lg` | `var(--ix-border-radius-lg)` | `var(--ix-border-radius-sm)` | - |
+| `@form-new-placeholder-color` | `var(--ix-text-color-disabled)` | - | - |
+| `@form-new-color` | `var(--ix-text-color)` | - | - |
+| `@form-new-color-invalid` | `var(--ix-color-red)` | - | - |
+| `@form-new-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
+| `@form-new-background-color` | `var(--ix-background-color)` | - | - |
+| `@form-new-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
+| `@form-new-border-color` | `var(--ix-border-color)` | - | - |
+| `@form-new-border-color-focus` | `var(--ix-color-primary)` | - | - |
+| `@form-new-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - |
+| `@form-new-box-shadow-invalid` | `0 0 0 2px fade(@color-red, 20%)` | - | - |
+| `@form-new-icon-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@form-new-icon-color-hover` | `var(--ix-color-primary)` | - | - |
+| `@form-new-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@form-item-valid-color` | `@color-success` | `@color-success-d10` | - |
 | `@form-item-validating-color` | `@color-pending` | `@color-pending-d10` | - |
 | `@form-item-invalid-color` | `@color-error` | `@color-error-d10` | - |

diff --git a/packages/components/form/style/themes/default.variable.less b/packages/components/form/style/themes/default.variable.less
@@ -7,9 +7,9 @@
 @form-height-sm: @height-sm;
 @form-height-md: @height-md;
 @form-height-lg: @height-lg;
-@form-padding-horizontal-sm: @spacing-sm - 2px;
-@form-padding-horizontal-md: @spacing-md;
-@form-padding-horizontal-lg: @spacing-sm + 2px;
+@form-padding-horizontal-sm: 7px;
+@form-padding-horizontal-md: 11px;
+@form-padding-horizontal-lg: 11px;
 @form-padding-vertical-sm: max(
   (round(((@form-height-sm - @form-font-size-sm * @form-line-height) / 2) * 10) / 10) - @form-border-width,
   0
@@ -43,6 +43,42 @@
 @form-disabled-background-color: var(--ix-background-color-deep);
 @form-icon-color: @color-graphite-d20;
 @form-icon-hover-color: @color-graphite-d20;
+
+@form-new-height-sm: var(--ix-height-sm);
+@form-new-height-md: var(--ix-height-md);
+@form-new-height-lg: var(--ix-height-lg);
+
+@form-new-padding-horizontal-sm: 7px;
+@form-new-padding-horizontal-md: 11px;
+@form-new-padding-horizontal-lg: 11px;
+
+@form-new-font-size-sm: var(--ix-font-size-sm);
+@form-new-font-size-md: var(--ix-font-size-md);
+@form-new-font-size-lg: var(--ix-font-size-lg);
+
+@form-new-border-radius-sm: var(--ix-border-radius-sm);
+@form-new-border-radius-md: var(--ix-border-radius-md);
+@form-new-border-radius-lg: var(--ix-border-radius-lg);
+
+@form-new-placeholder-color: var(--ix-text-color-disabled);
+
+@form-new-color: var(--ix-text-color);
+@form-new-color-invalid: var(--ix-color-red);
+@form-new-color-disabled: var(--ix-text-color-disabled);
+
+@form-new-background-color: var(--ix-background-color);
+@form-new-background-color-disabled: var(--ix-background-color-deep);
+
+@form-new-border-color: var(--ix-border-color);
+@form-new-border-color-focus: var(--ix-color-primary);
+
+@form-new-box-shadow-focus: 0 0 0 2px fade(@color-primary, 20%);
+@form-new-box-shadow-invalid: 0 0 0 2px fade(@color-red, 20%);
+
+@form-new-icon-color: var(--ix-text-color-title-secondary);
+@form-new-icon-color-hover: var(--ix-color-primary);
+@form-new-icon-font-size: var(--ix-font-size-lg);
+
 // input common end
 
 @form-item-valid-color: @color-success;

diff --git a/packages/components/form/style/themes/seer.variable.less b/packages/components/form/style/themes/seer.variable.less
@@ -5,6 +5,17 @@
 @form-font-size-md: @font-size-sm;
 @form-font-size-lg: @font-size-md;
 
+@form-padding-horizontal-sm: 11px;
+
+@form-new-padding-horizontal-sm: 11px;
+
+@form-new-font-size-sm: var(--ix-font-size-sm);
+@form-new-font-size-md: var(--ix-font-size-sm);
+@form-new-font-size-lg: var(--ix-font-size-md);
+
+@form-new-border-radius-md: var(--ix-border-radius-sm);
+@form-new-border-radius-lg: var(--ix-border-radius-sm);
+
 @form-item-valid-color: @color-success-d10;
 @form-item-validating-color: @color-pending-d10;
 @form-item-invalid-color: @color-error-d10;

diff --git a/packages/components/input-number/docs/Theme.zh.md b/packages/components/input-number/docs/Theme.zh.md
@@ -1,5 +1,2 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@input-number-color-disabled` | `@input-color-disabled` | - | - |
-| `@input-number-icon-color-hover` | `@input-icon-color-hover` | - | - |
-| `@input-number-invalid-color` | `@form-invalid-color` | - | - |
diff --git a/packages/components/input-number/style/index.less b/packages/components/input-number/style/index.less
@@ -18,12 +18,12 @@
     transition: color var(--ix-transition-duration-fast);
 
     &:hover {
-      color: @input-number-icon-color-hover;
+      color: @form-new-icon-color-hover;
     }
 
     &&-disabled {
       cursor: not-allowed;
-      color: @input-number-color-disabled;
+      color: @form-new-color-disabled;
     }
   }
 
@@ -33,7 +33,7 @@
 
   &-illegal {
     .@{input-prefix}-inner {
-      color: @input-number-invalid-color;
+      color: @form-new-color-invalid;
     }
   }
 

diff --git a/packages/components/input-number/style/themes/default.variable.less b/packages/components/input-number/style/themes/default.variable.less
@@ -1,3 +0,0 @@
-@input-number-color-disabled: @input-color-disabled;
-@input-number-icon-color-hover: @input-icon-color-hover;
-@input-number-invalid-color: @form-invalid-color;

diff --git a/packages/components/input/demo/Addon.vue b/packages/components/input/demo/Addon.vue
@@ -3,13 +3,13 @@
     <IxInput v-model:value="value" :addonBefore="addonBefore" :addonAfter="addonAfter" />
     <IxInput v-model:value="value">
       <template #addonBefore>
-        <IxSelect v-model:value="addonBefore" style="width: 88px">
+        <IxSelect v-model:value="addonBefore" style="width: 80px">
           <IxSelectOption key="https" label="https://"></IxSelectOption>
           <IxSelectOption key="http" label="http://"></IxSelectOption>
         </IxSelect>
       </template>
       <template #addonAfter>
-        <IxSelect v-model:value="addonAfter" style="width: 72px">
+        <IxSelect v-model:value="addonAfter" style="width: 64px">
           <IxSelectOption key="com" label=".com"></IxSelectOption>
           <IxSelectOption key="cn" label=".cn"></IxSelectOption>
         </IxSelect>

diff --git a/packages/components/input/demo/PrefixSuffix.vue b/packages/components/input/demo/PrefixSuffix.vue
@@ -1,6 +1,6 @@
 <template>
   <IxSpace vertical>
-    <IxInput prefix="user" suffix="info-circle" placeholder="Prefix and suffix" />
+    <IxInput prefix="user" size="sm" clearable suffix="info-circle" placeholder="Prefix and suffix" />
     <IxInput placeholder="Prefix and suffix">
       <template #prefix><span>￥</span></template>
       <template #suffix><span>RMB</span></template>

diff --git a/packages/components/input/docs/Theme.zh.md b/packages/components/input/docs/Theme.zh.md
@@ -1,23 +1,3 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@input-height-sm` | `var(--ix-height-sm)` | - | - |
-| `@input-height-md` | `var(--ix-height-md)` | - | - |
-| `@input-height-lg` | `var(--ix-height-lg)` | - | - |
-| `@input-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
-| `@input-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
-| `@input-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
-| `@input-border-radius-sm` | `var(--ix-border-radius-sm)` | - | - |
-| `@input-border-radius-md` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
-| `@input-border-radius-lg` | `var(--ix-border-radius-lg)` | `var(--ix-border-radius-sm)` | - |
-| `@input-color` | `var(--ix-text-color)` | - | - |
-| `@input-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
-| `@input-placeholder-color` | `@form-placeholder-color` | - | - |
-| `@input-background-color` | `var(--ix-background-color)` | - | - |
-| `@input-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
-| `@input-border-color` | `var(--ix-border-color)` | - | - |
-| `@input-border-color-focus` | `var(--ix-color-primary)` | - | - |
-| `@input-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - |
-| `@input-icon-color` | `var(--ix-text-color-title-secondary)` | - | - |
-| `@input-icon-color-hover` | `var(--ix-color-primary)` | - | - |
-| `@input-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@input-addon-background-color` | `var(--ix-background-color-light)` | - | - |
diff --git a/packages/components/input/src/Input.tsx b/packages/components/input/src/Input.tsx
@@ -65,11 +65,12 @@ export default defineComponent({
           disabled={accessor.disabled}
           focused={isFocused.value}
           prefix={prefix}
+          readonly={props.readonly}
           size={mergedSize.value}
           status={mergedStatus.value}
           suffix={suffix}
+          value={accessor.value}
           onClear={handleClear}
-          readonly={props.readonly}
           onInput={handleInput}
           onCompositionstart={handleCompositionStart}
           onCompositionend={handleCompositionEnd}