fix: allow tooltip disabled icon button (#3062)

Co-authored-by: Akshat Patel <[email protected]>

Author: klaascuvelier

src/button/icon-button.component.ts

@@ -27,7 +27,7 @@ import { ButtonSize, ButtonType } from "./button.types";
 	<cds-tooltip
 		class="cds--icon-tooltip"
 		[description]="description"
-		[disabled]="disabled"
+		[disabled]="showTooltipWhenDisabled ? false : disabled"
 		[caret]="caret"
 		[dropShadow]="dropShadow"
 		[highContrast]="highContrast"
@@ -123,6 +123,10 @@ export class IconButton extends BaseIconButton implements AfterViewInit {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Indicates whether the tooltip should be shown when the button is disabled
+	 */
+	@Input() showTooltipWhenDisabled = false;
 
 	/**
 	 * Common button events

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
 };
+