fix(multiple): consolidate strong focus indicators (#29623)

We currently ship two strong focus indicator variants. This is a leftover from when we had two sets of components. These changes combine them into one and under the `mat-` prefix.

Author: crisbeto

src/material/_index.scss

@@ -38,8 +38,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
@@ -61,8 +61,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;

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: '';
   }
 }

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.
 -->
-<span class="mat-mdc-focus-indicator"></span>
+<span class="mat-focus-indicator"></span>
 
 <span class="mat-mdc-button-touch-target"></span>

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);
 }

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);
   });
 

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);
   }

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.
 -->
-<span class="mat-mdc-focus-indicator"></span>
+<span class="mat-focus-indicator"></span>
 
 <span class="mat-mdc-button-touch-target"></span>

src/material/checkbox/checkbox.html

@@ -34,7 +34,7 @@
       </svg>
       <div class="mdc-checkbox__mixedmark"></div>
     </div>
-    <div class="mat-mdc-checkbox-ripple mat-mdc-focus-indicator" mat-ripple
+    <div class="mat-mdc-checkbox-ripple mat-focus-indicator" mat-ripple
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
       [matRippleCentered]="true"></div>

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: '';
 }

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);
     });
   });