Merge pull request #2856 from Geoffrey0/icon-button-tooltip-auto-align

fix: expose experimental autoAlign input on icon button

Author: zvonimirfras

src/button/base-icon-button.component.ts

@@ -33,6 +33,11 @@ export class BaseIconButton {
 		"bottom" | "bottom-left" | "bottom-right" |
 		"left" | "left-bottom" | "left-top" |
 		"right" | "right-bottom" | "right-top" = "bottom";
+	/**
+	 * **Experimental**: Use floating-ui to position the tooltip
+	 * This is not toggleable - should be assigned once
+	 */
+	@Input() autoAlign = false;
 	/**
 	 * Set delay before tooltip is shown
 	 */

src/button/icon-button.component.ts

@@ -33,6 +33,7 @@ import { ButtonSize, ButtonType } from "./button.types";
 		[highContrast]="highContrast"
 		[isOpen]="isOpen"
 		[align]="align"
+		[autoAlign]="autoAlign"
 		[enterDelayMs]="enterDelayMs"
 		[leaveDelayMs]="leaveDelayMs"
 		(click)="emitClickEvent($event, 'tooltip')">

src/button/icon-button.stories.ts

@@ -22,7 +22,8 @@ export default {
 		kind: "primary",
 		size: "md",
 		isExpressive: "false",
-		disabled: false
+		disabled: false,
+		autoAlign: false
 	},
 	argTypes: {
 		align: {
@@ -97,3 +98,40 @@ Basic.args = {
 		"example-global-class": true
 	}
 };
+
+const AutoAlignTemplate = (args) => ({
+	props: args,
+	template: `
+		<div style="height:3000px">
+			Scrolling will update the position of the tooltip:
+			<div style="position: absolute; top: 500px; left: 500px;">
+				<cds-icon-button
+					buttonId="icon-btn1"
+					type="button"
+					[kind]="kind"
+					[size]="size"
+					[align]="align"
+					[autoAlign]="autoAlign"
+					[isOpen]="isOpen"
+					[buttonNgClass]="buttonNgClass"
+					[buttonAttributes]="buttonAttributes"
+					[disabled]="disabled"
+					[description]="description"
+					(click)="onClick($event)"
+					(mouseenter)="onMouseEnter($event)"
+					(mouseleave)="onMouseleave($event)"
+					(focus)="onFocus($event)"
+					(blur)="onBlur($event)">
+					<svg class="cds--btn__icon" cdsIcon="copy" size="16"></svg>
+				</cds-icon-button>
+			</div>
+		</div>
+	`
+});
+export const WithAutoAlign = AutoAlignTemplate.bind({});
+WithAutoAlign.args = {
+	autoAlign: true,
+	description: "Icon Description",
+	align: "top",
+	isOpen: true
+};