Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: fluid state for text area #3012

Merged
merged 6 commits into from
Oct 5, 2024
Merged

feat: fluid state for text area #3012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4657565
feat: fluid state for text area
eduardmarcinco Sep 20, 2024
1d4fb75
Merge branch 'master' into fluid/text-area
Akshat55 Sep 30, 2024
dbae4f6
Merge branch 'master' into fluid/text-area
Akshat55 Oct 4, 2024
e4db8c6
fix: simplify condition
Akshat55 Oct 4, 2024
178307f
chore: lint fix
Akshat55 Oct 4, 2024
981fb0b
fix: remove 'warn' from textarea directive
Akshat55 Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/input/text-area.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,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;
}
}
148 changes: 96 additions & 52 deletions src/input/textarea-label.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,58 +31,89 @@ import { TextArea } from "./text-area.directive";
@Component({
selector: "cds-textarea-label, ibm-textarea-label",
template: `
<label
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled,
'cds--skeleton': skeleton
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
<div
class="cds--text-area__wrapper"
[ngClass]="{
'cds--text-input__field-wrapper--warning': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
<svg
*ngIf="!invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
</svg>
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
<ng-template #textAreaContent>
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
</ng-template>
</div>
<div
*ngIf="!skeleton && helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<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="skeleton">
<span class="cds--label cds--skeleton"></span>
<div class="cds--text-area cds--skeleton"></div>
</ng-container>
<ng-container *ngIf="!skeleton">
<div class="cds--text-area__label-wrapper">
<label
[for]="labelInputID"
[attr.aria-label]="ariaLabel"
class="cds--label"
[ngClass]="{
'cds--label--disabled': disabled
}">
<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
<ng-template #labelContent>
<ng-content></ng-content>
</ng-template>
</label>
</div>
<div
class="cds--text-area__wrapper"
[ngClass]="{
'cds--text-area__wrapper--warn': warn
}"
[attr.data-invalid]="(invalid ? true : null)"
#wrapper>
<svg
*ngIf="!fluid && invalid"
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
<svg
*ngIf="!fluid && !invalid && warn"
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
<ng-template #textAreaContent>
<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
</ng-template>

<ng-container *ngIf="fluid">
<hr class="cds--text-area__divider" />
<div *ngIf="invalid" class="cds--form-requirement">
<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
<svg
cdsIcon="warning--filled"
size="16"
class="cds--text-area__invalid-icon">
</svg>
</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>
<svg
cdsIcon="warning--alt--filled"
size="16"
class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
</svg>
</div>
</ng-container>
</div>
<ng-container *ngIf="!fluid">
<div
*ngIf="helperText && !invalid && !warn"
class="cds--form__helper-text"
[ngClass]="{'cds--form__helper-text--disabled': disabled}">
<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
</div>
<div *ngIf="invalid" class="cds--form-requirement">
<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-container>
`
})
export class TextareaLabelComponent implements AfterViewInit {
Expand Down Expand Up @@ -136,6 +167,11 @@ export class TextareaLabelComponent implements AfterViewInit {
*/
@Input() ariaLabel: string;

/**
* Experimental: enable fluid state
*/
@Input() fluid = false;

// @ts-ignore
@ViewChild("wrapper", { static: false }) wrapper: ElementRef<HTMLDivElement>;

Expand All @@ -148,6 +184,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.
*/
Expand Down
59 changes: 34 additions & 25 deletions src/input/textarea.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;

Expand All @@ -21,6 +48,8 @@ const Template = (args) => ({
[invalid]="invalid"
[disabled]="disabled"
[invalidText]="invalidText"
[fluid]="fluid"
[skeleton]="skeleton"
[warn]="warn"
[warnText]="warnText">
{{label}}
Expand All @@ -38,30 +67,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) => ({
Expand Down
Loading