diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts index 31c7721e06..d6491f673a 100644 --- a/textfield/filled-text-field.ts +++ b/textfield/filled-text-field.ts @@ -47,6 +47,7 @@ export class MdFilledTextField extends FilledTextField { ${this.renderLeadingIcon()} ${this.renderFieldContent()} ${this.renderTrailingIcon()} + ${this.renderSupportingText()} `; } diff --git a/textfield/lib/_filled-text-field-theme.scss b/textfield/lib/_filled-text-field-theme.scss index f3fb875e9b..b2f863f2db 100644 --- a/textfield/lib/_filled-text-field-theme.scss +++ b/textfield/lib/_filled-text-field-theme.scss @@ -56,6 +56,11 @@ $forced-colors-theme: ( map.get($resolvers, typography), label-text ); + $theme: typography.resolve-theme( + $theme, + map.get($resolvers, typography), + supporting-text + ); @return $theme; } diff --git a/textfield/lib/_outlined-text-field-theme.scss b/textfield/lib/_outlined-text-field-theme.scss index cd1ad859b2..4a3ac51f70 100644 --- a/textfield/lib/_outlined-text-field-theme.scss +++ b/textfield/lib/_outlined-text-field-theme.scss @@ -55,6 +55,11 @@ $forced-colors-theme: ( map.get($resolvers, typography), label-text ); + $theme: typography.resolve-theme( + $theme, + map.get($resolvers, typography), + supporting-text + ); @return $theme; } diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts index 148754da10..ed8a00c75d 100644 --- a/textfield/lib/text-field.ts +++ b/textfield/lib/text-field.ts @@ -73,6 +73,15 @@ export class TextField extends LitElement { * Whether or not the text field has a trailing icon. Used for SSR. */ @property({type: Boolean}) hasTrailingIcon = false; + /** + * Conveys additional information below the text field, such as how it should + * be used. + */ + @property({type: String}) supportingText = ''; + /** + * The ID on the supporting text element, used for SSR. + */ + @property({type: String}) supportingTextId = 'support'; // ARIA // TODO(b/210730484): replace with @soyParam annotation @@ -206,6 +215,8 @@ export class TextField extends LitElement { // TODO(b/237281840): replace ternary operators with double pipes // TODO(b/237283903): remove when custom isTruthy directive is supported const placeholderValue = this.placeholder ? this.placeholder : undefined; + const ariaDescribedByValue = + this.supportingText ? this.supportingTextId : undefined; const ariaLabelValue = this.ariaLabel ? this.ariaLabel : this.label ? this.label : undefined; @@ -214,6 +225,7 @@ export class TextField extends LitElement { return html`${ + this.supportingText}` : + html``; + } + protected override willUpdate(changedProperties: PropertyValues) { if (!changedProperties.has('value') && !this.dirty) { // Do this here instead of in a setter so that the order of setting both diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts index c81d0715ba..04acd49acb 100644 --- a/textfield/outlined-text-field.ts +++ b/textfield/outlined-text-field.ts @@ -47,6 +47,7 @@ export class MdOutlinedTextField extends OutlinedTextField { ${this.renderLeadingIcon()} ${this.renderFieldContent()} ${this.renderTrailingIcon()} + ${this.renderSupportingText()} `; }