fix(field): move padding to slotted content

PiperOrigin-RevId: 547375880
material-components · Jul 12, 2023 · 0ab5fd5 · 0ab5fd5
1 parent e39f659
commit 0ab5fd5
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 56 deletions.
diff --git a/field/demo/stories.ts b/field/demo/stories.ts
@@ -36,20 +36,6 @@ const styles = css`
   md-outlined-field {
     width: 256px;
   }
-
-  input,
-  textarea {
-    background: none;
-    border: none;
-    box-sizing: border-box;
-    color: currentColor;
-    font: inherit;
-    outline: 1px dashed currentColor;
-    padding: 0;
-    resize: none;
-    margin: 0;
-    width: 100%;
-  }
 `;
 
 const filled: MaterialStoryInit<StoryKnobs> = {

diff --git a/field/lib/_content.scss b/field/lib/_content.scss
@@ -74,13 +74,9 @@ $_enter-delay: $_label-duration - $_visible-duration;
   }
 
   .content {
-    // Content elements provided to the field (such as <input>) may use
-    // `currentColor` to inherit this property.
     color: var(--_content-color);
     display: flex;
     flex: 1;
-    // Content elements provided to the field (such as <input>) may inherit font
-    font: var(--_content-type);
     opacity: 0;
     transition: opacity $_visible-duration
       map.get($_md-sys-motion, 'easing-emphasized');
@@ -93,6 +89,17 @@ $_enter-delay: $_label-duration - $_visible-duration;
     transition-delay: $_enter-delay;
   }
 
+  .content ::slotted(*) {
+    all: unset;
+    // Use `currentColor` to inherit the various state colors that are set
+    // below.
+    color: currentColor;
+    font: var(--_content-type);
+    padding-top: var(--_top-space);
+    padding-bottom: var(--_bottom-space);
+    width: 100%;
+  }
+
   :hover .content {
     color: var(--_hover-content-color);
   }

diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
@@ -92,7 +92,15 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
   .label.floating {
     position: absolute;
-    top: 0;
+    top: var(--_with-label-top-space);
+  }
+
+  .field:not(.with-start) .label-space {
+    margin-inline-start: var(--_leading-space);
+  }
+
+  .field:not(.with-end) .label-space {
+    margin-inline-end: var(--_trailing-space);
   }
 
   .active-indicator {
@@ -125,21 +133,19 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     opacity: 1;
   }
 
