feat: fluid state for select (#3009)

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

Author: eduardmarcinco

src/select/select.component.ts

@@ -32,11 +32,23 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 @Component({
 	selector: "cds-select, ibm-select",
 	template: `
-		<div class="cds--form-item">
-			<ng-template [ngIf]="skeleton">
+		<div
+			[ngClass]="{
+				'cds--form-item': !skeleton,
+				'cds--select--fluid': fluid && !skeleton
+			}">
+			<ng-container *ngIf="skeleton && !fluid">
 				<div *ngIf="label" class="cds--label cds--skeleton"></div>
 				<div class="cds--select cds--skeleton"></div>
-			</ng-template>
+			</ng-container>
+			<ng-container *ngIf="skeleton && fluid">
+				<div class="cds--list-box__wrapper--fluid">
+					<div class="cds--list-box cds--skeleton">
+						<div class="cds--list-box__label"></div>
+						<div class="cds--list-box__field"></div>
+					</div>
+				</div>
+			</ng-container>
 			<div
 				*ngIf="!skeleton"
 				class="cds--select"
@@ -46,7 +58,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 					'cds--select--invalid': invalid,
 					'cds--select--warning': warn,
 					'cds--select--disabled': disabled,
-					'cds--select--readonly': readonly
+					'cds--select--readonly': readonly,
+					'cds--select--fluid--invalid': fluid && invalid,
+					'cds--select--fluid--focus': fluid && focused
 				}">
 				<label
 					*ngIf="label"
@@ -60,7 +74,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 					<ng-container *ngTemplateOutlet="noInline"></ng-container>
 				</div>
 				<div
-					*ngIf="helperText"
+					*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"
 					class="cds--form__helper-text"
 					[ngClass]="{
 						'cds--form__helper-text--disabled': disabled
@@ -89,7 +103,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 						'cds--select-input--lg': size === 'lg'
 					}"
 					(mousedown)="onMouseDown($event)"
-					(keydown)="onKeyDown($event)">
+					(keydown)="onKeyDown($event)"
+					(focus)="fluid ? handleFocus($event) : null"
+					(blur)="fluid ? handleFocus($event) : null">
 					<ng-content></ng-content>
 				</select>
 				<svg
@@ -116,16 +132,30 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 					size="16"
 					class="cds--select__invalid-icon cds--select__invalid-icon--warning">
 				</svg>
+				<ng-container *ngIf="fluid">
+					<hr class="cds--select__divider" />
+					<div
+						*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+					<div *ngIf="!invalid && warn" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
 			</div>
-			<div
-				*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
-				<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
-				<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
-			</div>
-			<div *ngIf="!invalid && warn" class="cds--form-requirement">
-				<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
-				<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
-			</div>
+			<ng-container *ngIf="!fluid">
+				<div
+					*ngIf="invalid && invalidText" role="alert" class="cds--form-requirement" aria-live="polite">
+					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				</div>
+				<div *ngIf="!invalid && warn" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+				</div>
+			</ng-container>
 		</ng-template>
 	`,
 	providers: [
@@ -209,10 +239,17 @@ export class Select implements ControlValueAccessor, AfterViewInit {
 	@Input() theme: "light" | "dark" = "dark";
 	@Input() ariaLabel: string;
 
+	/**
+	 * Experimental: enable fluid state
+	 */
+	@Input() fluid = false;
+
 	@Output() valueChange = new EventEmitter();
 
 	@ViewChild("select") select: ElementRef;
 
+	focused = false;
+
 	protected _value;
 
 	ngAfterViewInit() {
@@ -296,9 +333,14 @@ export class Select implements ControlValueAccessor, AfterViewInit {
 		}
 	}
 
+	handleFocus(event: FocusEvent) {
+		this.focused = event.type === "focus";
+	}
+
 	/**
 	 * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
 	 */
 	protected onChangeHandler = (_: any) => { };
 	protected onTouchedHandler = () => { };
+
 }

src/select/select.stories.ts

@@ -35,7 +35,8 @@ export default {
 		helperText: "Optional helper text",
 		size: "md",
 		theme: "dark",
-		display: "default"
+		display: "default",
+		fluid: false
 	},
 	argTypes: {
 		size: {
@@ -74,6 +75,7 @@ const Template = (args) => ({
 			[helperText]="helperText"
 			[theme]="theme"
 			[(ngModel)]="model"
+			[fluid]="fluid"
 			[display]="display">
 			<option value="default" disabled selected hidden>Choose an option</option>
 			<option value="solong">A much longer option that is worth having around to check how text flows</option>
@@ -90,6 +92,11 @@ const Template = (args) => ({
 });
 export const Basic = Template.bind({});
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+	fluid: true
+};
+
 const NgModelTemplate = (args) => ({
 	props: args,
 	template: `
@@ -107,6 +114,7 @@ const NgModelTemplate = (args) => ({
 			[helperText]="helperText"
 			[theme]="theme"
 			[(ngModel)]="model"
+			[fluid]="fluid"
 			[display]="display"
 			ariaLabel='ngModel select'>
 			<option value="default" disabled selected hidden>Choose an option</option>