From 46575658bf33f79e81061c3cad2cedd00e9856e8 Mon Sep 17 00:00:00 2001 From: Eduard Marcinco Date: Fri, 20 Sep 2024 23:10:37 +0200 Subject: [PATCH 1/4] feat: fluid state for text area --- src/input/text-area.directive.ts | 5 + src/input/textarea-label.component.ts | 144 ++++++++++++++++---------- src/input/textarea.stories.ts | 60 ++++++----- 3 files changed, 132 insertions(+), 77 deletions(-) diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts index 1a8223b4a5..5c79dd4658 100644 --- a/src/input/text-area.directive.ts +++ b/src/input/text-area.directive.ts @@ -23,8 +23,13 @@ export class TextArea { @HostBinding("class.cds--text-area") baseClass = true; @HostBinding("class.cds--text-area--invalid") @Input() invalid = false; + @HostBinding("class.cds--text-area--warn") @Input() warn = false; @HostBinding("class.cds--skeleton") @Input() skeleton = false; @HostBinding("class.cds--text-area--light") get isLightTheme() { return this.theme === "light"; } + + @HostBinding("attr.data-invalid") get getInvalidAttr() { + return this.invalid ? true : undefined; + }; } diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts index 7f581c06df..7657fdd7c8 100644 --- a/src/input/textarea-label.component.ts +++ b/src/input/textarea-label.component.ts @@ -31,58 +31,85 @@ import { TextArea } from "./text-area.directive"; @Component({ selector: "cds-textarea-label, ibm-textarea-label", template: ` - -
- - - - - - - - -
-
- {{helperText}} - -
-
- {{invalidText}} - -
-
- {{warnText}} - -
+ + +
+ + +
+ +
+
+ + + + + + + + + +
+
+ {{invalidText}} + + + +
+
+ {{warnText}} + + + +
+
+
+ {{helperText}} + +
+
+ {{invalidText}} + +
+
+ {{warnText}} + +
+ ` }) export class TextareaLabelComponent implements AfterViewInit { @@ -136,6 +163,11 @@ export class TextareaLabelComponent implements AfterViewInit { */ @Input() ariaLabel: string; + /** + * Experimental: enable fluid state + */ + @Input() fluid = false; + // @ts-ignore @ViewChild("wrapper", { static: false }) wrapper: ElementRef; @@ -148,6 +180,14 @@ export class TextareaLabelComponent implements AfterViewInit { return this.wrapper?.nativeElement.querySelector("textarea")?.readOnly ?? false; } + @HostBinding("class.cds--text-area--fluid") get fluidClass() { + return this.fluid && !this.skeleton; + } + + @HostBinding("class.cds--text-area--fluid__skeleton") get fluidSkeletonClass() { + return this.fluid && this.skeleton; + } + /** * Creates an instance of Label. */ diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts index 00ec0cd6a8..c9d437f7b1 100644 --- a/src/input/textarea.stories.ts +++ b/src/input/textarea.stories.ts @@ -1,6 +1,6 @@ /* tslint:disable variable-name */ -import { moduleMetadata, Meta } from "@storybook/angular"; +import { Meta, moduleMetadata } from "@storybook/angular"; import { InputModule, TextareaLabelComponent } from "./"; export default { @@ -10,6 +10,33 @@ 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", + cols: 50, + rows: 4, + autocomplete: "on", + theme: "dark", + readonly: false, + fluid: false, + skeleton: false + }, + argTypes: { + autocomplete: { + options: ["on", "off"], + control: "radio" + }, + theme: { + options: ["light", "dark"], + control: "radio" + } + }, component: TextareaLabelComponent } as Meta; @@ -21,6 +48,8 @@ const Template = (args) => ({ [invalid]="invalid" [disabled]="disabled" [invalidText]="invalidText" + [fluid]="fluid" + [skeleton]="skeleton" [warn]="warn" [warnText]="warnText"> {{label}} @@ -28,6 +57,7 @@ const Template = (args) => ({ cdsTextArea [placeholder]="placeholder" [invalid]="invalid" + [warn]="warn" [disabled]="disabled" [theme]="theme" [rows]="rows" @@ -38,30 +68,10 @@ 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", - cols: 50, - rows: 4, - autocomplete: "on", - theme: "dark", - readonly: false -}; -Basic.argTypes = { - autocomplete: { - options: ["on", "off"], - control: "radio" - }, - theme: { - options: ["light", "dark"], - control: "radio" - } + +export const Fluid = Template.bind({}); +Fluid.args = { + fluid: true }; const SkeletonTemplate = (args) => ({ From e4db8c67778716f37bb55e6cdfb023cd7d2ddf3c Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Fri, 4 Oct 2024 14:37:00 -0400 Subject: [PATCH 2/4] fix: simplify condition Signed-off-by: Akshat Patel --- src/input/textarea-label.component.ts | 62 ++++++++++++++------------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/src/input/textarea-label.component.ts b/src/input/textarea-label.component.ts index 7657fdd7c8..3221fe07c3 100644 --- a/src/input/textarea-label.component.ts +++ b/src/input/textarea-label.component.ts @@ -74,41 +74,45 @@ import { TextArea } from "./text-area.directive"; -
-
+ +
+
+ {{invalidText}} + + + +
+
+ {{warnText}} + + + +
+ +
+ +
+ {{helperText}} + +
+
{{invalidText}} - -
-
+
{{warnText}} - -
-
-
- {{helperText}} - -
-
- {{invalidText}} - -
-
- {{warnText}} - -
+ ` }) From 178307f451e09c124b736d836ec993ba8ea1a2c3 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Fri, 4 Oct 2024 14:42:10 -0400 Subject: [PATCH 3/4] chore: lint fix Signed-off-by: Akshat Patel --- src/input/text-area.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts index 5c79dd4658..18b5ef41ef 100644 --- a/src/input/text-area.directive.ts +++ b/src/input/text-area.directive.ts @@ -28,8 +28,8 @@ export class TextArea { @HostBinding("class.cds--text-area--light") get isLightTheme() { return this.theme === "light"; } - + @HostBinding("attr.data-invalid") get getInvalidAttr() { return this.invalid ? true : undefined; - }; + } } From 981fb0bcf3cfe8b37a8cfd1f7f93636d62d952a5 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Fri, 4 Oct 2024 21:55:38 -0400 Subject: [PATCH 4/4] fix: remove 'warn' from textarea directive Signed-off-by: Akshat Patel --- src/input/text-area.directive.ts | 1 - src/input/textarea.stories.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/input/text-area.directive.ts b/src/input/text-area.directive.ts index 18b5ef41ef..06b473cabb 100644 --- a/src/input/text-area.directive.ts +++ b/src/input/text-area.directive.ts @@ -23,7 +23,6 @@ export class TextArea { @HostBinding("class.cds--text-area") baseClass = true; @HostBinding("class.cds--text-area--invalid") @Input() invalid = false; - @HostBinding("class.cds--text-area--warn") @Input() warn = false; @HostBinding("class.cds--skeleton") @Input() skeleton = false; @HostBinding("class.cds--text-area--light") get isLightTheme() { return this.theme === "light"; diff --git a/src/input/textarea.stories.ts b/src/input/textarea.stories.ts index c9d437f7b1..a90ebf2762 100644 --- a/src/input/textarea.stories.ts +++ b/src/input/textarea.stories.ts @@ -57,7 +57,6 @@ const Template = (args) => ({ cdsTextArea [placeholder]="placeholder" [invalid]="invalid" - [warn]="warn" [disabled]="disabled" [theme]="theme" [rows]="rows"