diff --git a/src/button/icon-button.component.ts b/src/button/icon-button.component.ts index b7c8894c1b..1661b36b4a 100644 --- a/src/button/icon-button.component.ts +++ b/src/button/icon-button.component.ts @@ -27,7 +27,7 @@ import { ButtonSize, ButtonType } from "./button.types"; ; + /** + * Indicates whether the tooltip should be shown when the button is disabled + */ + @Input() showTooltipWhenDisabled = false; /** * Common button events diff --git a/src/button/icon-button.stories.ts b/src/button/icon-button.stories.ts index 81d5897c58..7503b3ba9e 100644 --- a/src/button/icon-button.stories.ts +++ b/src/button/icon-button.stories.ts @@ -23,7 +23,8 @@ export default { size: "md", isExpressive: "false", disabled: false, - autoAlign: false + autoAlign: false, + showTooltipWhenDisabled: false }, argTypes: { align: { @@ -54,6 +55,9 @@ export default { disabled: { type: "boolean" }, + showTooltipWhenDisabled: { + type: "boolean" + }, // Actions onClick: { action: "clicked" }, onMouseEnter: { action: "mouseenter" }, @@ -79,6 +83,7 @@ const Template = (args) => ({ [buttonNgClass]="buttonNgClass" [buttonAttributes]="buttonAttributes" [disabled]="disabled" + [showTooltipWhenDisabled]="showTooltipWhenDisabled" description="Icon Description" (click)="onClick($event)" (mouseenter)="onMouseEnter($event)" @@ -115,6 +120,7 @@ const AutoAlignTemplate = (args) => ({ [isOpen]="isOpen" [buttonNgClass]="buttonNgClass" [disabled]="disabled" + [showTooltipWhenDisabled]="showTooltipWhenDisabled" [description]="description" (click)="onClick($event)" (mouseenter)="onMouseEnter($event)" @@ -134,3 +140,4 @@ WithAutoAlign.args = { align: "top", isOpen: true }; +