feat(text-field): add supporting text

PiperOrigin-RevId: 466241727
material-components · Aug 9, 2022 · 77cc80e · 77cc80e
1 parent a96664b
commit 77cc80e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 0 deletions.
diff --git 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()}
       </md-filled-field>
     `;
   }

diff --git 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
@@ -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
@@ -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`<input
       class="md3-text-field__input"
+      aria-describedby=${ifDefined(ariaDescribedByValue)}
       aria-invalid=${this.error}
       aria-label=${ifDefined(ariaLabelValue)}
       aria-labelledby=${ifDefined(ariaLabelledByValue)}
@@ -249,6 +261,17 @@ export class TextField extends LitElement {
     // return this.renderAffix(/* isSuffix */ true);
   }
 
+  /**
+   * @soyTemplate
+   * @slotName supporting-text
+   */
+  protected renderSupportingText(): TemplateResult {
+    return this.supportingText ?
+        html`<span id=${this.supportingTextId} slot="supporting-text">${
+            this.supportingText}</span>` :
+        html``;
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<TextField>) {
     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
@@ -47,6 +47,7 @@ export class MdOutlinedTextField extends OutlinedTextField {
         ${this.renderLeadingIcon()}
         ${this.renderFieldContent()}
         ${this.renderTrailingIcon()}
+        ${this.renderSupportingText()}
       </md-outlined-field>
     `;
   }