feat(field,textfield): add container slot for custom background con…

…tent PiperOrigin-RevId: 673417206
material-components · Sep 11, 2024 · 44c13cd · 44c13cd
1 parent a9ee4f5
commit 44c13cd
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/field/internal/_shared.scss b/field/internal/_shared.scss
@@ -72,6 +72,17 @@
     pointer-events: none;
   }
 
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
+  slot[name='container']::slotted(*) {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
   @include content.styles;
   @include label.styles;
   @include supporting-text.styles;

diff --git a/field/internal/field.ts b/field/internal/field.ts
@@ -132,7 +132,9 @@ export class Field extends LitElement {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
+          ${this.renderBackground?.()}
+          <slot name="container"></slot>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
@@ -181,6 +183,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
@@ -13,10 +13,11 @@ import {Field} from './field.js';
  */
 export class FilledField extends Field {
   protected override renderBackground() {
-    return html`
-      <div class="background"></div>
-      <div class="state-layer"></div>
-    `;
+    return html` <div class="background"></div> `;
+  }
+
+  protected override renderStateLayer() {
+    return html` <div class="state-layer"></div> `;
   }
 
   protected override renderIndicator() {

diff --git a/textfield/internal/_shared.scss b/textfield/internal/_shared.scss
@@ -44,6 +44,10 @@
     resize: inherit;
   }
 
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
   @include icon.styles;
   @include input.styles;
 }
diff --git a/textfield/internal/text-field.ts b/textfield/internal/text-field.ts
@@ -569,6 +569,7 @@ export abstract class TextField extends textFieldBaseClass {
       ${this.renderInputOrTextarea()}
       ${this.renderTrailingIcon()}
       <div id="description" slot="aria-describedby"></div>
+      <slot name="container" slot="container"></slot>
     </${this.fieldTag}>`;
   }