fix(text-field): container-shape not working for outlined variant

PiperOrigin-RevId: 463574366
material-components · Jul 27, 2022 · 6b25914 · 6b25914
1 parent 92a5ee4
commit 6b25914
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/field/lib/_outlined-field-theme.scss b/field/lib/_outlined-field-theme.scss
@@ -9,6 +9,7 @@
 @use 'sass:map';
 @use 'sass:string';
 @use '@material/web/sass/resolvers';
+@use '@material/web/sass/shape';
 @use '@material/web/sass/theme';
 @use '@material/web/sass/var';
 @use '@material/web/tokens';
@@ -97,13 +98,19 @@ $dark-theme: values(
 );
 
 @function _resolve-theme($theme, $resolvers) {
-  @return label-theme.resolve-theme($theme, $resolvers);
+  $theme: label-theme.resolve-theme($theme, $resolvers);
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get($resolvers, shape),
+    container-shape
+  );
+  @return $theme;
 }
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
   // Add resolved tokens so that $theme may specify them.
   $reference: map.merge($light-theme, _resolve-theme($light-theme, $resolvers));
-  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.validate-theme($reference, $theme);
   $theme: _resolve-theme($theme, $resolvers);
   $theme: theme.create-theme-vars($theme, outlined-field);
 
@@ -128,7 +135,14 @@ $dark-theme: values(
   }
 
   @include _container-padding-horizontal($theme);
-  @include _container-shape(map.get($theme, container-shape));
+  @include _container-shape(
+    (
+      start-start: map.get($theme, container-shape-start-start),
+      start-end: map.get($theme, container-shape-start-end),
+      end-end: map.get($theme, container-shape-end-end),
+      end-start: map.get($theme, container-shape-end-start),
+    )
+  );
   @include _outline-color(
     (
       default: map.get($theme, outline-color),
@@ -169,22 +183,32 @@ $dark-theme: values(
   // 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);
+  $shape-start: max(
+    map.get($theme, container-shape-start-start),
+    map.get($theme, container-shape-end-start)
+  );
+  $shape-end: max(
+    map.get($theme, container-shape-start-end),
+    map.get($theme, container-shape-end-end)
+  );
   $label-padding: map.get($theme, outline-label-padding);
 
   .md3-field__outline-start,
   .md3-field__start {
-    padding-inline-start: max($padding, $shape + $label-padding);
+    padding-inline-start: max($padding, $shape-start + $label-padding);
   }
 
   .md3-field__end {
-    padding-inline-end: max($padding, $shape);
+    padding-inline-end: max($padding, $shape-end);
   }
 }
 
 @mixin _container-shape($shape) {
   .md3-field__outline {
-    border-radius: $shape;
+    border-start-start-radius: map.get($shape, start-start);
+    border-start-end-radius: map.get($shape, start-end);
+    border-end-end-radius: map.get($shape, end-end);
+    border-end-start-radius: map.get($shape, end-start);
   }
 }
 

diff --git a/textfield/lib/_outlined-text-field-theme.scss b/textfield/lib/_outlined-text-field-theme.scss
@@ -98,7 +98,10 @@ $_reference-theme: map.merge(
 
   $field-theme: (
     container-height: map.get($theme, container-height),
-    container-shape: map.get($theme, container-shape),
+    container-shape-start-start: map.get($theme, container-shape-start-start),
+    container-shape-start-end: map.get($theme, container-shape-start-end),
+    container-shape-end-end: map.get($theme, container-shape-end-end),
+    container-shape-end-start: map.get($theme, container-shape-end-start),
     disabled-content-color: map.get($theme, disabled-input-text-color),
     disabled-content-opacity: map.get($theme, disabled-input-text-opacity),
     disabled-label-text-color: map.get($theme, disabled-label-text-color),