fix(comp:*): update style of suffix icon

IDuxFE · Aug 1, 2022 · d5c400c · d5c400c
1 parent efab292
commit d5c400c
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 68 deletions.
diff --git a/packages/components/_private/selector/style/multiple.less b/packages/components/_private/selector/style/multiple.less
@@ -34,9 +34,7 @@
 
   }
 
-  &.@{selector-prefix}-allow-input .@{selector-prefix}-overflow,
-  &.@{selector-prefix}-allow-input .@{selector-prefix}-input,
-  &.@{selector-prefix}-clearable .@{selector-prefix}-content {
+  &.@{selector-prefix}-allow-input .@{selector-prefix}-overflow {
     padding-right: @select-icon-font-size + @select-multiple-padding;
   }
 }

diff --git a/packages/components/_private/selector/style/single.less b/packages/components/_private/selector/style/single.less
@@ -13,14 +13,10 @@
     }
 
     &-input {
-      right: @select-padding-horizontal;
+      right: @select-padding-horizontal + @selector-font-size;
       left: @select-padding-horizontal;
     }
   }
-
-  &.@{selector-prefix}-show-suffix &-input {
-    right: @select-padding-horizontal + @selector-font-size;
-  }
 }
 
 .@{selector-prefix}-single {
@@ -38,11 +34,6 @@
     }
   }
 
-  &.@{selector-prefix}-with-suffix .@{selector-prefix}-item,
-  &.@{selector-prefix}-with-suffix .@{selector-prefix}-placeholder {
-    padding-right: @select-icon-font-size;
-  }
-
   &.@{selector-prefix}-opened .@{selector-prefix}-item {
     color: @select-placeholder-color;
   }

diff --git a/packages/components/input/style/index.less b/packages/components/input/style/index.less
@@ -236,30 +236,20 @@
     cursor: pointer;
     opacity: 0;
     color: @input-icon-color;
-    background-color: @input-background-color;
     transition: @transition-all-base;
