feat(text-field): add prefix and suffix

PiperOrigin-RevId: 458528053
material-components · Jul 1, 2022 · 8e68857 · 8e68857
1 parent 163711d
commit 8e68857
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/text_field/lib/_filled-text-field-theme.scss b/text_field/lib/_filled-text-field-theme.scss
@@ -65,6 +65,8 @@ $_reference-theme: map.merge(
   (
     container-padding-horizontal: null,
     container-padding-vertical: null,
+    input-text-prefix-padding: null,
+    input-text-suffix-padding: null,
   )
 );
 
@@ -82,6 +84,8 @@ $_reference-theme: map.merge(
     (
       container-padding-horizontal: 16px,
       container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
     ),
     $theme
   );

diff --git a/text_field/lib/_input-theme.scss b/text_field/lib/_input-theme.scss
@@ -41,6 +41,21 @@
       weight: map.get($theme, input-text-weight),
     )
   );
+
+  &:not(.md3-text-field--disabled) {
+    .md3-text-field__prefix,
+    .md3-text-field__suffix {
+      color: map.get($theme, input-text-prefix-color);
+    }
+  }
+
+  .md3-text-field__prefix {
+    padding-inline-end: map.get($theme, input-text-prefix-padding);
+  }
+
+  .md3-text-field__suffix {
+    padding-inline-start: map.get($theme, input-text-suffix-padding);
+  }
 }
 
 @mixin _caret-color($colors) {
@@ -64,7 +79,9 @@
 }
 
 @mixin _typography($font) {
-  .md3-text-field__input {
+  .md3-text-field__input,
+  .md3-text-field__prefix,
+  .md3-text-field__suffix {
     @include typography.theme-styles($font);
   }
 }
diff --git a/text_field/lib/_outlined-text-field-theme.scss b/text_field/lib/_outlined-text-field-theme.scss
@@ -63,6 +63,8 @@ $_reference-theme: map.merge(
   (
     container-padding-horizontal: null,
     container-padding-vertical: null,
+    input-text-prefix-padding: null,
+    input-text-suffix-padding: null,
     outline-label-padding: null,
   )
 );
@@ -81,6 +83,8 @@ $_reference-theme: map.merge(
     (
       container-padding-horizontal: 16px,
       container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
       outline-label-padding: 4px,
     ),
     $theme

diff --git a/text_field/lib/text-field.ts b/text_field/lib/text-field.ts
@@ -57,6 +57,14 @@ export class TextField extends LitElement {
    * value.
    */
   @property({type: String}) defaultValue = '';
+  /**
+   * An optional prefix to display before the input value.
+   */
+  @property({type: String}) prefixText = '';
+  /**
+   * An optional suffix to display after the input value.
+   */
+  @property({type: String}) suffixText = '';
 
   // ARIA
   // TODO(b/210730484): replace with @soyParam annotation
@@ -147,8 +155,10 @@ export class TextField extends LitElement {
     // TODO(b/237283903): remove when custom isTruthy directive is supported
     const placeholderValue = this.placeholder ? this.placeholder : undefined;
 
-    return html`
-      <input
+    const prefix = this.renderPrefix();
+    const suffix = this.renderSuffix();
+
+    return html`${prefix}<input
         class="md3-text-field__input"
         aria-invalid=${this.error}
         aria-label=${ifDefined(this.ariaLabel)}
@@ -162,8 +172,27 @@ export class TextField extends LitElement {
         @change=${this.redispatchEvent}
         @input=${this.handleInput}
         @select=${this.redispatchEvent}
-      >
-    `;
+      >${suffix}`;
+  }
+
+  /** @soyTemplate */
+  protected renderPrefix(): TemplateResult {
+    return this.prefixText ?
+        html`<span class="md3-text-field__prefix">${this.prefixText}</span>` :
+        html``;
+
+    // TODO(b/217441842): Create shared function once argument bug is fixed
+    // return this.renderAffix(/* isSuffix */ false);
+  }
+
+  /** @soyTemplate */
+  protected renderSuffix(): TemplateResult {
+    return this.suffixText ?
+        html`<span class="md3-text-field__suffix">${this.suffixText}</span>` :
+        html``;
+
+    // TODO(b/217441842): Create shared function once argument bug is fixed
+    // return this.renderAffix(/* isSuffix */ true);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<TextField>) {