Skip to content

Commit 36a369b

Browse files
crisbetocrisbeto
committed
fix(multiple): consolidate strong focus indicators
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.
1 parent cb1450f commit 36a369b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+77
-162
lines changed

‎src/material/_index.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
// Structural
3838
@forward './core/core' show core;
3939
@forward './core/ripple/ripple' show ripple;
40-
@forward './core/focus-indicators/focus-indicators' show strong-focus-indicators;
41-
@forward './core/focus-indicators/private' as private-strong-focus-indicators-*;
40+
@forward './core/focus-indicators/private' show strong-focus-indicators,
41+
strong-focus-indicators-color, strong-focus-indicators-theme;
4242
@forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
4343

4444
// Theme bundles
@@ -60,8 +60,6 @@
6060
pseudo-checkbox-base, pseudo-checkbox-overrides;
6161
@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
6262
pseudo-checkbox-legacy-size;
63-
@forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
64-
strong-focus-indicators-color, strong-focus-indicators-theme;
6563
@forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
6664
autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
6765
autocomplete-overrides;

‎src/material/button/_button-base.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@
4848
}
4949

5050
// The focus indicator should match the bounds of the entire button.
51-
.mat-mdc-focus-indicator {
51+
.mat-focus-indicator {
5252
@include layout-common.fill();
5353
}
5454

55-
&:focus .mat-mdc-focus-indicator::before {
55+
&:focus .mat-focus-indicator::before {
5656
content: '';
5757
}
5858
}

‎src/material/button/button.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@
1515
The indicator can't be directly on the button, because MDC uses ::before for high contrast
1616
indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
1717
-->
18-
<span class="mat-mdc-focus-indicator"></span>
18+
<span class="mat-focus-indicator"></span>
1919

2020
<span class="mat-mdc-button-touch-target"></span>

‎src/material/button/button.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -315,17 +315,17 @@
315315
// the focus indicator is sufficiently contrastive and renders appropriately.
316316
.mat-mdc-unelevated-button,
317317
.mat-mdc-raised-button {
318-
.mat-mdc-focus-indicator::before {
318+
.mat-focus-indicator::before {
319319
$default-border-width: focus-indicators-private.$default-border-width;
320-
$border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
320+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
321321
$offset: calc(#{$border-width} + 2px);
322322
margin: calc(#{$offset} * -1);
323323
}
324324
}
325325

326-
.mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
326+
.mat-mdc-outlined-button .mat-focus-indicator::before {
327327
$default-border-width: focus-indicators-private.$default-border-width;
328-
$border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
328+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
329329
$offset: calc(#{$border-width} + 3px);
330330
margin: calc(#{$offset} * -1);
331331
}

‎src/material/button/button.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ describe('MatButton', () => {
374374
];
375375

376376
expect(
377-
buttonNativeElements.every(element => !!element.querySelector('.mat-mdc-focus-indicator')),
377+
buttonNativeElements.every(element => !!element.querySelector('.mat-focus-indicator')),
378378
).toBe(true);
379379
});
380380

‎src/material/button/fab.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,9 @@
8181
will-change: transform;
8282
}
8383

84-
.mat-mdc-focus-indicator::before {
84+
.mat-focus-indicator::before {
8585
$default-border-width: focus-indicators-private.$default-border-width;
86-
$border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
86+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
8787
$offset: calc(#{$border-width} + 2px);
8888
margin: calc(#{$offset} * -1);
8989
}

‎src/material/button/icon-button.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
The indicator can't be directly on the button, because MDC uses ::before for high contrast
77
indication and it can't be on the ripple, because it has a border radius and overflow: hidden.
88
-->
9-
<span class="mat-mdc-focus-indicator"></span>
9+
<span class="mat-focus-indicator"></span>
1010

1111
<span class="mat-mdc-button-touch-target"></span>

‎src/material/checkbox/checkbox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</svg>
3535
<div class="mdc-checkbox__mixedmark"></div>
3636
</div>
37-
<div class="mat-mdc-checkbox-ripple mat-mdc-focus-indicator" mat-ripple
37+
<div class="mat-mdc-checkbox-ripple mat-focus-indicator" mat-ripple
3838
[matRippleTrigger]="checkbox"
3939
[matRippleDisabled]="disableRipple || disabled"
4040
[matRippleCentered]="true"></div>

‎src/material/checkbox/checkbox.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,6 @@
114114

115115
// For checkboxes render the focus indicator when we know
116116
// the hidden input is focused (slightly different for each control).
117-
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before {
117+
.mdc-checkbox__native-control:focus ~ .mat-focus-indicator::before {
118118
content: '';
119119
}

‎src/material/checkbox/checkbox.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@ describe('MatCheckbox', () => {
678678
'.mat-mdc-checkbox-ripple',
679679
)!;
680680

681-
expect(checkboxRippleNativeElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
681+
expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
682682
});
683683
});
684684

‎src/material/chips/chip-icons.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export class MatChipTrailingIcon extends MatChipAction {
6464
selector: '[matChipRemove]',
6565
host: {
6666
'class':
67-
'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-mdc-focus-indicator ' +
67+
'mat-mdc-chip-remove mat-mdc-chip-trailing-icon mat-focus-indicator ' +
6868
'mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing',
6969
'role': 'button',
7070
'[attr.aria-hidden]': 'null',

‎src/material/chips/chip-option.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
2727
<ng-content></ng-content>
28-
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
28+
<span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
2929
</span>
3030
</button>
3131
</span>

‎src/material/chips/chip-option.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ describe('Option Chips', () => {
401401

402402
it('should contain a focus indicator inside the text label', () => {
403403
const label = chipNativeElement.querySelector('.mdc-evolution-chip__text-label');
404-
expect(label?.querySelector('.mat-mdc-focus-indicator')).toBeTruthy();
404+
expect(label?.querySelector('.mat-focus-indicator')).toBeTruthy();
405405
});
406406
});
407407
});

‎src/material/chips/chip-remove.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ describe('Chip Remove', () => {
9090

9191
it('should have a focus indicator', fakeAsync(() => {
9292
const buttonElement = chipNativeElement.querySelector('.mdc-evolution-chip__icon--trailing')!;
93-
expect(buttonElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
93+
expect(buttonElement.classList.contains('mat-focus-indicator')).toBe(true);
9494
}));
9595

9696
it('should prevent the default click action', fakeAsync(() => {

‎src/material/chips/chip-row.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<ng-content></ng-content>
2525
}
2626

27-
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator" aria-hidden="true"></span>
27+
<span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator" aria-hidden="true"></span>
2828
</span>
2929
</span>
3030

‎src/material/chips/chip.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
1111
<ng-content></ng-content>
12-
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
12+
<span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
1313
</span>
1414
</span>
1515
</span>

‎src/material/chips/chip.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -670,9 +670,9 @@ $_avatar-trailing-padding: 8px;
670670

671671
// For the chip element, default inset/offset values are necessary to ensure that
672672
// the focus indicator is sufficiently contrastive and renders appropriately.
673-
.mat-mdc-focus-indicator::before {
673+
.mat-focus-indicator::before {
674674
$default-border-width: focus-indicators-private.$default-border-width;
675-
$border-width: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
675+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
676676
$offset: calc(#{$border-width} + 2px);
677677
margin: calc(#{$offset} * -1);
678678
}
@@ -681,7 +681,7 @@ $_avatar-trailing-padding: 8px;
681681
.mat-mdc-chip-remove {
682682
&::before {
683683
$default-border-width: focus-indicators-private.$default-border-width;
684-
$offset: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
684+
$offset: var(--mat-focus-indicator-border-width, #{$default-border-width});
685685
margin: calc(#{$offset} * -1);
686686

687687
// MDC sets a padding a on the chip button which stretches out the focus indicator.
@@ -728,6 +728,6 @@ $_avatar-trailing-padding: 8px;
728728

729729
// The chip has multiple focus targets so we have to put the indicator on
730730
// a separate element, rather than on the focusable element itself.
731-
.mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before {
731+
.mat-mdc-chip-action:focus .mat-focus-indicator::before {
732732
content: '';
733733
}

‎src/material/core/_core.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
@include cdk.overlay();
2121
@include cdk.text-field-autosize();
2222
@include cdk.text-field-autofill();
23-
@include private.structural-styling('mat');
24-
@include private.structural-styling('mat-mdc');
23+
@include private.structural-styling();
2524

2625
// Wrapper element that provides the theme background when the
2726
// user's content isn't inside of a `mat-sidenav-container`.

‎src/material/core/focus-indicators/_focus-indicators-theme.scss

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/material/core/focus-indicators/_focus-indicators.scss

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/material/core/focus-indicators/_private.scss

Lines changed: 20 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,19 @@ $default-border-color: transparent;
1212
$default-border-radius: 4px;
1313

1414
// Mixin that renders the focus indicator structural styles.
15-
@mixin structural-styling($prefix) {
16-
.#{$prefix}-focus-indicator {
15+
@mixin structural-styling() {
16+
.mat-focus-indicator {
1717
position: relative;
1818

1919
&::before {
2020
@include layout-common.fill();
2121
box-sizing: border-box;
2222
pointer-events: none;
23-
display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.
24-
border: var(
25-
--#{$prefix}-focus-indicator-border-width,
26-
#{$default-border-width}
27-
)
28-
var(
29-
--#{$prefix}-focus-indicator-border-style,
30-
#{$default-border-style}
31-
)
32-
var(
33-
--#{$prefix}-focus-indicator-border-color,
34-
#{$default-border-color}
35-
);
36-
border-radius: var(
37-
--#{$prefix}-focus-indicator-border-radius,
38-
#{$default-border-radius}
39-
);
23+
display: var(--mat-focus-indicator-display, none); // Hide the indicator by default.
24+
border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
25+
border-style: var(--mat-focus-indicator-border-style, #{$default-border-style});
26+
border-color: var(--mat-focus-indicator-border-color, #{$default-border-color});
27+
border-radius: var(--mat-focus-indicator-border-radius, #{$default-border-radius});
4028
}
4129

4230
// By default, render the focus indicator when the focus indicator host element takes focus.
@@ -48,7 +36,7 @@ $default-border-radius: 4px;
4836

4937
// Enable the indicator in high contrast mode.
5038
@include cdk.high-contrast(active, off) {
51-
@include customize-focus-indicators((display: block), $prefix);
39+
@include _customize-focus-indicators((display: block));
5240
}
5341
}
5442

@@ -62,18 +50,18 @@ $default-border-radius: 4px;
6250
}
6351

6452
// Mixin that dedups CSS variables for the strong-focus-indicators mixin.
65-
@mixin customize-focus-indicators($config, $prefix) {
53+
@mixin _customize-focus-indicators($config) {
6654
$border-style: map.get($config, border-style);
6755
$border-width: map.get($config, border-width);
6856
$border-radius: map.get($config, border-radius);
6957
$border-color: map.get($config, border-color);
7058
$display: map.get($config, display);
7159
$map: (
72-
'#{$prefix}-focus-indicator-border-style': $border-style,
73-
'#{$prefix}-focus-indicator-border-width': $border-width,
74-
'#{$prefix}-focus-indicator-border-radius': $border-radius,
75-
'#{$prefix}-focus-indicator-border-color': $border-color,
76-
'#{$prefix}-focus-indicator-display': $display,
60+
'mat-focus-indicator-border-style': $border-style,
61+
'mat-focus-indicator-border-width': $border-width,
62+
'mat-focus-indicator-border-radius': $border-radius,
63+
'mat-focus-indicator-border-color': $border-color,
64+
'mat-focus-indicator-display': $display,
7765
);
7866

7967
@if (&) {
@@ -91,48 +79,29 @@ $default-border-radius: 4px;
9179
@mixin strong-focus-indicators($config: ()) {
9280
// Default focus indicator config.
9381
$default-config: (
94-
border-color: black,
95-
display: block,
82+
border-color: black,
83+
display: block,
9684
);
9785

9886
// Merge default config with user config.
9987
$config: map.merge($default-config, $config);
10088

101-
@include customize-focus-indicators($config, 'mat');
102-
}
103-
104-
@mixin mdc-strong-focus-indicators($config: ()) {
105-
// Default focus indicator config.
106-
$default-config: (
107-
border-color: black,
108-
display: block,
109-
);
110-
111-
// Merge default config with user config.
112-
$config: map.merge($default-config, $config);
113-
114-
@include customize-focus-indicators($config, 'mat-mdc');
89+
@include _customize-focus-indicators($config);
11590
}
11691

11792
@mixin strong-focus-indicators-color($theme-or-color) {
11893
@if meta.type-of($theme-or-color) == 'color' {
119-
@include customize-focus-indicators((
120-
border-color: $theme-or-color
121-
), 'mat');
94+
@include _customize-focus-indicators((border-color: $theme-or-color));
12295
}
12396
@else {
12497
$border-color: inspection.get-theme-color($theme-or-color, primary);
125-
@include customize-focus-indicators((
126-
border-color: $border-color
127-
), 'mat');
98+
@include _customize-focus-indicators((border-color: $border-color));
12899
}
129100
}
130101

131102
@mixin strong-focus-indicators-theme($theme-or-color) {
132103
@if meta.type-of($theme-or-color) == 'color' {
133-
@include customize-focus-indicators((
134-
border-color: $theme-or-color
135-
), 'mat');
104+
@include _customize-focus-indicators((border-color: $theme-or-color));
136105
}
137106
@else {
138107
@include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
@@ -142,33 +111,3 @@ $default-border-radius: 4px;
142111
}
143112
}
144113
}
145-
146-
@mixin mdc-strong-focus-indicators-color($theme-or-color) {
147-
@if meta.type-of($theme-or-color) == 'color' {
148-
@include customize-focus-indicators((
149-
border-color: $theme-or-color
150-
), 'mat-mdc');
151-
}
152-
@else {
153-
$border-color: inspection.get-theme-color($theme-or-color, primary);
154-
@include customize-focus-indicators((
155-
border-color: $border-color
156-
), 'mat-mdc');
157-
}
158-
}
159-
160-
@mixin mdc-strong-focus-indicators-theme($theme-or-color) {
161-
@if meta.type-of($theme-or-color) == 'color' {
162-
@include customize-focus-indicators((
163-
border-color: $theme-or-color
164-
), 'mat-mdc');
165-
}
166-
@else {
167-
@include theming.private-check-duplicate-theme-styles(
168-
$theme-or-color, 'mat-mdc-focus-indicators') {
169-
@if inspection.theme-has($theme-or-color, color) {
170-
@include mdc-strong-focus-indicators-color($theme-or-color);
171-
}
172-
}
173-
}
174-
}

0 commit comments

Comments
 (0)