diff --git a/src/material/_index.scss b/src/material/_index.scss index a9c8a9ea0d48..6691966a1a71 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -37,8 +37,8 @@ // Structural @forward './core/core' show core; @forward './core/ripple/ripple' show ripple; -@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators; -@forward './core/focus-indicators/private' as private-strong-focus-indicators-*; +@forward './core/focus-indicators/private' show strong-focus-indicators, + strong-focus-indicators-color, strong-focus-indicators-theme; @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition; // Theme bundles @@ -60,8 +60,6 @@ pseudo-checkbox-base, pseudo-checkbox-overrides; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show pseudo-checkbox-legacy-size; -@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show - strong-focus-indicators-color, strong-focus-indicators-theme; @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme, autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base, autocomplete-overrides; diff --git a/src/material/button/_button-base.scss b/src/material/button/_button-base.scss index 22d4fbaf8f3d..bafc6ee62811 100644 --- a/src/material/button/_button-base.scss +++ b/src/material/button/_button-base.scss @@ -48,11 +48,11 @@ } // The focus indicator should match the bounds of the entire button. - .mat-mdc-focus-indicator { + .mat-focus-indicator { @include layout-common.fill(); } - &:focus .mat-mdc-focus-indicator::before { + &:focus .mat-focus-indicator::before { content: ''; } } diff --git a/src/material/button/button.html b/src/material/button/button.html index 7bfe99cc2399..0ddd2794ef91 100644 --- a/src/material/button/button.html +++ b/src/material/button/button.html @@ -15,6 +15,6 @@ The indicator can't be directly on the button, because MDC uses ::before for high contrast indication and it can't be on the ripple, because it has a border radius and overflow: hidden. --> - + diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 86afcbb18f70..a44a6f6a684c 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -315,17 +315,17 @@ // the focus indicator is sufficiently contrastive and renders appropriately. .mat-mdc-unelevated-button, .mat-mdc-raised-button { - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); + $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); } } -.mat-mdc-outlined-button .mat-mdc-focus-indicator::before { +.mat-mdc-outlined-button .mat-focus-indicator::before { $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); + $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); $offset: calc(#{$border-width} + 3px); margin: calc(#{$offset} * -1); } diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts index ebd3164e323f..4577eb16526e 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -285,7 +285,7 @@ describe('MatButton', () => { ]; expect( - buttonNativeElements.every(element => !!element.querySelector('.mat-mdc-focus-indicator')), + buttonNativeElements.every(element => !!element.querySelector('.mat-focus-indicator')), ).toBe(true); }); diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 5622649afe5e..44efdd4e5c9a 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -81,9 +81,9 @@ will-change: transform; } - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); + $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); } diff --git a/src/material/button/icon-button.html b/src/material/button/icon-button.html index 4d885eaa04e5..c40c3f3ab137 100644 --- a/src/material/button/icon-button.html +++ b/src/material/button/icon-button.html @@ -6,6 +6,6 @@ The indicator can't be directly on the button, because MDC uses ::before for high contrast indication and it can't be on the ripple, because it has a border radius and overflow: hidden. --> - + diff --git a/src/material/checkbox/checkbox.html b/src/material/checkbox/checkbox.html index 045ee998e872..9cac64e875b7 100644 --- a/src/material/checkbox/checkbox.html +++ b/src/material/checkbox/checkbox.html @@ -34,7 +34,7 @@
-
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss index 720f72f3d877..3f2b0004dc11 100644 --- a/src/material/checkbox/checkbox.scss +++ b/src/material/checkbox/checkbox.scss @@ -114,6 +114,6 @@ // For checkboxes render the focus indicator when we know // the hidden input is focused (slightly different for each control). -.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before { +.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before { content: ''; } diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index 7b013197d690..8e0db10bb996 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -674,7 +674,7 @@ describe('MatCheckbox', () => { '.mat-mdc-checkbox-ripple', )!; - expect(checkboxRippleNativeElement.classList.contains('mat-mdc-focus-indicator')).toBe(true); + expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); }); diff --git a/src/material/chips/chip-icons.ts b/src/material/chips/chip-icons.ts index c679e5a5c941..115a41bd09ba 100644 --- a/src/material/chips/chip-icons.ts +++ b/src/material/chips/chip-icons.ts @@ -64,7 +64,7 @@ export class MatChipTrailingIcon extends MatChipAction { selector: '[matChipRemove]', host: { 'class': - 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' + + 'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-focus-indicator ' + 'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing', 'role': 'button', '[attr.aria-hidden]': 'null', diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html index 649509ec52b6..5df5e6a6e110 100644 --- a/src/material/chips/chip-option.html +++ b/src/material/chips/chip-option.html @@ -25,7 +25,7 @@ } - + diff --git a/src/material/chips/chip-option.spec.ts b/src/material/chips/chip-option.spec.ts index 53ae5798ace3..5c1784d2bd11 100644 --- a/src/material/chips/chip-option.spec.ts +++ b/src/material/chips/chip-option.spec.ts @@ -401,7 +401,7 @@ describe('Option Chips', () => { it('should contain a focus indicator inside the text label', () => { const label = chipNativeElement.querySelector('.mdc-evolution-chip__text-label'); - expect(label?.querySelector('.mat-mdc-focus-indicator')).toBeTruthy(); + expect(label?.querySelector('.mat-focus-indicator')).toBeTruthy(); }); }); }); diff --git a/src/material/chips/chip-remove.spec.ts b/src/material/chips/chip-remove.spec.ts index 91450533d55a..4c05cf46d9ec 100644 --- a/src/material/chips/chip-remove.spec.ts +++ b/src/material/chips/chip-remove.spec.ts @@ -90,7 +90,7 @@ describe('Chip Remove', () => { it('should have a focus indicator', fakeAsync(() => { const buttonElement = chipNativeElement.querySelector('.mdc-evolution-chip__icon--trailing')!; - expect(buttonElement.classList.contains('mat-mdc-focus-indicator')).toBe(true); + expect(buttonElement.classList.contains('mat-focus-indicator')).toBe(true); })); it('should prevent the default click action', fakeAsync(() => { diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html index 2d92a715e03d..f2f5b0af5190 100644 --- a/src/material/chips/chip-row.html +++ b/src/material/chips/chip-row.html @@ -24,7 +24,7 @@ } - + diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html index cc541c48505a..3c263f8fce60 100644 --- a/src/material/chips/chip.html +++ b/src/material/chips/chip.html @@ -9,7 +9,7 @@ } - + diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index b117ea70a870..9568b85be151 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -670,9 +670,9 @@ $_avatar-trailing-padding: 8px; // For the chip element, default inset/offset values are necessary to ensure that // the focus indicator is sufficiently contrastive and renders appropriately. - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); + $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); $offset: calc(#{$border-width} + 2px); margin: calc(#{$offset} * -1); } @@ -681,7 +681,7 @@ $_avatar-trailing-padding: 8px; .mat-mdc-chip-remove { &::before { $default-border-width: focus-indicators-private.$default-border-width; - $offset: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); + $offset: var(--mat-focus-indicator-border-width, #{$default-border-width}); margin: calc(#{$offset} * -1); // MDC sets a padding a on the chip button which stretches out the focus indicator. @@ -728,6 +728,6 @@ $_avatar-trailing-padding: 8px; // The chip has multiple focus targets so we have to put the indicator on // a separate element, rather than on the focusable element itself. -.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before { +.mat-mdc-chip-action:focus .mat-focus-indicator::before { content: ''; } diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 6ddcedfd18fb..f0080ea547a8 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -15,8 +15,7 @@ } @include cdk.a11y-visually-hidden(); - @include private.structural-styling('mat'); - @include private.structural-styling('mat-mdc'); + @include private.structural-styling(); // Wrapper element that provides the theme background when the // user's content isn't inside of a `mat-sidenav-container`. diff --git a/src/material/core/focus-indicators/_focus-indicators-theme.scss b/src/material/core/focus-indicators/_focus-indicators-theme.scss deleted file mode 100644 index 2a4834a31a18..000000000000 --- a/src/material/core/focus-indicators/_focus-indicators-theme.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use './private'; - -@mixin color($theme) { - @include private.strong-focus-indicators-color($theme); - @include private.mdc-strong-focus-indicators-color($theme); -} - -@mixin theme($theme) { - @include private.strong-focus-indicators-theme($theme); - @include private.mdc-strong-focus-indicators-theme($theme); -} diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss deleted file mode 100644 index 785745a28052..000000000000 --- a/src/material/core/focus-indicators/_focus-indicators.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use './private'; - -@mixin strong-focus-indicators($config: ()) { - @include private.strong-focus-indicators($config); - @include private.mdc-strong-focus-indicators($config); -} diff --git a/src/material/core/focus-indicators/_private.scss b/src/material/core/focus-indicators/_private.scss index c982c58dcc35..b27376a9ee09 100644 --- a/src/material/core/focus-indicators/_private.scss +++ b/src/material/core/focus-indicators/_private.scss @@ -12,31 +12,19 @@ $default-border-color: transparent; $default-border-radius: 4px; // Mixin that renders the focus indicator structural styles. -@mixin structural-styling($prefix) { - .#{$prefix}-focus-indicator { +@mixin structural-styling() { + .mat-focus-indicator { position: relative; &::before { @include layout-common.fill(); box-sizing: border-box; pointer-events: none; - display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default. - border: var( - --#{$prefix}-focus-indicator-border-width, - #{$default-border-width} - ) - var( - --#{$prefix}-focus-indicator-border-style, - #{$default-border-style} - ) - var( - --#{$prefix}-focus-indicator-border-color, - #{$default-border-color} - ); - border-radius: var( - --#{$prefix}-focus-indicator-border-radius, - #{$default-border-radius} - ); + display: var(--mat-focus-indicator-display, none); // Hide the indicator by default. + border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); + border-style: var(--mat-focus-indicator-border-style, #{$default-border-style}); + border-color: var(--mat-focus-indicator-border-color, #{$default-border-color}); + border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius}); } // By default, render the focus indicator when the focus indicator host element takes focus. @@ -48,7 +36,7 @@ $default-border-radius: 4px; // Enable the indicator in high contrast mode. @include cdk.high-contrast(active, off) { - @include customize-focus-indicators((display: block), $prefix); + @include _customize-focus-indicators((display: block)); } } @@ -62,18 +50,18 @@ $default-border-radius: 4px; } // Mixin that dedups CSS variables for the strong-focus-indicators mixin. -@mixin customize-focus-indicators($config, $prefix) { +@mixin _customize-focus-indicators($config) { $border-style: map.get($config, border-style); $border-width: map.get($config, border-width); $border-radius: map.get($config, border-radius); $border-color: map.get($config, border-color); $display: map.get($config, display); $map: ( - '#{$prefix}-focus-indicator-border-style': $border-style, - '#{$prefix}-focus-indicator-border-width': $border-width, - '#{$prefix}-focus-indicator-border-radius': $border-radius, - '#{$prefix}-focus-indicator-border-color': $border-color, - '#{$prefix}-focus-indicator-display': $display, + 'mat-focus-indicator-border-style': $border-style, + 'mat-focus-indicator-border-width': $border-width, + 'mat-focus-indicator-border-radius': $border-radius, + 'mat-focus-indicator-border-color': $border-color, + 'mat-focus-indicator-display': $display, ); @if (&) { @@ -91,48 +79,29 @@ $default-border-radius: 4px; @mixin strong-focus-indicators($config: ()) { // Default focus indicator config. $default-config: ( - border-color: black, - display: block, + border-color: black, + display: block, ); // Merge default config with user config. $config: map.merge($default-config, $config); - @include customize-focus-indicators($config, 'mat'); -} - -@mixin mdc-strong-focus-indicators($config: ()) { - // Default focus indicator config. - $default-config: ( - border-color: black, - display: block, - ); - - // Merge default config with user config. - $config: map.merge($default-config, $config); - - @include customize-focus-indicators($config, 'mat-mdc'); + @include _customize-focus-indicators($config); } @mixin strong-focus-indicators-color($theme-or-color) { @if meta.type-of($theme-or-color) == 'color' { - @include customize-focus-indicators(( - border-color: $theme-or-color - ), 'mat'); + @include _customize-focus-indicators((border-color: $theme-or-color)); } @else { $border-color: inspection.get-theme-color($theme-or-color, primary); - @include customize-focus-indicators(( - border-color: $border-color - ), 'mat'); + @include _customize-focus-indicators((border-color: $border-color)); } } @mixin strong-focus-indicators-theme($theme-or-color) { @if meta.type-of($theme-or-color) == 'color' { - @include customize-focus-indicators(( - border-color: $theme-or-color - ), 'mat'); + @include _customize-focus-indicators((border-color: $theme-or-color)); } @else { @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') { @@ -142,33 +111,3 @@ $default-border-radius: 4px; } } } - -@mixin mdc-strong-focus-indicators-color($theme-or-color) { - @if meta.type-of($theme-or-color) == 'color' { - @include customize-focus-indicators(( - border-color: $theme-or-color - ), 'mat-mdc'); - } - @else { - $border-color: inspection.get-theme-color($theme-or-color, primary); - @include customize-focus-indicators(( - border-color: $border-color - ), 'mat-mdc'); - } -} - -@mixin mdc-strong-focus-indicators-theme($theme-or-color) { - @if meta.type-of($theme-or-color) == 'color' { - @include customize-focus-indicators(( - border-color: $theme-or-color - ), 'mat-mdc'); - } - @else { - @include theming.private-check-duplicate-theme-styles( - $theme-or-color, 'mat-mdc-focus-indicators') { - @if inspection.theme-has($theme-or-color, color) { - @include mdc-strong-focus-indicators-color($theme-or-color); - } - } - } -} diff --git a/src/material/core/option/option.html b/src/material/core/option/option.html index 23f5d9f54944..6e4c2cf59481 100644 --- a/src/material/core/option/option.html +++ b/src/material/core/option/option.html @@ -29,6 +29,6 @@ ({{ group.label }}) } - diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index a7c66df421d3..3d4ac4d719ba 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -78,7 +78,7 @@ $_side-padding: 16px; // Give the visual content of this list item a lower opacity. This creates the "gray" appearance // for disabled state. Set the opacity on the pseudo checkbox and projected content. Set // opacity only on the visual content rather than the entire list-item so we don't affect the - // focus ring from `.mat-mdc-focus-indicator`. + // focus ring from `.mat-focus-indicator`. // // MatOption uses a child `
` element for its focus state to align with how ListItem does // its focus state. @@ -190,6 +190,6 @@ $_side-padding: 16px; } // For options, render the focus indicator when the class .mat-mdc-option-active is present. -.mat-mdc-option-active .mat-mdc-focus-indicator::before { +.mat-mdc-option-active .mat-focus-indicator::before { content: ''; } diff --git a/src/material/core/option/option.spec.ts b/src/material/core/option/option.spec.ts index c026664b42ac..cd0fd98aaf65 100644 --- a/src/material/core/option/option.spec.ts +++ b/src/material/core/option/option.spec.ts @@ -200,7 +200,7 @@ describe('MatOption component', () => { const fixture = TestBed.createComponent(BasicOption); const optionNativeElement = fixture.debugElement.query(By.directive(MatOption))!.nativeElement; - expect(optionNativeElement.parentElement.querySelector('.mat-mdc-focus-indicator')) + expect(optionNativeElement.parentElement.querySelector('.mat-focus-indicator')) .withContext( 'expected to find a focus indicator on ' + "either the mat-option element or one of it's children", diff --git a/src/material/list/list-item.html b/src/material/list/list-item.html index e52a1e9491c4..8a13cf30fec6 100644 --- a/src/material/list/list-item.html +++ b/src/material/list/list-item.html @@ -17,4 +17,4 @@ Strong focus indicator element. MDC uses the `::before` pseudo element for the default focus/hover/selected state, so we need a separate element. --> -
+
diff --git a/src/material/list/list-option.html b/src/material/list/list-option.html index 25c97b133659..a79070f74907 100644 --- a/src/material/list/list-option.html +++ b/src/material/list/list-option.html @@ -86,4 +86,4 @@ Strong focus indicator element. MDC uses the `::before` pseudo element for the default focus/hover/selected state, so we need a separate element. --> -
+
diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 18a76a631341..b379c695c87a 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -122,14 +122,14 @@ a.mdc-list-item--activated { // focus/selected/hover state. Hence, we need to have a separate list-item spanning // element that can be used for strong focus indicators. .mat-mdc-list-item { - > .mat-mdc-focus-indicator { + > .mat-focus-indicator { @include layout-common.fill(); pointer-events: none; } // For list items, render the focus indicator when the parent // listem item is focused. - &:focus > .mat-mdc-focus-indicator::before { + &:focus > .mat-focus-indicator::before { content: ''; } } @@ -177,7 +177,7 @@ mat-action-list button { .mat-mdc-nav-list .mat-mdc-list-item { @include token-utils.create-token-slot(border-radius, active-indicator-shape); @include token-utils.create-token-slot( - --mat-mdc-focus-indicator-border-radius, + --mat-focus-indicator-border-radius, active-indicator-shape ); diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts index ae8c877f95ca..6ba78e3d5508 100644 --- a/src/material/list/list.spec.ts +++ b/src/material/list/list.spec.ts @@ -72,7 +72,7 @@ describe('MatList', () => { .queryAll(By.css('mat-list-item')) .map(debugEl => debugEl.nativeElement as HTMLElement); - expect(listItems.every(i => i.querySelector('.mat-mdc-focus-indicator') !== null)) + expect(listItems.every(i => i.querySelector('.mat-focus-indicator') !== null)) .withContext('Expected all list items to have a strong focus indicator element.') .toBe(true); }); diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index e042c7196ea1..ec13b1283864 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -664,7 +664,7 @@ describe('MatSelectionList without forms', () => { expect( optionNativeElements.every( - element => element.querySelector('.mat-mdc-focus-indicator') !== null, + element => element.querySelector('.mat-focus-indicator') !== null, ), ).toBe(true); }); diff --git a/src/material/menu/menu-item.ts b/src/material/menu/menu-item.ts index fedc4c363302..f274212e2676 100644 --- a/src/material/menu/menu-item.ts +++ b/src/material/menu/menu-item.ts @@ -33,7 +33,7 @@ import {MatRipple} from '@angular/material/core'; exportAs: 'matMenuItem', host: { '[attr.role]': 'role', - 'class': 'mat-mdc-menu-item mat-mdc-focus-indicator', + 'class': 'mat-mdc-menu-item mat-focus-indicator', '[class.mat-mdc-menu-item-highlighted]': '_highlighted', '[class.mat-mdc-menu-item-submenu-trigger]': '_triggersSubmenu', '[attr.tabindex]': '_getTabIndex()', diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index 8abb79b5351d..8de903786e8d 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -2707,9 +2707,7 @@ describe('MatMenu', () => { ); expect( - menuItemNativeElements.every(element => - element.classList.contains('mat-mdc-focus-indicator'), - ), + menuItemNativeElements.every(element => element.classList.contains('mat-focus-indicator')), ).toBe(true); })); }); diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html index b369b5bf663e..796d7e8708c0 100644 --- a/src/material/radio/radio.html +++ b/src/material/radio/radio.html @@ -18,7 +18,7 @@
-
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss index adb69f8509c7..0caf7b3f9b0d 100644 --- a/src/material/radio/radio.scss +++ b/src/material/radio/radio.scss @@ -68,7 +68,7 @@ // For radios render the focus indicator when we know // the hidden input is focused (slightly different for each control). - &.cdk-focused .mat-mdc-focus-indicator::before { + &.cdk-focused .mat-focus-indicator::before { content: ''; } } diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index 55fd424e2957..9b288de009ad 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -471,7 +471,7 @@ describe('MatRadio', () => { expect( radioRippleNativeElements.every(element => - element.classList.contains('mat-mdc-focus-indicator'), + element.classList.contains('mat-focus-indicator'), ), ).toBe(true); }); diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html index 94cdb06e40f8..f3330fe3278d 100644 --- a/src/material/slide-toggle/slide-toggle.html +++ b/src/material/slide-toggle/slide-toggle.html @@ -27,7 +27,7 @@ - diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index a0a60085b034..a58e44e98095 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -534,7 +534,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc // Needs a little more specificity so the :hover styles don't override it. // For slide-toggles render the focus indicator when we know // the hidden input is focused (slightly different for each control). - &.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before { + &.mat-mdc-slide-toggle-focused .mat-focus-indicator::before { content: ''; } @@ -555,7 +555,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc // Slide-toggle components have to set `border-radius: 50%` in order to support density scaling // which will clip a square focus indicator so we have to turn it into a circle. - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { border-radius: 50%; } diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index ca44d8d5e22a..a9238eb50cc6 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -365,7 +365,7 @@ describe('MatSlideToggle without forms', () => { it('should have a focus indicator', fakeAsync(() => { const rippleElement = slideToggleElement.querySelector('.mat-mdc-slide-toggle-ripple')!; - expect(rippleElement.classList).toContain('mat-mdc-focus-indicator'); + expect(rippleElement.classList).toContain('mat-focus-indicator'); })); it('should be able to hide the icon', fakeAsync(() => { diff --git a/src/material/slider/slider-thumb.html b/src/material/slider/slider-thumb.html index 941618ad766b..155fd0ad4a85 100644 --- a/src/material/slider/slider-thumb.html +++ b/src/material/slider/slider-thumb.html @@ -6,4 +6,4 @@
}
-
+
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index fa2c2ef45d7a..cd3c5a3b636e 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -421,12 +421,12 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); // Slider components have to set `border-radius: 50%` in order to support density scaling // which will clip a square focus indicator so we have to turn it into a circle. - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { border-radius: 50%; } } // In the MDC slider the focus indicator is inside the thumb. -.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before { +.mdc-slider__thumb--focused .mat-focus-indicator::before { content: ''; } diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index bce22fab4a70..b6cc122ffce6 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -480,7 +480,7 @@ $mat-tab-animation-duration: 500ms !default; > #{$header-selector}, > .mat-mdc-tab-header-pagination { .mat-mdc-tab-header-pagination-chevron, - .mat-mdc-focus-indicator::before { + .mat-focus-indicator::before { @include token-utils.create-token-slot(border-color, foreground-color); } diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html index 1208762159dd..731dd7cf6488 100644 --- a/src/material/tabs/tab-group.html +++ b/src/material/tabs/tab-group.html @@ -8,7 +8,7 @@ (selectFocusedIndex)="selectedIndex = $event"> @for (tab of _tabs; track tab; let i = $index) { -