Merge branch 'master' into issue.2857

Author: Akshat55

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: {
@@ -41,7 +42,7 @@ export default {
 				"danger--ghost"
 			],
 			control: { type: "select" },
-			name: "cdsButton"
+			name: "kind"
 		},
 		size: {
 			options: ["sm", "md", "lg", "xl", "2xl"],
@@ -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
+};

src/table/table.component.ts

@@ -289,9 +289,10 @@ export class Table implements AfterViewInit, OnDestroy {
 
 	static focus(element: HTMLElement) {
 		const focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);
-		if (element.firstElementChild && element.firstElementChild.classList.contains("cds--table-sort") && focusElementList.length > 1) {
-			focusElementList[1].focus();
-		} else if (focusElementList.length > 0) {
+		if (
+			(element.firstElementChild?.classList.contains("cds--table-sort") && focusElementList.length > 1) ||
+			focusElementList.length > 0
+		) {
 			focusElementList[0].focus();
 		} else {
 			element.focus();

src/tooltip/definition-tooptip.component.ts

@@ -41,7 +41,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			role="tooltip">
 			<span class="cds--popover-content cds--definition-tooltip">
 				<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
-				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>
+				<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
 				<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 			</span>
 			<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
@@ -57,6 +57,10 @@ export class TooltipDefinition extends PopoverContainer {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Optional data for templates passed as implicit context
+	 */
+	@Input() templateContext: any;
 
 	constructor(
 		protected elementRef: ElementRef,

src/tooltip/tooltip.component.ts

@@ -39,7 +39,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			<ng-container *ngIf="!disabled">
 				<span class="cds--popover-content cds--tooltip-content">
 					<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
-					<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description"></ng-template>
+					<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
 					<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
 				</span>
 				<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
@@ -69,6 +69,10 @@ export class Tooltip extends PopoverContainer implements AfterContentChecked {
 	 * The string or template content to be exposed by the tooltip.
 	 */
 	@Input() description: string | TemplateRef<any>;
+	/**
+	 * Optional data for templates passed as implicit context
+	 */
+	@Input() templateContext: any
 
 	@ViewChild("contentWrapper") wrapper: ElementRef<HTMLSpanElement>;