diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 90faa0b36e4d..acace3db6bb0 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -566,15 +566,6 @@ $fallbacks: m3-chip.get-tokens(); .mat-mdc-standard-chip { -webkit-tap-highlight-color: transparent; - // MDC sets `overflow: hidden` on these elements in order to truncate the text. This is - // unnecessary since our chips don't truncate their text and it makes it difficult to style - // the strong focus indicators so we need to override it. - .mdc-evolution-chip__cell--primary, - .mdc-evolution-chip__action--primary, - .mat-mdc-chip-action-label { - overflow: visible; - } - // MDC sizes and positions this element using `width`, `height` and `padding`. // This usually works, but it's common for apps to add `box-sizing: border-box` // to all elements on the page which can cause the graphic to be clipped. diff --git a/src/material/core/focus-indicators/_private.scss b/src/material/core/focus-indicators/_private.scss index 82732ebbc876..7cee4592e5ab 100644 --- a/src/material/core/focus-indicators/_private.scss +++ b/src/material/core/focus-indicators/_private.scss @@ -86,6 +86,10 @@ $default-border-radius: 4px; $config: map.merge($default-config, $config); @include _customize-focus-indicators($config); + + // Strong focus indicators currently need chip labels to have overflow visible. + // TODO(b/446709063) revisit the structure to find a way to remove this dependency. + @include _chip-label-overflow-visible(); } @mixin strong-focus-indicators-color($theme-or-color) { @@ -108,3 +112,15 @@ $default-border-radius: 4px; } } } + +@mixin _chip-label-overflow-visible { + .mat-mdc-standard-chip { + // MDC sets `overflow: hidden` on these elements in order to truncate the text. This conflicts + // with how we structure and style the strong focus indicators so we need to override it. + .mdc-evolution-chip__cell--primary, + .mdc-evolution-chip__action--primary, + .mat-mdc-chip-action-label { + overflow: visible; + } + } +}