Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/form-field): incorrect form field border radius with system-level themes #29966

Merged
merged 1 commit into from
Nov 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/material/core/tokens/_token-definition.scss
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,12 @@ $_system-fallbacks: null;
/// Maps the values in a map to new values using the given mapping function
/// @param {Map} $map The maps whose values will be mapped to new values.
/// @param {Function} $fn The value mapping function.
/// @param {Map} A new map with its values updated using the mapping function.
@function map-values($map, $fn) {
/// @param {ArgList} $args Additional arguments to pass to the mapping function.
/// @return {Map} A new map with its values updated using the mapping function.
@function map-values($map, $fn, $args...) {
$result: ();
@each $key, $value in $map {
$result: map.set($result, $key, meta.call($fn, $value));
$result: map.set($result, $key, meta.call($fn, $value, $args...));
}
@return $result;
}
Expand Down
20 changes: 9 additions & 11 deletions src/material/core/tokens/m3/mdc/_filled-text-field.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';
@use '../../token-definition';

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

@return token-definition.namespace-tokens($prefix, (
_fix-tokens($mdc-tokens),
token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
_fix-tokens($mdc-tokens, $systems),
token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems)
), $token-slots);
}


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

$container-shape: map.get($tokens, container-shape);

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

@return $tokens;
Expand Down
Loading