Merge branch 'carbon-design-system:master' into master

Author: kush-savani

.github/workflows/check-build.yml

@@ -11,10 +11,10 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    # We use Node v16 for building since CCA@v5 is using Angular 14.
+    # We use Node v18 for building since CCA@v5 is using Angular 14.
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v3

.github/workflows/publish.yml

@@ -27,11 +27,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      # Set up node to use v16
+      # Set up node to use v18
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: "npm"
           cache-dependency-path: "package-lock.json"
 

.storybook/manager-head.html

@@ -10,6 +10,16 @@
 <meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta name="twitter:card" content="summary_large_image">
 
+<footer>
+	<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
+</footer>
+
+<script
+	key="8"
+	type="module"
+	src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
+</script>
+
 <!-- Storybook override -->
 <script>
 	document.title = "Carbon Components Angular";
@@ -26,3 +36,20 @@
 		send_page_view: false
 	});
 </script>
+
+<style>
+	footer {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		z-index: 9999;
+	}
+
+	#root > div {
+		/*
+		 * Subtracting the height of the footer to prevent
+		 * overlaying the footer ontop of content
+		 */
+		height: calc(100vh - 48px);
+	}
+</style>

src/search/search.component.spec.ts

@@ -85,6 +85,59 @@ describe("Search", () => {
 		expect(component.value).toEqual("");
 	});
 
