feat: fluid state for search (#3007)

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

Author: eduardmarcinco

src/search/search.component.html

@@ -5,21 +5,28 @@
 		'cds--search--md': size === 'md',
 		'cds--search--lg': size === 'lg',
 		'cds--search--light': theme === 'light',
-		'cds--skeleton': skeleton,
+		'cds--skeleton': skeleton && !fluid,
 		'cds--search--expandable': expandable && !tableSearch,
 		'cds--search--expanded': expandable && !tableSearch && active,
 		'cds--toolbar-search': toolbar && !expandable,
 		'cds--toolbar-search--active': toolbar && !expandable && active,
 		'cds--toolbar-search-container-persistent': tableSearch && !expandable,
 		'cds--toolbar-search-container-expandable': tableSearch && expandable,
-		'cds--toolbar-search-container-active': tableSearch && expandable && active
+		'cds--toolbar-search-container-active': tableSearch && expandable && active,
+		'cds--search--fluid': fluid,
+		'cds--search--disabled': disabled
 	}"
 	role="search"
 	[attr.aria-label]="ariaLabel"
 	(click)="openSearch()">
-	<label class="cds--label" [for]="id">{{label}}</label>
+	<label
+		class="cds--label"
+		[for]="id"
+		[ngClass]="{ 'cds--skeleton': skeleton && fluid }">
+		{{ !skeleton ? label : ''}}
+	</label>
 
-	<div *ngIf="skeleton; else enableInput" class="cds--search-input"></div>
+	<div *ngIf="skeleton; else enableInput" class="cds--text-input cds--skeleton"></div>
 	<ng-template #enableInput>
 		<input
 			#input

src/search/search.component.ts

@@ -41,6 +41,10 @@ export class Search implements ControlValueAccessor {
 		return !(this.toolbar || this.expandable);
 	}
 
+	@HostBinding("class.cds--text-input--fluid__skeleton") get fluidSkeletonClass() {
+		return this.skeleton && this.fluid;
+	}
+
 	/**
 	 * @deprecated since v5 - Use `cdsLayer` directive instead
 	 * `light` or `dark` search theme.
@@ -118,6 +122,10 @@ export class Search implements ControlValueAccessor {
 	 * Sets the aria label on the `div` element with the `search` role.
 	 */
 	@Input() ariaLabel: string;
+	/**
+	 * Experimental: enable fluid state
+	 */
+	@Input() fluid = false;
 	/**
 	 * Emits an event when value is changed.
 	 */

src/search/search.stories.ts

@@ -17,7 +17,8 @@ export default {
 		skeleton: false,
 		size: "md",
 		theme: "dark",
-		autocomplete: "on"
+		autocomplete: "on",
+		fluid: false
 	},
 	argTypes: {
 		expandable: {
@@ -57,8 +58,15 @@ const Template = (args) => ({
 			[size]="size"
 			(valueChange)="valueChange($event)"
 			(clear)="clear()"
+			[fluid]="fluid"
+			[skeleton]="skeleton"
 			[expandable]="expandable">
 		</cds-search>
 	`
 });
 export const Basic = Template.bind({});
+
+export const Fluid = Template.bind({});
+Fluid.args = {
+	fluid: true
+};