Skip to content

Commit

Permalink
fix(Button): solve the problem that hover style still exists in disab… (
Browse files Browse the repository at this point in the history 
#1583)

* fix(Button): solve the problem that hover style still exists in disabled state

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@anlyyao @github-actions
anlyyao and github-actions[bot] authored Sep 11, 2024
1 parent 6192ef4 commit fb10b28
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 27 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 2 files
+1 −71 style/mobile/components/button/v2/_index.less
+1 −16 style/mobile/components/button/v2/_var.less
14 changes: 4 additions & 10 deletions src/button/button.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ Name | Default Value | Description
--td-button-danger-bg-color | @error-color | -
--td-button-danger-border-color | @error-color | -
--td-button-danger-color | @font-white-1 | -
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
--td-button-danger-dashed-color | @error-color | -
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
--td-button-danger-disabled-bg | @error-color-3 | -
--td-button-danger-disabled-border-color | @error-color-3 | -
--td-button-danger-disabled-color | @font-white-1 | -
Expand All @@ -57,14 +54,14 @@ Name | Default Value | Description
--td-button-default-active-border-color | @bg-color-component-active | -
--td-button-default-bg-color | @bg-color-component | -
--td-button-default-border-color | @bg-color-component | -
--td-button-default-color | @font-gray-1 | -
--td-button-default-color | @text-color-primary | -
--td-button-default-disabled-bg | @bg-color-component-disabled | -
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
--td-button-default-disabled-color | @font-gray-4 | -
--td-button-default-disabled-color | @text-color-disabled | -
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
--td-button-default-outline-active-border-color | @component-border | -
--td-button-default-outline-border-color | @component-border | -
--td-button-default-outline-color | @font-gray-1 | -
--td-button-default-outline-color | @text-color-primary | -
--td-button-default-outline-disabled-color | @component-border | -
--td-button-default-text-active-bg-color | @bg-color-container-active | -
--td-button-extra-small-font-size | @font-size-base | -
Expand Down Expand Up @@ -113,9 +110,6 @@ Name | Default Value | Description
--td-button-primary-bg-color | @brand-color | -
--td-button-primary-border-color | @brand-color | -
--td-button-primary-color | @font-white-1 | -
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
--td-button-primary-dashed-color | @brand-color | -
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
--td-button-primary-disabled-bg | @brand-color-disabled | -
--td-button-primary-disabled-border-color | @brand-color-disabled | -
--td-button-primary-disabled-color | @font-white-1 | -
Expand All @@ -130,4 +124,4 @@ Name | Default Value | Description
--td-button-small-font-size | @font-size-base | -
--td-button-small-height | 32px | -
--td-button-small-icon-font-size | 18px | -
--td-button-small-padding-horizontal | 12px | -
--td-button-small-padding-horizontal | 12px | -
14 changes: 4 additions & 10 deletions src/button/button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ click | `(e: MouseEvent)` | 点击时触发
--td-button-danger-bg-color | @error-color | -
--td-button-danger-border-color | @error-color | -
--td-button-danger-color | @font-white-1 | -
--td-button-danger-dashed-border-color | @button-danger-dashed-color | -
--td-button-danger-dashed-color | @error-color | -
--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | -
--td-button-danger-disabled-bg | @error-color-3 | -
--td-button-danger-disabled-border-color | @error-color-3 | -
--td-button-danger-disabled-color | @font-white-1 | -
Expand All @@ -57,14 +54,14 @@ click | `(e: MouseEvent)` | 点击时触发
--td-button-default-active-border-color | @bg-color-component-active | -
--td-button-default-bg-color | @bg-color-component | -
--td-button-default-border-color | @bg-color-component | -
--td-button-default-color | @font-gray-1 | -
--td-button-default-color | @text-color-primary | -
--td-button-default-disabled-bg | @bg-color-component-disabled | -
--td-button-default-disabled-border-color | @bg-color-component-disabled | -
--td-button-default-disabled-color | @font-gray-4 | -
--td-button-default-disabled-color | @text-color-disabled | -
--td-button-default-outline-active-bg-color | @bg-color-container-active | -
--td-button-default-outline-active-border-color | @component-border | -
--td-button-default-outline-border-color | @component-border | -
--td-button-default-outline-color | @font-gray-1 | -
--td-button-default-outline-color | @text-color-primary | -
--td-button-default-outline-disabled-color | @component-border | -
--td-button-default-text-active-bg-color | @bg-color-container-active | -
--td-button-extra-small-font-size | @font-size-base | -
Expand Down Expand Up @@ -113,9 +110,6 @@ click | `(e: MouseEvent)` | 点击时触发
--td-button-primary-bg-color | @brand-color | -
--td-button-primary-border-color | @brand-color | -
--td-button-primary-color | @font-white-1 | -
--td-button-primary-dashed-border-color | @button-primary-dashed-color | -
--td-button-primary-dashed-color | @brand-color | -
--td-button-primary-dashed-disabled-color | @brand-color-disabled | -
--td-button-primary-disabled-bg | @brand-color-disabled | -
--td-button-primary-disabled-border-color | @brand-color-disabled | -
--td-button-primary-disabled-color | @font-white-1 | -
Expand All @@ -130,4 +124,4 @@ click | `(e: MouseEvent)` | 点击时触发
--td-button-small-font-size | @font-size-base | -
--td-button-small-height | 32px | -
--td-button-small-icon-font-size | 18px | -
--td-button-small-padding-horizontal | 12px | -
--td-button-small-padding-horizontal | 12px | -
11 changes: 5 additions & 6 deletions src/button/button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';

import { space } from 'postcss/lib/list';
import { computed, defineComponent } from 'vue';
import TLoading from '../loading';
import { Hover } from '../shared';
import ButtonProps from './props';
Expand All @@ -11,10 +9,9 @@ import { usePrefixClass } from '../hooks/useClass';
import { useContent, useTNodeJSX } from '../hooks/tnode';

const { prefix } = config;
const name = `${prefix}-button`;

export default defineComponent({
name,
name: `${prefix}-button`,
directives: { Hover },
props: ButtonProps,
setup(props) {
Expand All @@ -23,6 +20,8 @@ export default defineComponent({
const renderTNodeContent = useContent();
const isDisabled = useFormDisabled();

const hoverDisabled = computed(() => isDisabled.value || props.loading);

const buttonClasses = computed(() => [
`${buttonClass.value}`,
`${buttonClass.value}--size-${props.size}`,
Expand Down Expand Up @@ -68,7 +67,7 @@ export default defineComponent({
disabled={isDisabled.value}
aria-disabled={isDisabled.value}
onClick={handleClick}
v-hover={{ className: `${buttonClass.value}--hover` }}
v-hover={{ className: `${buttonClass.value}--hover`, disabledHover: hoverDisabled.value }}
>
{readerIcon()}
{readerContent()}
Expand Down

0 comments on commit fb10b28

Please sign in to comment.