fix(comp:button): text and link mode remove padding and bg color (#1275)

IDuxFE · Nov 14, 2022 · 6082a15 · 6082a15
1 parent 1a91e5b
commit 6082a15
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 22 deletions.
diff --git a/packages/components/button/__tests__/button.spec.ts b/packages/components/button/__tests__/button.spec.ts
@@ -29,6 +29,9 @@ describe('Button', () => {
     await wrapper.setProps({ mode: 'link' })
 
     expect(wrapper.classes()).toContain('ix-button-link')
+    expect(wrapper.element.tagName).toEqual('BUTTON')
+
+    await wrapper.setProps({ href: '#' })
     expect(wrapper.element.tagName).toEqual('A')
   })
 

diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -15,10 +15,12 @@ import { IxIcon } from '@idux/components/icon'
 import { buttonToken } from './token'
 import { buttonProps } from './types'
 
+const aProps = ['href', 'target', 'rel', 'download', 'hreflang', 'ping']
+
 export default defineComponent({
   name: 'IxButton',
   props: buttonProps,
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-button`)
     const config = useGlobalConfig('button')
@@ -69,7 +71,8 @@ export default defineComponent({
         children.push(<span>{slots.default()}</span>)
       }
 
-      if (mode.value === 'link') {
+      // 只有在 mode = 'link' 且设置了相关的 attrs 时，才渲染成 a 标签
+      if (mode.value === 'link' && Object.keys(attrs).some(attr => aProps.includes(attr))) {
         return (
           <a class={classes.value} onClick={handleClick}>
             {children}

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -117,6 +117,7 @@
   &-link {
     background-color: transparent;
     border-color: transparent;
+    padding: 0;
 
     &:focus,
     &:hover {
@@ -128,6 +129,10 @@
     }
   }
 
+  &-link {
+    color: @button-primary-background-color;
+  }
+
   &-danger {
     color: @button-danger-color;
     border-color: @button-danger-color;
@@ -256,7 +261,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: @button-background-color;
+      background-color: transparent;
       border-color: transparent;
     }
   }

diff --git a/packages/components/card/style/index.less b/packages/components/card/style/index.less
@@ -188,14 +188,6 @@
       border: @card-border-width @card-border-style @color-primary;
     }
   }
-
-  .@{idux-prefix}-header {
-    &-content {
-      > .@{idux-prefix}-header-suffix {
-        padding: 0;
-      }
-    }
-  }
 }
 
 @keyframes card-loading {
@@ -213,7 +205,7 @@
   font-size: @font-size;
   line-height: calc(@font-size + var(--ix-line-height-gutter));
 
-  > .@{idux-prefix}-header {
+  > .@{header-prefix} {
     padding-left: @card-padding;
     padding-right: @card-padding;
   }
@@ -226,7 +218,7 @@
     padding: @card-padding;
   }
 
-  .@{idux-prefix}-header + .@{card-prefix}-body {
+  .@{header-prefix} + .@{card-prefix}-body {
     padding-top: 4px;
   }
 

diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
@@ -9,7 +9,6 @@
   list-style: none;
   outline: none;
   user-select: none;
-  background-color: @pagination-background-color;
 
   &-sm {
     .pagination-size(@pagination-font-size-sm,  @pagination-item-padding-sm, @pagination-item-content-size-sm);
@@ -74,6 +73,7 @@
 
   &-item {
     cursor: pointer;
+    line-height: 1;
     transition: color var(--ix-transition-duration-fast);
 
     &-content {

diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less
@@ -7,14 +7,16 @@
       min-width: 240px;
     }
 
-    .@{header-prefix},
     &-search-wrapper,
     &-select-wrapper,
     &-tree-wrapper {
       padding: 0 @spacing-sm;
     }
 
     .@{header-prefix} {
+      padding-left: @spacing-sm;
+      padding-right: @spacing-sm;
+
       &-title {
         color: @text-color;
         font-weight: @font-weight-md;

diff --git a/packages/pro/tree/style/index.less b/packages/pro/tree/style/index.less
@@ -10,7 +10,7 @@
   flex-direction: column;
   overflow: hidden;
   transition: width @transition-duration-base;
-  
+
   &-header-wrapper,
   &-search-wrapper {
     display: flex;
@@ -29,6 +29,7 @@
   &-header-wrapper {
     .@{icon-prefix} {
       font-size: @pro-tree-header-wrapper-icon-font-size;
+      line-height: calc(@pro-tree-header-wrapper-icon-font-size + var(--ix-line-height-gutter));
       flex: auto;
       cursor: pointer;
       display: inline-block;
@@ -39,12 +40,6 @@
       }
     }
 
-    .@{icon-prefix},
-    .@{header-prefix}-content {
-      height: @pro-tree-header-wrapper-height;
-      line-height: @pro-tree-header-wrapper-height;
-    }
-
     & + .@{divider-prefix} {
       margin: @pro-tree-divider-vertical-spacing @pro-tree-divider-horizontal-spacing;
       width: calc(100% - @pro-tree-divider-horizontal-spacing * 2);