feat: fluid state for text input and password (#3011)

Signed-off-by: Akshat Patel <akshat@live.ca>
Co-authored-by: Akshat Patel <38994122+Akshat55@users.noreply.github.com>
Co-authored-by: Akshat Patel <akshat@live.ca>

src/input/input.directive.ts

@@ -53,9 +53,14 @@ export class TextInput {
 	}
 
 	@HostBinding("class.cds--text-input--invalid") @Input() invalid = false;
-	@HostBinding("class.cds--text-input__field-wrapper--warning") @Input() warn = false;
+	@HostBinding("class.cds--text-input--warning") @Input() warn = false;
 	@HostBinding("class.cds--skeleton") @Input() skeleton = false;
 	@HostBinding("class.cds--text-input--light") get isLightTheme() {
 		return this.theme === "light";
 	}
+
+	@HostBinding("attr.data-invalid") get getInvalidAttribute() {
+		return this.invalid ? true : undefined;
+	}
+
 }

src/input/input.stories.ts

@@ -10,6 +10,36 @@ export default {
 			imports: [InputModule]
 		})
 	],
+	args: {
+		disabled: false,
+		invalid: false,
+		invalidText: "Invalid entry",
+		warn: false,
+		warnText: "This is a warning!",
+		label: "Text input label",
+		helperText: "Optional helper text",
+		placeholder: "Placeholder",
+		autocomplete: "on",
+		theme: "dark",
+		size: "md",
+		readonly: false,
+		fluid: false,
+		skeleton: false
+	},
+	argTypes: {
+		autocomplete: {
+			options: ["on", "off"],
+			control: "radio"
+		},
+		theme: {
+			options: ["light", "dark"],
+			control: "radio"
+		},
+		size: {
+			options: ["sm", "md", "lg"],
+			control: "select"
+		}
+	},
 	component: TextInputLabelComponent
 } as Meta;
 
@@ -22,6 +52,8 @@ const Template = (args) => ({
 		[invalidText]="invalidText"
 		[warn]="warn"
 		[disabled]="disabled"
+		[fluid]="fluid"
+		[skeleton]="skeleton"
 		[warnText]="warnText">
 		{{label}}
 		<input
@@ -38,35 +70,11 @@ const Template = (args) => ({
 	`
 });
 export const Basic = Template.bind({});
-Basic.args = {
-	disabled: false,
-	invalid: false,
-	invalidText: "Invalid entry",
-	warn: false,
-	warnText: "This is a warning!",
-	label: "Text input label",
-	helperText: "Optional helper text",
-	placeholder: "Placeholder",
-	autocomplete: "on",
-	theme: "dark",
-	size: "md",
-	readonly: false
-};
-Basic.argTypes = {
-	autocomplete: {
-		options: ["on", "off"],
-		control: "radio"
-	},
-	theme: {
-		options: ["light", "dark"],
-		control: "radio"
-	},
-	size: {
-		options: ["sm", "md", "lg"],
-		control: "select"
-	}
-};
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+	fluid: true
+};
 
 const SkeletonTemplate = (args) => ({
 	props: args,