feat: fluid state for combobox (#3010)

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

package.json

@@ -86,7 +86,7 @@
     "@angular/platform-browser-dynamic": "14.3.0",
     "@angular/router": "14.3.0",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.67.0",
+    "@carbon/styles": "1.70.0",
     "@carbon/themes": "11.24.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",

src/combobox/combobox.component.ts

@@ -40,7 +40,13 @@ import { Observable } from "rxjs";
 @Component({
 	selector: "cds-combo-box, ibm-combo-box",
 	template: `
-		<div class="cds--list-box__wrapper">
+		<div
+			class="cds--list-box__wrapper"
+			[ngClass]="{
+				'cds--list-box__wrapper--fluid': fluid,
+				'cds--list-box__wrapper--fluid--invalid': fluid && invalid,
+				'cds--list-box__wrapper--fluid--focus': fluid && _isFocused
+			}">
 			<label
 				*ngIf="label"
 				[for]="id"
@@ -64,7 +70,8 @@ import { Observable } from "rxjs";
 					'cds--list-box--lg': size === 'lg',
 					'cds--list-box--disabled': disabled,
 					'cds--combo-box--readonly': readonly,
-					'cds--combo-box--warning cds--list-box--warning': warn
+					'cds--combo-box--warning cds--list-box--warning': warn,
+					'cds--list-box--invalid': invalid
 				}"
 				class="cds--list-box cds--combo-box"
 				[attr.data-invalid]="(invalid ? true : null)">
@@ -109,7 +116,8 @@ import { Observable } from "rxjs";
 						[disabled]="disabled"
 						[readOnly]="readonly"
 						(input)="onSearch($event.target.value)"
-						(blur)="onBlur()"
+						(focus)="fluid ? handleFocus($event) : null"
+						(blur)="fluid ? handleFocus($event) : onBlur()"
 						(keydown.enter)="onSubmit($event)"
 						[value]="selectedValue"
 						class="cds--text-input"
@@ -166,8 +174,9 @@ import { Observable } from "rxjs";
 					<ng-content *ngIf="open"></ng-content>
 				</div>
 			</div>
+			<hr *ngIf="fluid" class="cds--list-box__divider" />
 			<div
-				*ngIf="helperText && !invalid && !warn"
+				*ngIf="helperText && !invalid && !warn && !fluid"
 				class="cds--form__helper-text"
 				[ngClass]="{'cds--form__helper-text--disabled': disabled}">
 				<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
@@ -368,6 +377,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	 * Set to `true` for readonly state.
 	 */
 	@Input() readonly = false;
+	/**
+	 * Experimental: enable fluid state
+	 */
+	@Input() fluid = false;
 	/**
 	 * Emits a ListItem
 	 *
@@ -426,7 +439,6 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	@ViewChild("input", { static: true }) input: ElementRef;
 	@ViewChild("listbox", { static: true }) listbox: ElementRef;
 	@HostBinding("class.cds--list-box__wrapper") hostClass = true;
-	@HostBinding("style.display") display = "block";
 
 	public open = false;
 
@@ -456,6 +468,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	protected _clearSelectionTitle = this.i18n.getOverridable("COMBOBOX.CLEAR_SELECTED");
 	protected _clearSelectionAria = this.i18n.getOverridable("COMBOBOX.A11Y.CLEAR_SELECTED");
 
+	protected _isFocused = false;
+
 	/**
 	 * Creates an instance of ComboBox.
 	 */
@@ -877,6 +891,10 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		}
 	}
 
+	handleFocus(event: FocusEvent) {
+		this._isFocused = event.type === "focus";
+	}
+
 	protected updateSelected() {
 		const selected = this.view.getSelected();
 		if (this.type === "multi") {

src/combobox/combobox.stories.ts

@@ -72,7 +72,8 @@ export default {
 		dropUp: false,
 		selectionFeedback: "top-after-reopen",
 		size: "md",
-		theme: "dark"
+		theme: "dark",
+		fluid: false
 	},
 	argTypes: {
 		size: {
@@ -119,6 +120,7 @@ const Template = (args) => ({
 			[items]="items"
 			[theme]="theme"
 			[dropUp]="dropUp"
+			[fluid]="fluid"
 			(selected)="selected($event)"
 			(submit)="submit($event)"
 			(search)="search($event)"
@@ -176,6 +178,10 @@ Dynamic.parameters = {
 	}
 };
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+	fluid: true
+};
 
 const MultiTemplate = (args) => ({
 	props: args,
@@ -196,6 +202,7 @@ const MultiTemplate = (args) => ({
 			[selectionFeedback]="selectionFeedback"
 			[dropUp]="dropUp"
 			[appendInline]="appendInline"
+			[fluid]="fluid"
 			type="multi"
 			(selected)="selected($event)"
 			(submit)="submit($event)"