fix(comp:button): update the link button style (#1174)

IDuxFE · Sep 29, 2022 · d21cdaa · d21cdaa
1 parent 464bf40
commit d21cdaa
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/packages/components/button/__tests__/button.spec.ts b/packages/components/button/__tests__/button.spec.ts
@@ -62,6 +62,20 @@ describe('Button', () => {
     expect(wrapper.classes()).toContain('ix-button-disabled')
   })
 
+  test('disabled with link mode work', async () => {
+    const onClick = vi.fn()
+    const wrapper = ButtonMount({ props: { mode: 'link', disabled: true, onClick } })
+
+    await wrapper.trigger('click')
+
+    expect(onClick).not.toBeCalled()
+
+    await wrapper.setProps({ disabled: false })
+    await wrapper.trigger('click')
+
+    expect(onClick).toBeCalled()
+  })
+
   test('loading work', async () => {
     const wrapper = ButtonMount({ props: { icon: 'up', loading: true } })
 

diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -46,6 +46,13 @@ export default defineComponent({
       })
     })
 
+    const handleLinkClick = (evt: MouseEvent) => {
+      if (props.disabled || props.loading) {
+        evt.preventDefault()
+        evt.stopImmediatePropagation()
+      }
+    }
+
     return () => {
       const { disabled, loading, icon, type } = props
 
@@ -62,7 +69,11 @@ export default defineComponent({
       }
 
       if (mode.value === 'link') {
-        return <a class={classes.value}>{children}</a>
+        return (
+          <a class={classes.value} onClick={handleLinkClick}>
+            {children}
+          </a>
+        )
       }
       return (
         <button class={classes.value} disabled={disabled || loading} type={type}>

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -78,10 +78,6 @@
   &-disabled {
     cursor: not-allowed;
 
-    &:not([disabled]) {
-      pointer-events: none;
-    }
-
     > * {
       pointer-events: none;
     }

diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -6,14 +6,13 @@
   font-size: @font-size;
   border-radius: @border-radius;
 
-   .@{icon-prefix} {
+  .@{icon-prefix} {
     font-size: @icon-font-size;
   }
 }
 
 .button-disabled(@color: @button-disable-color; @background: @button-disable-background-color; @border: @button-disable-border) {
   &.@{button-prefix}-disabled {
-
     &,
     &:hover,
     &:focus,
@@ -222,6 +221,7 @@
 
   padding: 0;
   min-width: 0;
+  text-decoration: none;
 
   &:hover {
     background: @button-link-hover-background-color;
@@ -245,7 +245,6 @@
     }
   }
 
-
   &:active {
     & when not (@theme = dark) {
       .button-color(@button-danger-active-color, @button-default-background-color, @button-danger-active-border-color);
@@ -271,7 +270,6 @@
     }
   }
 
-
   &:active {
     & when not (@theme = dark) {
       .button-color(~`colorPalette('@{button-danger-color}', 10) `; fadein(@button-text-hover-background-color, 1%); transparent);