diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html index af0ebcaf055a..b52cf0511189 100644 --- a/src/dev-app/chips/chips-demo.html +++ b/src/dev-app/chips/chips-demo.html @@ -19,6 +19,19 @@

Unstyled

Basic Chip 3 + + Basic Chip Option 1 + Basic Chip Option 2 + Basic Chip Option 3 + + + + Basic Chip Row 1 + Basic Chip Row 2 + Basic Chip Row 3 + + +

With avatar, icons, and color

diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss index b07f18078108..022cad5fe239 100644 --- a/src/dev-app/chips/chips-demo.scss +++ b/src/dev-app/chips/chips-demo.scss @@ -17,7 +17,7 @@ } } - mat-basic-chip { + .mat-mdc-basic-chip { margin: auto 10px; } diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts index b47e0cde7fec..49a5df9c683d 100644 --- a/src/material/chips/chip-option.ts +++ b/src/material/chips/chip-option.ts @@ -44,8 +44,10 @@ export class MatChipSelectionChange { styleUrls: ['chip.css'], inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'], host: { - 'class': - 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--selectable', + 'class': 'mat-mdc-chip mat-mdc-chip-option', + '[class.mdc-evolution-chip]': '!_isBasicChip', + '[class.mdc-evolution-chip--filter]': '!_isBasicChip', + '[class.mdc-evolution-chip--selectable]': '!_isBasicChip', '[class.mat-mdc-chip-selected]': 'selected', '[class.mat-mdc-chip-multiple]': '_chipListMultiple', '[class.mat-mdc-chip-disabled]': 'disabled', @@ -141,7 +143,8 @@ export class MatChipOption extends MatChip implements OnInit { @Output() readonly selectionChange: EventEmitter = new EventEmitter(); - ngOnInit() { + override ngOnInit() { + super.ngOnInit(); this.role = 'presentation'; } diff --git a/src/material/chips/chip-set.ts b/src/material/chips/chip-set.ts index 484957676dc3..db012fd23bef 100644 --- a/src/material/chips/chip-set.ts +++ b/src/material/chips/chip-set.ts @@ -222,8 +222,7 @@ export class MatChipSet let currentElement = event.target as HTMLElement | null; while (currentElement && currentElement !== this._elementRef.nativeElement) { - // Null check the classList, because IE and Edge don't support it on all elements. - if (currentElement.classList && currentElement.classList.contains('mdc-evolution-chip')) { + if (currentElement.classList.contains('mat-mdc-chip')) { return true; } currentElement = currentElement.parentElement; diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index f56882005299..c475a21c1db3 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -167,6 +167,12 @@ } } +// Keeps basic listbox chips looking consistent with the other variations. Listbox chips don't +// inherit the font size, because they wrap the label in a `button` that has user agent styles. +.mat-mdc-basic-chip .mdc-evolution-chip__action--primary { + font: inherit; +} + // MDC's focus and hover indication is handled through their ripple which we currently // don't use due to size concerns so we have to re-implement it ourselves. .mat-mdc-chip-focus-overlay { diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index 1329f71cbbe6..49651eaad59f 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -28,6 +28,7 @@ import { Attribute, ContentChildren, QueryList, + OnInit, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import { @@ -116,6 +117,7 @@ const _MatChipMixinBase = mixinTabIndex( export class MatChip extends _MatChipMixinBase implements + OnInit, AfterViewInit, AfterContentInit, CanColor, @@ -136,7 +138,7 @@ export class MatChip readonly _onBlur = new Subject(); /** Whether this chip is a basic (unstyled) chip. */ - readonly _isBasicChip: boolean; + _isBasicChip: boolean; /** Role for the root of the chip. */ @Input() role: string | null = null; @@ -263,18 +265,23 @@ export class MatChip @Attribute('tabindex') tabIndex?: string, ) { super(elementRef); - const element = elementRef.nativeElement; this._document = _document; this._animationsDisabled = animationMode === 'NoopAnimations'; - this._isBasicChip = - element.hasAttribute(this.basicChipAttrName) || - element.tagName.toLowerCase() === this.basicChipAttrName; if (tabIndex != null) { this.tabIndex = parseInt(tabIndex) ?? this.defaultTabIndex; } this._monitorFocus(); } + ngOnInit() { + // This check needs to happen in `ngOnInit` so the overridden value of + // `basicChipAttrName` coming from base classes can be picked up. + const element = this._elementRef.nativeElement; + this._isBasicChip = + element.hasAttribute(this.basicChipAttrName) || + element.tagName.toLowerCase() === this.basicChipAttrName; + } + ngAfterViewInit() { this._textElement = this._elementRef.nativeElement.querySelector('.mat-mdc-chip-action-label')!; diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index 83cee41db08b..318e8659fb9d 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -61,7 +61,7 @@ export const MAT_CHIP_TRAILING_ICON: InjectionToken; export const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken; // @public -export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy { +export class MatChip extends _MatChipMixinBase implements OnInit, AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy { constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string); protected _allLeadingIcons: QueryList; protected _allRemoveIcons: QueryList; @@ -89,7 +89,7 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterCo // (undocumented) protected _highlighted: boolean; id: string; - readonly _isBasicChip: boolean; + _isBasicChip: boolean; readonly _isRippleCentered = false; _isRippleDisabled(): boolean; leadingIcon: MatChipAvatar; @@ -100,6 +100,8 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterCo // (undocumented) ngOnDestroy(): void; // (undocumented) + ngOnInit(): void; + // (undocumented) protected _ngZone: NgZone; readonly _onBlur: Subject; readonly _onFocus: Subject;