-    :hover {
+
+    &:hover {
       color: @input-icon-hover-color;
     }
   }
 
   &-clearable {
-    &:hover {
-      .@{input-prefix}-clear.visible {
-        opacity: 1;
-      }
+    .@{input-prefix}-clear.visible {
+      opacity: 1;
     }
 
-    &.@{input-prefix}-sm .@{input-prefix}-clear {
-      right: @input-padding-horizontal-sm - 4;
-    }
-
-    &.@{input-prefix}-md .@{input-prefix}-clear {
-      right: @input-padding-horizontal-md - 4;
-    }
-
-    &.@{input-prefix}-lg .@{input-prefix}-clear {
-      right: @input-padding-horizontal-lg - 4;
+    .@{input-prefix}-inner {
+      padding-right: @input-icon-font-size + 2;
     }
   }
 

diff --git a/packages/components/input/style/mixin.less b/packages/components/input/style/mixin.less
@@ -16,6 +16,12 @@
 .input-size(@font-size; @padding-vertical; @padding-horizontal;) {
   font-size: @font-size;
   padding: @padding-vertical (@padding-horizontal - 4) @padding-vertical @padding-horizontal;
+
+  &.@{input-prefix}-clearable {
+    .@{input-prefix}-clear {
+      right: @padding-horizontal - 4;
+    }
+  }
 }
 
 .input-hover(@color: @input-hover-color) {

diff --git a/packages/components/textarea/__tests__/textarea.spec.ts b/packages/components/textarea/__tests__/textarea.spec.ts
@@ -99,28 +99,29 @@ describe('Textarea', () => {
     const onClear = vi.fn()
     const wrapper = TextareaMount({ props: { clearable: true, onClear } })
 
-    expect(wrapper.find('.ix-icon-close-circle').exists()).toBe(true)
-    expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+    expect(wrapper.classes()).toContain('ix-textarea-clearable')
+    expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
 
-    await wrapper.find('.ix-icon-close-circle').trigger('click')
+    await wrapper.find('.ix-textarea-clear').trigger('click')
 
     expect(onClear).toBeCalled()
 
     await wrapper.setProps({ value: 'value' })
 
-    expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(false)
+    expect(wrapper.find('.ix-textarea-clear').classes()).toContain('visible')
 
     await wrapper.setProps({ disabled: true })
 
-    expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+    expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
 
     await wrapper.setProps({ disabled: false, readonly: true })
 
-    expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+    expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
 
     await wrapper.setProps({ clearable: false })
 
-    expect(wrapper.find('.ix-icon-close-circle').exists()).toBe(false)
+    expect(wrapper.classes()).not.toContain('ix-textarea-clearable')
+    expect(wrapper.find('.ix-textarea-clear').exists()).toBe(false)
   })
 
   test('resize and autoRows work', async () => {

diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type Ref, type Slot, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
+import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
 
 import { type FormAccessor } from '@idux/cdk/forms'
 import { type TextareaConfig, useGlobalConfig } from '@idux/components/config'
@@ -53,6 +53,7 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const classes = {
         [prefixCls]: true,
+        [`${prefixCls}-clearable`]: clearable.value,
         [`${prefixCls}-disabled`]: accessor.disabled,
         [`${prefixCls}-focused`]: isFocused.value,
         [`${prefixCls}-with-count`]: showCount,
@@ -90,7 +91,14 @@ export default defineComponent({
             onCompositionstart={handleCompositionStart}
             onCompositionend={handleCompositionEnd}
           />
-          {renderSuffix(clearable.value, slots.clearIcon, clearIcon.value, clearVisible.value, handleClear, prefixCls)}
+          {clearable.value && (
+            <span
+              class={normalizeClass([`${prefixCls}-clear`, clearVisible.value ? 'visible' : ''])}
+              onClick={handleClear}
+            >
+              {slots.clearIcon ? slots.clearIcon() : <IxIcon name={clearIcon.value}></IxIcon>}
+            </span>
+          )}
         </span>
       )
     }
@@ -115,27 +123,3 @@ function useDataCount(props: TextareaProps, config: TextareaConfig, accessor: Fo
     return dataCount
   })
 }
-
-function renderSuffix(
-  isClearable: boolean,
-  clearIconSlot: Slot | undefined,
-  clearIcon: string,
-  clearVisible: boolean,
-  onClear: (evt: MouseEvent) => void,
-  prefixCls: string,
-) {
-  if (!isClearable) {
-    return null
-  }
-
-  let classes = `${prefixCls}-suffix`
-  if (!clearVisible) {
-    classes += ` ${prefixCls}-suffix-hidden`
-  }
-
-  return (
-    <span class={classes} onClick={onClear}>
-      {clearIconSlot ? clearIconSlot() : <IxIcon name={clearIcon}></IxIcon>}
-    </span>
-  )
-}
diff --git a/packages/components/textarea/style/index.less b/packages/components/textarea/style/index.less
@@ -65,18 +65,22 @@
     }
   }
 
-  &-suffix {
+  &-clear {
     position: absolute;
-    color: @textarea-placeholder-color;
-    transition: color @transition-duration-base;
+    z-index: 1;
     cursor: pointer;
+    opacity: 0;
+    color: @textarea-placeholder-color;
+    transition: @transition-all-base;
 
     &:hover {
       color: @textarea-color-secondary;
     }
+  }
 
-    &-hidden {
-      visibility: hidden;
+  &-clearable {
+    .@{textarea-prefix}-clear.visible {
+      opacity: 1;
     }
   }
 

diff --git a/packages/components/textarea/style/mixin.less b/packages/components/textarea/style/mixin.less
@@ -3,10 +3,16 @@
   .@{textarea-prefix}-inner {
     padding: @padding-vertical @padding-horizontal;
   }
-  .@{textarea-prefix}-suffix {
+  .@{textarea-prefix}-clear {
     top: @padding-vertical;
     right: @padding-horizontal;
   }
+
+  &.@{textarea-prefix}-clearable {
+    .@{textarea-prefix}-inner {
+      padding-right: @padding-horizontal + @font-size;
+    }
+  }
 }
 
 .textarea-autosize-measuring-base() {