fix: expose experimental autoAlign input on icon button

Author: Geoffrey0

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,39 @@ 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"
+[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
+};