feat(field): add token to set background of md-outlined-field

PiperOrigin-RevId: 672978449
material-components · Sep 10, 2024 · 52b972d · 52b972d
1 parent a9ee4f5
commit 52b972d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 17 deletions.
diff --git a/field/internal/_filled-field.scss b/field/internal/_filled-field.scss
@@ -52,19 +52,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       }
     }
 
-    .background,
     .state-layer {
       border-radius: inherit;
       inset: 0;
       pointer-events: none;
       position: absolute;
-    }
-
-    .background {
-      background: var(--_container-color);
-    }
-
-    .state-layer {
       visibility: hidden;
     }
 
@@ -161,11 +153,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       opacity: var(--_disabled-active-indicator-opacity);
     }
 
-    .disabled .background {
-      background: var(--_disabled-container-color);
-      opacity: var(--_disabled-container-opacity);
-    }
-
     .error .active-indicator::before {
       border-bottom-color: var(--_error-active-indicator-color);
     }

diff --git a/field/internal/_shared.scss b/field/internal/_shared.scss
@@ -57,6 +57,19 @@
     resize: inherit;
   }
 
+  .background {
+    background: var(--_container-color);
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .disabled .background {
+    background: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
   .resizable:not(.disabled) .container {
     // `resize` is inherited from the host, but only applies to the container
     // when resizable.

diff --git a/field/internal/field.ts b/field/internal/field.ts
@@ -132,7 +132,8 @@ export class Field extends LitElement {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
+          <div class="background"></div>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
@@ -180,7 +181,7 @@ export class Field extends LitElement {
     }
   }
 
-  protected renderBackground?(): TemplateResult;
+  protected renderStateLayer?(): TemplateResult;
   protected renderIndicator?(): TemplateResult;
   protected renderOutline?(floatingLabel: unknown): TemplateResult;
 

diff --git a/field/internal/filled-field.ts b/field/internal/filled-field.ts
@@ -12,9 +12,8 @@ import {Field} from './field.js';
  * A filled field component.
  */
 export class FilledField extends Field {
-  protected override renderBackground() {
+  protected override renderStateLayer() {
     return html`
-      <div class="background"></div>
       <div class="state-layer"></div>
     `;
   }

diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
@@ -20,6 +20,7 @@
 $supported-tokens: (
   // go/keep-sorted start
   'bottom-space',
+  'container-color',
   'container-shape',
   'container-shape-end-end',
   'container-shape-end-start',
@@ -31,6 +32,8 @@ $supported-tokens: (
   'content-size',
   'content-space',
   'content-weight',
+  'disabled-container-color',
+  'disabled-container-opacity',
   'disabled-content-color',
   'disabled-content-opacity',
   'disabled-label-text-color',
@@ -125,13 +128,18 @@ $_default: (
   $tokens: (
     // go/keep-sorted start
     'bottom-space': if($exclude-hardcoded-values, null, 16px),
+    'container-color': map.get($text-field, 'container-color', 'transparent'),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-font': map.get($text-field, 'input-text-font'),
     'content-line-height': map.get($text-field, 'input-text-line-height'),
     'content-size': map.get($text-field, 'input-text-size'),
     'content-space': if($exclude-hardcoded-values, null, 16px),
     'content-weight': map.get($text-field, 'input-text-weight'),
+    'disabled-container-color':
+      map.get($text-field, 'disabled-container-color', 'transparent'),
+    'disabled-container-opacity':
+      map.get($text-field, 'disabled-container-opacity'),
     'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
     'disabled-content-opacity':
       map.get($text-field, 'disabled-input-text-opacity'),