Skip to content

Commit 5242169

Browse files
wagnermacielwagnermaciel
authored
refactor(multiple): remove focus indicators structural styles from core (#29804)
* refactor(multiple): remove focus indicators structural styles from core * fixup! refactor(multiple): remove focus indicators structural styles from core * fixup! refactor(multiple): remove focus indicators structural styles from core
1 parent 49308cd commit 5242169

File tree

20 files changed

+71
-11
lines changed

20 files changed

+71
-11
lines changed

‎src/material/button-toggle/button-toggle.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ import {
3434
} from '@angular/core';
3535
import {Direction, Directionality} from '@angular/cdk/bidi';
3636
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
37-
import {MatRipple, MatPseudoCheckbox} from '@angular/material/core';
37+
import {MatRipple, MatPseudoCheckbox, _StructuralStylesLoader} from '@angular/material/core';
38+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
3839

3940
/**
4041
* @deprecated No longer used.
@@ -668,6 +669,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
668669
constructor(...args: unknown[]);
669670

670671
constructor() {
672+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
671673
const toggleGroup = inject<MatButtonToggleGroup>(MAT_BUTTON_TOGGLE_GROUP, {optional: true})!;
672674
const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
673675
const defaultOptions = inject<MatButtonToggleDefaultOptions>(

‎src/material/button/button-base.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
OnDestroy,
2323
OnInit,
2424
} from '@angular/core';
25-
import {MatRippleLoader, ThemePalette} from '@angular/material/core';
25+
import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '@angular/material/core';
26+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
2627

2728
/** Object that can be used to configure the default options for the button component. */
2829
export interface MatButtonConfig {
@@ -156,6 +157,7 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
156157
constructor(...args: unknown[]);
157158

158159
constructor() {
160+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
159161
const config = inject(MAT_BUTTON_CONFIG, {optional: true});
160162
const element = this._elementRef.nativeElement;
161163
const classList = (element as HTMLElement).classList;

‎src/material/checkbox/checkbox.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,13 @@ import {
3636
ValidationErrors,
3737
Validator,
3838
} from '@angular/forms';
39-
import {MatRipple, _MatInternalFormField} from '@angular/material/core';
39+
import {MatRipple, _MatInternalFormField, _StructuralStylesLoader} from '@angular/material/core';
4040
import {
4141
MAT_CHECKBOX_DEFAULT_OPTIONS,
4242
MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
4343
MatCheckboxDefaultOptions,
4444
} from './checkbox-config';
45+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4546

4647
/**
4748
* Represents the different states that require custom transitions between them.
@@ -250,6 +251,7 @@ export class MatCheckbox
250251
constructor(...args: unknown[]);
251252

252253
constructor() {
254+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
253255
const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
254256
this._options = this._options || defaults;
255257
this.color = this._options.color || defaults.color;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
} from '@angular/core';
1717
import {ENTER, SPACE} from '@angular/cdk/keycodes';
1818
import {MAT_CHIP} from './tokens';
19+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
20+
import {_StructuralStylesLoader} from '@angular/material/core';
1921

2022
/**
2123
* Section within a chip.
@@ -94,6 +96,7 @@ export class MatChipAction {
9496
constructor(...args: unknown[]);
9597

9698
constructor() {
99+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
97100
if (this._elementRef.nativeElement.nodeName === 'BUTTON') {
98101
this._elementRef.nativeElement.setAttribute('type', 'button');
99102
}

‎src/material/chips/chip.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
inject,
3636
} from '@angular/core';
3737
import {
38+
_StructuralStylesLoader,
3839
MAT_RIPPLE_GLOBAL_OPTIONS,
3940
MatRippleLoader,
4041
RippleGlobalOptions,
@@ -43,6 +44,7 @@ import {Subject, Subscription, merge} from 'rxjs';
4344
import {MatChipAction} from './chip-action';
4445
import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
4546
import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
47+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4648

4749
let uid = 0;
4850

@@ -244,6 +246,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
244246
constructor(...args: unknown[]);
245247

246248
constructor() {
249+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
247250
const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
248251
this._animationsDisabled = animationMode === 'NoopAnimations';
249252
this._monitorFocus();

‎src/material/core/_core.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
@use './tokens/m2/mat/app' as tokens-mat-app;
33
@use './tokens/token-utils';
44
@use './style/elevation';
5-
@use './focus-indicators/private';
65

76
// Mixin that renders all of the core styles that are not theme-dependent.
87
@mixin core() {
98
@include cdk.a11y-visually-hidden();
10-
@include private.structural-styling();
119
}
1210

1311
// Emits the mat-app-background CSS class. This predefined class sets the

‎src/material/core/option/option.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import {MAT_OPTGROUP, MatOptgroup} from './optgroup';
3131
import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-parent';
3232
import {MatRipple} from '../ripple/ripple';
3333
import {MatPseudoCheckbox} from '../selection/pseudo-checkbox/pseudo-checkbox';
34+
import {_StructuralStylesLoader} from '../focus-indicators/structural-styles';
35+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
3436

3537
/**
3638
* Option IDs need to be unique across components, so this counter exists outside of
@@ -144,6 +146,7 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
144146

145147
constructor(...args: unknown[]);
146148
constructor() {
149+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
147150
this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
148151
}
149152

‎src/material/core/public-api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export * from './animation/animation';
1111
export * from './common-behaviors/index';
1212
export * from './datetime/index';
1313
export * from './error/error-options';
14+
export * from './focus-indicators/structural-styles';
1415
export * from './line/line';
1516
export * from './option/index';
1617
export * from './private/index';

‎src/material/datepicker/calendar-body.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import {
2525
Injector,
2626
} from '@angular/core';
2727
import {NgClass} from '@angular/common';
28+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
29+
import {_StructuralStylesLoader} from '@angular/material/core';
2830

2931
/** Extra CSS classes that can be associated with a calendar cell. */
3032
export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -208,6 +210,7 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
208210
constructor(...args: unknown[]);
209211

210212
constructor() {
213+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
211214
this._ngZone.runOutsideAngular(() => {
212215
const element = this._elementRef.nativeElement;
213216

‎src/material/expansion/expansion-panel-header.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import {
3232
MatExpansionPanelDefaultOptions,
3333
MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
3434
} from './expansion-panel';
35+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
36+
import {_StructuralStylesLoader} from '@angular/material/core';
3537

3638
/**
3739
* Header element of a `<mat-expansion-panel>`.
@@ -73,6 +75,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
7375
constructor(...args: unknown[]);
7476

7577
constructor() {
78+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
7679
const panel = this.panel;
7780
const defaultOptions = inject<MatExpansionPanelDefaultOptions>(
7881
MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,

‎src/material/list/list-base.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
Injector,
2323
} from '@angular/core';
2424
import {
25+
_StructuralStylesLoader,
2526
MAT_RIPPLE_GLOBAL_OPTIONS,
2627
RippleConfig,
2728
RippleGlobalOptions,
@@ -180,6 +181,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
180181
constructor(...args: unknown[]);
181182

182183
constructor() {
184+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
183185
const globalRippleOptions = inject<RippleGlobalOptions>(MAT_RIPPLE_GLOBAL_OPTIONS, {
184186
optional: true,
185187
});

‎src/material/menu/menu-item.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
2222
import {Subject} from 'rxjs';
2323
import {DOCUMENT} from '@angular/common';
2424
import {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';
25-
import {MatRipple} from '@angular/material/core';
25+
import {_StructuralStylesLoader, MatRipple} from '@angular/material/core';
26+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
2627

2728
/**
2829
* Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
@@ -78,6 +79,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
7879
constructor(...args: unknown[]);
7980

8081
constructor() {
82+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
8183
this._parentMenu?.addItem?.(this);
8284
}
8385

‎src/material/radio/radio.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,14 @@ import {
3838
HostAttributeToken,
3939
} from '@angular/core';
4040
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
41-
import {MatRipple, ThemePalette, _MatInternalFormField} from '@angular/material/core';
41+
import {
42+
MatRipple,
43+
ThemePalette,
44+
_MatInternalFormField,
45+
_StructuralStylesLoader,
46+
} from '@angular/material/core';
4247
import {Subscription} from 'rxjs';
48+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4349

4450
// Increasing integer for generating unique ids for radio components.
4551
let nextUniqueId = 0;
@@ -600,6 +606,7 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
600606
constructor(...args: unknown[]);
601607

602608
constructor() {
609+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
603610
const radioGroup = inject<MatRadioGroup>(MAT_RADIO_GROUP, {optional: true})!;
604611
const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
605612
const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});

‎src/material/slide-toggle/slide-toggle.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ import {
4040
MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
4141
MatSlideToggleDefaultOptions,
4242
} from './slide-toggle-config';
43-
import {_MatInternalFormField, MatRipple} from '@angular/material/core';
43+
import {_MatInternalFormField, _StructuralStylesLoader, MatRipple} from '@angular/material/core';
44+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4445

4546
/**
4647
* @deprecated Will stop being exported.
@@ -212,6 +213,7 @@ export class MatSlideToggle
212213
constructor(...args: unknown[]);
213214

214215
constructor() {
216+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
215217
const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
216218
const defaults = this.defaults;
217219
const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});

‎src/material/slider/slider.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@ import {
2828
ViewEncapsulation,
2929
ANIMATION_MODULE_TYPE,
3030
} from '@angular/core';
31-
import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, ThemePalette} from '@angular/material/core';
31+
import {
32+
_StructuralStylesLoader,
33+
MAT_RIPPLE_GLOBAL_OPTIONS,
34+
RippleGlobalOptions,
35+
ThemePalette,
36+
} from '@angular/material/core';
3237
import {Subscription} from 'rxjs';
3338
import {
3439
_MatThumb,
@@ -43,6 +48,7 @@ import {
4348
MAT_SLIDER_VISUAL_THUMB,
4449
} from './slider-interface';
4550
import {MatSliderVisualThumb} from './slider-thumb';
51+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4652

4753
// TODO(wagnermaciel): maybe handle the following edge case:
4854
// 1. start dragging discrete slider
@@ -404,6 +410,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
404410
constructor(...args: unknown[]);
405411

406412
constructor() {
413+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
407414
const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
408415
this._noopAnimations = animationMode === 'NoopAnimations';
409416

‎src/material/sort/sort-header.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {matSortAnimations} from './sort-animations';
3333
import {SortDirection} from './sort-direction';
3434
import {getSortHeaderNotContainedWithinSortError} from './sort-errors';
3535
import {MatSortHeaderIntl} from './sort-header-intl';
36+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
37+
import {_StructuralStylesLoader} from '@angular/material/core';
3638

3739
/**
3840
* Valid positions for the arrow to be in for its opacity and translation. If the state is a
@@ -173,6 +175,7 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI
173175
constructor(...args: unknown[]);
174176

175177
constructor() {
178+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
176179
const defaultOptions = inject<MatSortDefaultOptions>(MAT_SORT_DEFAULT_OPTIONS, {
177180
optional: true,
178181
});

‎src/material/stepper/step-header.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,10 @@ import {MatStepLabel} from './step-label';
2323
import {MatStepperIntl} from './stepper-intl';
2424
import {MatStepperIconContext} from './stepper-icon';
2525
import {CdkStepHeader, StepState} from '@angular/cdk/stepper';
26-
import {MatRipple, ThemePalette} from '@angular/material/core';
26+
import {_StructuralStylesLoader, MatRipple, ThemePalette} from '@angular/material/core';
2727
import {MatIcon} from '@angular/material/icon';
2828
import {NgTemplateOutlet} from '@angular/common';
29+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
2930

3031
@Component({
3132
selector: 'mat-step-header',
@@ -88,6 +89,7 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
8889
constructor() {
8990
super();
9091

92+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
9193
const changeDetectorRef = inject(ChangeDetectorRef);
9294
this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
9395
}

‎src/material/tabs/tab-nav-bar/tab-nav-bar.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
RippleGlobalOptions,
3535
RippleTarget,
3636
ThemePalette,
37+
_StructuralStylesLoader,
3738
} from '@angular/material/core';
3839
import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
3940
import {Directionality} from '@angular/cdk/bidi';
@@ -46,6 +47,7 @@ import {ENTER, SPACE} from '@angular/cdk/keycodes';
4647
import {MAT_TABS_CONFIG, MatTabsConfig} from '../tab-config';
4748
import {MatPaginatedTabHeader} from '../paginated-tab-header';
4849
import {CdkObserveContent} from '@angular/cdk/observers';
50+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
4951

5052
// Increasing integer for generating unique ids for tab nav components.
5153
let nextUniqueId = 0;
@@ -336,6 +338,7 @@ export class MatTabLink
336338
constructor() {
337339
super();
338340

341+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
339342
const globalRippleOptions = inject<RippleGlobalOptions | null>(MAT_RIPPLE_GLOBAL_OPTIONS, {
340343
optional: true,
341344
});

‎src/material/tabs/tab.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import {MatTabContent} from './tab-content';
2727
import {MAT_TAB, MatTabLabel} from './tab-label';
2828
import {TemplatePortal} from '@angular/cdk/portal';
2929
import {Subject} from 'rxjs';
30+
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
31+
import {_StructuralStylesLoader} from '@angular/material/core';
3032

3133
/**
3234
* Used to provide a tab group to a tab without causing a circular dependency.
@@ -127,7 +129,9 @@ export class MatTab implements OnInit, OnChanges, OnDestroy {
127129
isActive = false;
128130

129131
constructor(...args: unknown[]);
130-
constructor() {}
132+
constructor() {
133+
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
134+
}
131135

132136
ngOnChanges(changes: SimpleChanges): void {
133137
if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {

‎tools/public_api_guard/material/core.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,14 @@ export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
565565
static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
566566
}
567567

568+
// @public
569+
export class _StructuralStylesLoader {
570+
// (undocumented)
571+
static ɵcmp: i0.ɵɵComponentDeclaration<_StructuralStylesLoader, "structural-styles", never, {}, {}, never, never, true, never>;
572+
// (undocumented)
573+
static ɵfac: i0.ɵɵFactoryDeclaration<_StructuralStylesLoader, never>;
574+
}
575+
568576
// @public
569577
export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
570578

0 commit comments

Comments
 (0)