Skip to content

Commit a2cd049

Browse files
committed
fix(material/form-field): incorrect form field border radius with system-level themes (#29966)
Fixes that the form field had the wrong border radius when using a system-level theme in M3. (cherry picked from commit 23789d2)
1 parent d8dedc9 commit a2cd049

File tree

2 files changed

+13
-14
lines changed

2 files changed

+13
-14
lines changed

src/material/core/tokens/_token-definition.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,12 @@ $_system-fallbacks: null;
124124
/// Maps the values in a map to new values using the given mapping function
125125
/// @param {Map} $map The maps whose values will be mapped to new values.
126126
/// @param {Function} $fn The value mapping function.
127-
/// @param {Map} A new map with its values updated using the mapping function.
128-
@function map-values($map, $fn) {
127+
/// @param {ArgList} $args Additional arguments to pass to the mapping function.
128+
/// @return {Map} A new map with its values updated using the mapping function.
129+
@function map-values($map, $fn, $args...) {
129130
$result: ();
130131
@each $key, $value in $map {
131-
$result: map.set($result, $key, meta.call($fn, $value));
132+
$result: map.set($result, $key, meta.call($fn, $value, $args...));
132133
}
133134
@return $result;
134135
}

src/material/core/tokens/m3/mdc/_filled-text-field.scss

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:map';
22
@use 'sass:meta';
3-
@use 'sass:list';
43
@use '../../token-definition';
54

65
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,17 +33,18 @@ $prefix: (mdc, filled-text-field);
3433
);
3534

3635
@return token-definition.namespace-tokens($prefix, (
37-
_fix-tokens($mdc-tokens),
38-
token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
36+
_fix-tokens($mdc-tokens, $systems),
37+
token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems)
3938
), $token-slots);
4039
}
4140

4241

4342
/// Fixes inconsistent values in the filled text field tokens so that they can produce valid
4443
/// styles.
4544
/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
45+
/// @param {Map} $systems The MDC system tokens
4646
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
47-
@function _fix-tokens($initial-tokens) {
47+
@function _fix-tokens($initial-tokens, $systems) {
4848
// Need to get the hardcoded values, because they include opacities that are used for the disabled
4949
// state.
5050
$hardcoded-tokens: token-definition.get-mdc-tokens('filled-text-field', (), false);
@@ -80,13 +80,11 @@ $prefix: (mdc, filled-text-field);
8080
)
8181
));
8282

83-
$container-shape: map.get($tokens, container-shape);
84-
85-
// The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
86-
// of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
87-
// token slot in M2.
88-
@if meta.type-of($container-shape) == 'list' {
89-
$tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
83+
// The system tokens have this set as `corner-extra-small-top` which assumes that the value will
84+
// be set as a `border-radius`, however we set it as `border-top-left-radius` and
85+
// `border-top-right-radius`. Changing it at this point will be breaking so instead we remap it.
86+
@if (map.get($tokens, container-shape)) {
87+
$tokens: map.set($tokens, container-shape, map.get($systems, md-sys-shape, corner-extra-small));
9088
}
9189

9290
@return $tokens;

0 commit comments

Comments
 (0)