diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 0cfa45446..a4f2d7bb1 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -331,13 +331,4 @@ input[type='button'] { margin-left: var(--gap-xs); margin-top: var(--gap-xs); } - - > .#{$ns}Button--disabled-wrap > .#{$ns}Button { - margin-left: var(--gap-xs); - margin-top: var(--gap-xs); - } -} - -.#{$ns}Button--disabled-wrap { - display: inline-block !important; } diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index 54e1e310c..6ce3cc1b9 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -76,8 +76,9 @@ &.is-disabled { cursor: not-allowed; - pointer-events: none; + // pointer-events: none; color: var(--DropDown-menuItem-onDisabled-color); + filter: grayscale(80%); } &.#{$ns}DropDown-divider { diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 5edc2640e..ec76c581b 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -28,6 +28,7 @@ interface ButtonProps extends React.DOMAttributes { classPrefix: string; classnames: ClassNamesFn; componentClass: React.ReactType; + overrideClassName?: boolean; } export class Button extends React.Component { @@ -63,28 +64,33 @@ export class Button extends React.Component { active, iconOnly, href, + overrideClassName, ...rest } = this.props; if (href) { Comp = 'a'; + } else if (Comp === 'button' && disabled) { + Comp = 'div'; } return ( { tooltipRootClose, disabled, disabledTip, - classPrefix, classnames: cx } = this.props; @@ -115,13 +120,7 @@ export class Button extends React.Component { trigger={tooltipTrigger} rootClose={tooltipRootClose} > - {disabled && disabledTip ? ( -
- {this.renderButton()} -
- ) : ( - this.renderButton() - )} + {this.renderButton()} ); } diff --git a/src/renderers/Action.tsx b/src/renderers/Action.tsx index 5d54b7ca9..e50aec217 100644 --- a/src/renderers/Action.tsx +++ b/src/renderers/Action.tsx @@ -514,18 +514,7 @@ export class Action extends React.Component { const iconElement = generateIcon(cx, icon, 'Button-icon', iconClassName); - return isMenuItem ? ( - - {iconElement} - {label} - - ) : ( + return (