+	it("should clear the input when the clear button is clicked on the expandable component", () => {
+		component.expandable = true;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
+		clearButtonElement.click();
+		fixture.detectChanges();
+		expect(component.value).toEqual("");
+	});
+
+	it("should clear the input when the escape key is pressed", () => {
+		clearButtonElement = fixture.debugElement.query(By.css("button")).nativeElement;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(false);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.value).toBe("");
+		expect(clearButtonElement.className.includes("cds--search-close--hidden")).toEqual(true);
+	});
+
+	it("should clear the input and keep the expanded state open when the escape key is pressed", () => {
+		component.expandable = true;
+		component.active = true;
+		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
+		component.value = "TextToClear";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.value).toBe("");
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+	});
+
+	it("should close the expandable search component when esc is pressed when content is empty", () => {
+		component.expandable = true;
+		component.active = true;
+		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
+		component.value = "";
+		fixture.detectChanges();
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(true);
+		component.keyDown(new KeyboardEvent("keydown", {
+			"key": "Escape"
+		}));
+		fixture.detectChanges();
+		expect(component.active).toEqual(false);
+		expect(containerElement.className.includes("cds--search--expanded")).toEqual(false);
+	});
+
 	it("should have dark and light theme", () => {
 		containerElement = fixture.debugElement.query(By.css(".cds--search")).nativeElement;
 		component.theme = "dark";

src/search/search.component.ts

@@ -37,7 +37,9 @@ export class Search implements ControlValueAccessor {
 	 */
 	static searchCount = 0;
 
-	@HostBinding("class.cds--form-item") get containerClass() { return !(this.toolbar || this.expandable); }
+	@HostBinding("class.cds--form-item") get containerClass() {
+		return !(this.toolbar || this.expandable);
+	}
 
 	/**
 	 * @deprecated since v5 - Use `cdsLayer` directive instead
@@ -221,11 +223,20 @@ export class Search implements ControlValueAccessor {
 	keyDown(event: KeyboardEvent) {
 		if (this.toolbar || this.expandable) {
 			if (event.key === "Escape") {
-				this.active = false;
+				if (this.value === "") {
+					this.active = false;
+					this.open.emit(this.active);
+				}
 			} else if (event.key === "Enter") {
 				this.openSearch();
 			}
 		}
+
+		if (event.key === "Escape") {
+			if (this.value !== "") {
+				this.clearSearch();
+			}
+		}
 	}
 
 	@HostListener("focusout", ["$event"])

src/search/search.stories.ts

@@ -20,6 +20,10 @@ export default {
 		autocomplete: "on"
 	},
 	argTypes: {
+		expandable: {
+			type: "boolean",
+			defaultValue: false
+		},
 		size: {
 			options: ["sm", "md", "lg"],
 			control: "radio"
@@ -52,7 +56,8 @@ const Template = (args) => ({
 			[disabled]="disabled"
 			[size]="size"
 			(valueChange)="valueChange($event)"
-			(clear)="clear()">
+			(clear)="clear()"
+			[expandable]="expandable">
 		</cds-search>
 	`
 });

src/slider/slider.component.spec.ts

@@ -137,4 +137,21 @@ describe("Slider", () => {
 		fixture.detectChanges();
 		expect(element.nativeElement.querySelector(".cds--slider--disabled")).toBeTruthy();
 	});
+
+	it("should set the value of the right thumb if it's closer on click of the slider", () => {
+		element.componentInstance.value = [0, 90];
+		const slider = element.nativeElement.querySelector(".cds--slider");
+		const track = element.nativeElement.querySelector(".cds--slider__track");
+		const event = new MouseEvent("click", {clientX: track.getBoundingClientRect().right});
+		slider.dispatchEvent(event);
+		expect(element.componentInstance.value).toEqual([0, 100]);
+	});
+
+	it("should set the value of the left thumb if it's closer on click of the slider", () => {
+		element.componentInstance.value = [10, 100];
+		const slider = element.nativeElement.querySelector(".cds--slider");
+		const event = new MouseEvent("click", {clientX: 0});
+		slider.dispatchEvent(event);
+		expect(element.componentInstance.value).toEqual([0, 100]);
+	});
 });

src/slider/slider.component.ts

@@ -78,38 +78,42 @@ import { EventService } from "carbon-components-angular/utils";
 				</label>
 				<div
 					class="cds--slider"
+					(click)="onClick($event)"
 					[ngClass]="{'cds--slider--disabled': disabled}">
 					<ng-container *ngIf="!isRange()">
-						<div
-							#thumbs
-							role="slider"
-							[id]="id"
-							[attr.aria-labelledby]="labelId"
-							class="cds--slider__thumb"
-							[ngStyle]="{left: getFractionComplete(value) * 100 + '%'}"
-							tabindex="0"
-							(mousedown)="onMouseDown($event)"
-							(keydown)="onKeyDown($event)">
+						<div class="cds--slider__thumb-wrapper"
+							[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
+							<div
+								#thumbs
+								role="slider"
+								[id]="id"
+								[attr.aria-labelledby]="labelId"
+								class="cds--slider__thumb"
+								tabindex="0"
+								(mousedown)="onMouseDown($event)"
+								(keydown)="onKeyDown($event)">
+							</div>
 						</div>
 					</ng-container>
 					<ng-container *ngIf="isRange()">
-						<div
-							#thumbs
-							*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy"
-							role="slider"
-							[id]="id + (i > 0 ? '-' + i : '')"
-							[attr.aria-labelledby]="labelId"
-							class="cds--slider__thumb"
-							[ngStyle]="{left: getFractionComplete(thumb) * 100 + '%'}"
-							tabindex="0"
-							(mousedown)="onMouseDown($event, i)"
-							(keydown)="onKeyDown($event, i)">
+						<div class="cds--slider__thumb-wrapper"
+						 [ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
+						 *ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
+							<div
+								#thumbs
+								role="slider"
+								[id]="id + (i > 0 ? '-' + i : '')"
+								[attr.aria-labelledby]="labelId"
+								class="cds--slider__thumb"
+								tabindex="0"
+								(mousedown)="onMouseDown($event, i)"
+								(keydown)="onKeyDown($event, i)">
+							</div>
 						</div>
 					</ng-container>
 					<div
 						#track
-						class="cds--slider__track"
-						(click)="onClick($event)">
+						class="cds--slider__track">
 					</div>
 					<div
 						#filledTrack
@@ -446,11 +450,24 @@ export class Slider implements AfterViewInit, ControlValueAccessor {
 		this.value = this.value;
 	}
 
-	/** Handles clicks on the range track, and setting the value to it's "real" equivalent */
+	/**
+	 * Handles clicks on the slider, and setting the value to it's "real" equivalent.
+	 * Will assign the value to the closest thumb if in range mode.
+	 * */
 	onClick(event) {
 		if (this.disabled) { return; }
 		const trackLeft = this.track.nativeElement.getBoundingClientRect().left;
-		this._value[0] = this.convertToValue(event.clientX - trackLeft);
+		const trackValue = this.convertToValue(event.clientX - trackLeft);
+		if (this.isRange()) {
+			if (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {
+				this._value[0] = trackValue;
+			} else {
+				this._value[1] = trackValue;
+			}
+		} else {
+			this._value[0] = trackValue;
+		}
+
 		this.value = this.value;
 	}
 

src/table/cell/table-radio.component.ts

@@ -40,7 +40,7 @@ export class TableRadio {
 	get disabled(): boolean {
 		return this.row ? !!(this.row as TableRow).disabled : false;
 	}
-	
+
 	/**
 	 * Used to populate the row selection checkbox label with a useful value if set.
 	 *