-  .field:not(.with-start) .start {
+  .field:not(.with-start) .content ::slotted(*) {
     padding-inline-start: var(--_leading-space);
   }
 
-  .field:not(.with-end) .end {
+  .field:not(.with-end) .content ::slotted(*) {
     padding-inline-end: var(--_trailing-space);
   }
 
-  .field:not(.no-label) .container {
+  .field:not(.no-label) .content ::slotted(*) {
     padding-bottom: var(--_with-label-bottom-space);
-    padding-top: var(--_with-label-top-space);
-  }
-
-  .field:not(.no-label) .middle {
-    padding-top: var(--_label-text-populated-line-height);
+    padding-top: calc(
+      var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+    );
   }
 
   :hover .active-indicator::before {

diff --git a/field/lib/_label.scss b/field/lib/_label.scss
@@ -5,6 +5,7 @@
 
 @mixin styles() {
   .label {
+    box-sizing: border-box;
     color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
@@ -22,6 +23,7 @@
     white-space: nowrap;
     z-index: 1;
     font: var(--_label-text-type);
+    width: min-content;
   }
 
   .label.resting {
@@ -44,6 +46,17 @@
     display: none;
   }
 
+  // Labels need start/end padding when there isn't start/end content so they
+  // don't sit on the edge of the field. We use a wrapper element around the
+  // labels so as not to affect the dimensions used in the label keyframes.
+  .label-space {
+    inset: 0;
+    position: absolute;
+    // Don't let setting text-align on the field change the label's alignment.
+    // It should only impact content text.
+    text-align: initial;
+  }
+
   :hover .label {
     color: var(--_hover-label-text-color);
   }

diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss
@@ -226,17 +226,27 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     var(--_container-shape-start-end),
     var(--_container-shape-end-end)
   );
+  $start-space: max(
+    var(--_leading-space),
+    $shape-start + var(--_outline-label-padding)
+  );
+  $end-space: max(var(--_trailing-space), $shape-end);
 
   .outline-start,
-  .field:not(.with-start) .start {
-    padding-inline-start: max(
-      var(--_leading-space),
-      $shape-start + var(--_outline-label-padding)
-    );
+  .field:not(.with-start) .content ::slotted(*) {
+    padding-inline-start: $start-space;
+  }
+
+  .field:not(.with-start) .label-space {
+    margin-inline-start: $start-space;
+  }
+
+  .field:not(.with-end) .content ::slotted(*) {
+    padding-inline-end: $end-space;
   }
 
-  .field:not(.with-end) .end {
-    padding-inline-end: max(var(--_trailing-space), $shape-end);
+  .field:not(.with-end) .label-space {
+    margin-inline-end: $end-space;
   }
 
   .outline-start::before,

diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
@@ -46,8 +46,6 @@
     flex: 1;
     min-width: min-content;
     overflow: hidden;
-    padding-top: var(--_top-space);
-    padding-bottom: var(--_bottom-space);
     position: relative;
   }
 

diff --git a/field/lib/field.ts b/field/lib/field.ts
@@ -112,16 +112,16 @@ export class Field extends LitElement implements SurfacePositionTarget {
     return html`
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${outline}
           ${this.renderBackground?.()}
-          ${this.renderIndicator?.()}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>
             </div>
             <div class="middle">
-              ${restingLabel}
-              ${outline ? nothing : floatingLabel}
+              <div class="label-space">
+                ${restingLabel}
+                ${outline ? nothing : floatingLabel}
+              </div>
               <div class="content">
                 <slot></slot>
               </div>
@@ -130,6 +130,8 @@ export class Field extends LitElement implements SurfacePositionTarget {
               <slot name="end"></slot>
             </div>
           </div>
+          ${outline}
+          ${this.renderIndicator?.()}
         </div>
         ${this.renderSupportingText()}
       </div>

diff --git a/select/lib/_shared.scss b/select/lib/_shared.scss
@@ -46,10 +46,6 @@
     display: inline-flex;
   }
 
-  .label {
-    width: 100%;
-  }
-
   :host([disabled]) {
     pointer-events: none;
   }

diff --git a/select/lib/select.ts b/select/lib/select.ts
@@ -244,9 +244,7 @@ export abstract class Select extends LitElement {
   private renderLabel() {
     // need to render &nbsp; so that line-height can apply and give it a
     // non-zero height
-    return html`<div
-        id="label"
-        class="label">${this.displayText || html`&nbsp;`}</div>`;
+    return html`<div id="label">${this.displayText || html`&nbsp;`}</div>`;
   }
 
   private renderMenu() {

diff --git a/textfield/lib/_input.scss b/textfield/lib/_input.scss
@@ -4,17 +4,20 @@
 //
 
 @mixin styles() {
+  .content {
+    display: flex;
+  }
+
+  input,
+  .prefix,
+  .suffix {
+    all: inherit;
+    padding: 0;
+  }
+
   input {
-    appearance: none;
-    background: none;
-    border: none;
     caret-color: var(--_caret-color);
-    color: currentColor;
-    font: inherit;
-    outline: none;
-    padding: 0;
     text-align: inherit;
-    width: 100%;
 
     &::placeholder {
       color: currentColor;
@@ -51,6 +54,11 @@
     color: var(--_input-text-placeholder-color);
   }
 
+  .prefix,
+  .suffix {
+    width: min-content;
+  }
+
   .prefix {
     padding-inline-end: var(--_input-text-prefix-trailing-space);
   }

diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -517,7 +517,7 @@ export abstract class TextField extends LitElement {
       max=${this.maxLength}
     >
       ${this.renderLeadingIcon()}
-      ${prefix}${input}${suffix}
+      <div class="content">${prefix}${input}${suffix}</div>
       ${this.renderTrailingIcon()}
     </${this.fieldTag}>`;
   }