From 0d5d3445221564b250a9e4b22c0c27dcb5cde5a0 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 19 Jul 2022 16:58:49 -0700
Subject: [PATCH] chore(field): refactor start/end padding

PiperOrigin-RevId: 462008763
---
 field/lib/_outlined-field-theme.scss | 37 ++++++++++++----------------
 field/lib/_outlined-field.scss       | 17 -------------
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/field/lib/_outlined-field-theme.scss b/field/lib/_outlined-field-theme.scss
index d0b2fccd70..54362bdba1 100644
--- a/field/lib/_outlined-field-theme.scss
+++ b/field/lib/_outlined-field-theme.scss
@@ -127,9 +127,7 @@ $dark-theme: values(
     );
   }
 
-  @include _container-padding-horizontal(
-    map.get($theme, container-padding-horizontal)
-  );
+  @include _container-padding-horizontal($theme);
   @include _container-shape(map.get($theme, container-shape));
   @include _outline-color(
     (
@@ -165,14 +163,22 @@ $dark-theme: values(
   );
 }
 
-@mixin _container-padding-horizontal($padding) {
+@mixin _container-padding-horizontal($theme) {
+  // Add padding that will grow to compensate for the outline's shape.
+  // This is needed to prevent the outline border from clipping with the label
+  // and is mirrored in the container padding to align the content and resting
+  // label with the adjusted floating label.
+  $padding: map.get($theme, container-padding-horizontal);
+  $shape: map.get($theme, container-shape);
+  $label-padding: map.get($theme, outline-label-padding);
+
   .md3-field__outline-start,
-  .md3-field__start::before,
-  .md3-field__end::after {
-    // Outlined variant start section uses min-width instead of padding since it
-    // needs to add start/end padding to add extra space as needed for shape and
-    // label padding.
-    min-width: $padding;
+  .md3-field__start {
+    padding-inline-start: max($padding, $shape + $label-padding);
+  }
+
+  .md3-field__end {
+    padding-inline-end: max($padding, $shape);
   }
 }
 
@@ -180,20 +186,9 @@ $dark-theme: values(
   .md3-field__outline {
     border-radius: $shape;
   }
-
-  .md3-field__outline-start,
-  .md3-field__start::before,
-  .md3-field__end::after {
-    padding-inline-start: $shape;
-  }
 }
 
 @mixin _outline-label-padding($padding) {
-  .md3-field__outline-start,
-  .md3-field__start::before {
-    padding-inline-end: $padding;
-  }
-
   .md3-field__outline-start::before,
   .md3-field__outline-start::after {
     margin-inline-end: $padding;
diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss
index 86e55b9792..b0e242c766 100644
--- a/field/lib/_outlined-field.scss
+++ b/field/lib/_outlined-field.scss
@@ -12,13 +12,6 @@
 $_animation-duration: 150ms;
 
 @mixin static-styles() {
-  .md3-field--outlined {
-    .md3-field__start::before,
-    .md3-field__end::after {
-      @include start-and-end-shape-padding;
-    }
-  }
-
   .md3-field__outline {
     @include outline;
   }
@@ -74,16 +67,6 @@ $_animation-duration: 150ms;
   }
 }
 
-@mixin start-and-end-shape-padding() {
-  // Add a child element that will grow to compensate for the outline's shape.
-  // This is needed to prevent the outline border from clipping with the label
-  // and is mirrored in the container padding to align the content and resting
-  // label with the adjusted floating label.
-  box-sizing: border-box;
-  content: '';
-  display: flex;
-}
-
 @mixin outline() {
   display: flex;
   // Allow events to target elements underneath the outline, such as icons.