diff --git a/goldens/material/stepper/index.api.md b/goldens/material/stepper/index.api.md index b511e57b2aae..21ee4ffd5695 100644 --- a/goldens/material/stepper/index.api.md +++ b/goldens/material/stepper/index.api.md @@ -82,6 +82,12 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes // (undocumented) _getDefaultTextForState(state: StepState): string; _getHostElement(): HTMLElement; + // (undocumented) + protected _hasEmptyLabel(): boolean; + // (undocumented) + protected _hasErrorLabel(): boolean; + // (undocumented) + protected _hasOptionalLabel(): boolean; iconOverrides: { [key: string]: TemplateRef; }; diff --git a/src/material/stepper/step-header.html b/src/material/stepper/step-header.html index 99b65a5643a4..0835eff4349d 100644 --- a/src/material/stepper/step-header.html +++ b/src/material/stepper/step-header.html @@ -41,11 +41,11 @@
{{label}}
} - @if (optional && state != 'error') { + @if (_hasOptionalLabel()) {
{{_intl.optionalLabel}}
} - @if (state === 'error') { + @if (_hasErrorLabel()) {
{{errorMessage}}
} diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index 5c4f025dbf8c..346e8ea3f09a 100644 --- a/src/material/stepper/step-header.scss +++ b/src/material/stepper/step-header.scss @@ -143,6 +143,10 @@ $fallbacks: m3-stepper.get-tokens(); font-size: token-utils.slot(stepper-header-selected-state-label-text-size, $fallbacks); font-weight: token-utils.slot(stepper-header-selected-state-label-text-weight, $fallbacks); } + + .mat-step-header-empty-label & { + min-width: 0; + } } .mat-step-text-label { diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts index 998e5d3610ad..eb95f01ad708 100644 --- a/src/material/stepper/step-header.ts +++ b/src/material/stepper/step-header.ts @@ -34,6 +34,7 @@ import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/privat styleUrl: 'step-header.css', host: { 'class': 'mat-step-header', + '[class.mat-step-header-empty-label]': '_hasEmptyLabel()', '[class]': '"mat-" + (color || "primary")', 'role': 'tab', }, @@ -140,4 +141,21 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes } return state; } + + protected _hasEmptyLabel() { + return ( + !this._stringLabel() && + !this._templateLabel() && + !this._hasOptionalLabel() && + !this._hasErrorLabel() + ); + } + + protected _hasOptionalLabel() { + return this.optional && this.state !== 'error'; + } + + protected _hasErrorLabel() { + return this.state === 'error'; + } } diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss index eace322adeb1..7dc209dd91e5 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -81,6 +81,10 @@ $fallbacks: m3-stepper.get-tokens(); } } + &.mat-step-header-empty-label .mat-step-icon { + margin: 0; + } + $vertical-padding: _get-vertical-padding-calc(); &::before,