From 46d1895982ec2d8ec255eaa6008a2ee411da8323 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 12 Mar 2025 09:32:15 +0200 Subject: [PATCH 1/7] refactor(stepper): scope styles to component --- .../stepper/_stepper-component.scss | 24 +- .../components/stepper/_stepper-theme.scss | 80 +-- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 2 +- .../lib/core/styles/typography/_fluent.scss | 2 +- .../lib/core/styles/typography/_indigo.scss | 12 +- .../lib/core/styles/typography/_material.scss | 2 +- .../src/lib/stepper/step/step.component.html | 8 +- .../src/lib/stepper/step/step.component.scss | 2 + .../src/lib/stepper/step/step.component.ts | 49 +- .../src/lib/stepper/step/themes/_base.scss | 533 ++++++++++++++++++ .../lib/stepper/step/themes/dark/_index.scss | 6 + .../lib/stepper/step/themes/dark/_tokens.scss | 8 + .../lib/stepper/step/themes/light/_index.scss | 6 + .../stepper/step/themes/light/_tokens.scss | 8 + .../stepper/step/themes/shared/_index.scss | 4 + .../stepper/step/themes/shared/bootstrap.scss | 162 ++++++ .../stepper/step/themes/shared/fluent.scss | 149 +++++ .../stepper/step/themes/shared/indigo.scss | 157 ++++++ .../stepper/step/themes/shared/material.scss | 145 +++++ .../src/lib/stepper/stepper.common.ts | 2 - .../src/lib/stepper/stepper.component.scss | 4 + .../src/lib/stepper/stepper.component.spec.ts | 26 +- .../src/lib/stepper/stepper.component.ts | 4 +- .../src/lib/stepper/stepper.directive.ts | 18 +- .../src/lib/stepper/themes/_base.scss | 79 +++ .../src/lib/stepper/themes/dark/_index.scss | 6 + .../src/lib/stepper/themes/dark/_tokens.scss | 8 + .../src/lib/stepper/themes/light/_index.scss | 6 + .../src/lib/stepper/themes/light/_tokens.scss | 8 + .../src/lib/stepper/themes/shared/_index.scss | 4 + .../lib/stepper/themes/shared/bootstrap.scss | 10 + .../src/lib/stepper/themes/shared/fluent.scss | 7 + .../src/lib/stepper/themes/shared/indigo.scss | 7 + .../lib/stepper/themes/shared/material.scss | 7 + 35 files changed, 1455 insertions(+), 114 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/stepper/step/step.component.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/stepper.component.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss create mode 100644 projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss index f197022c6ba..4b688b020ad 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss @@ -18,6 +18,18 @@ @extend %igx-stepper__body !optional; } + @include m(horizontal) { + @extend %igx-stepper--horizontal !optional; + + @include e(body-content) { + @extend %igx-stepper__body-content !optional; + } + + @include e(body-content, $m: active) { + @extend %igx-stepper__body-content--active !optional; + } + } + @include e(step) { @extend %igx-stepper__step !optional; } @@ -85,17 +97,5 @@ @include e(step, $m: end) { @extend %igx-stepper__step--end !optional; } - - @include m(horizontal) { - @extend %igx-stepper--horizontal !optional; - - @include e(body-content) { - @extend %igx-stepper__body-content !optional; - } - - @include e(body-content, $m: active) { - @extend %igx-stepper__body-content--active !optional; - } - } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index e9d489aa0a4..067b4191e7e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -372,24 +372,24 @@ $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2))); $separator-title-bottom: calc((#{$indicator-size} / 2) + #{$step-header-padding} - (#{$separator-size} / 2)); - %stepper-display, - %igx-stepper__header, - %igx-stepper__body, + //%stepper-display, + //%igx-stepper__header, + //%igx-stepper__body, %igx-stepper__step { display: flex; } - %stepper-display { - flex-direction: column; - width: 100%; - } + //%stepper-display { + // flex-direction: column; + // width: 100%; + //} - %igx-stepper__header { - white-space: nowrap; - flex-direction: column; - width: 100%; - flex: none; - } + //%igx-stepper__header { + // white-space: nowrap; + // flex-direction: column; + // width: 100%; + // flex: none; + //} %igx-stepper__body { color: var-get($theme, 'content-foreground'); @@ -398,8 +398,8 @@ flex: 1 1 auto; } - %stepper-display, - %igx-stepper__body, + //%stepper-display, + //%igx-stepper__body, %igx-stepper__step-header, %igx-stepper__step-title-wrapper { overflow: hidden; @@ -643,26 +643,26 @@ } } - %igx-stepper__body-content { - display: block; - position: absolute; - inset: 0; - width: 100%; - height: 100%; - overflow-y: auto; - overflow-x: hidden; - z-index: -1; - } - - %igx-stepper__step-content-wrapper, - %igx-stepper__body-content { + //%igx-stepper__body-content { + // display: block; + // position: absolute; + // inset: 0; + // width: 100%; + // height: 100%; + // overflow-y: auto; + // overflow-x: hidden; + // z-index: -1; + //} + + //%igx-stepper__body-content, + %igx-stepper__step-content-wrapper, { padding: rem(16px); } - %igx-stepper__body-content--active { - z-index: 1; - position: relative; - } + //%igx-stepper__body-content--active { + // z-index: 1; + // position: relative; + //} %igx-stepper__step-content-wrapper { margin-inline-start: $v-line-indent; @@ -824,9 +824,9 @@ // HORIZONTAL MODE START %igx-stepper--horizontal { - %igx-stepper__header { - flex-direction: row; - } + //%igx-stepper__header { + // flex-direction: row; + //} %igx-stepper__step { overflow: hidden; @@ -988,9 +988,9 @@ text-align: center; } - %igx-stepper__body-content { - display: flex; - } + //%igx-stepper__body-content { + // display: flex; + //} } // HORIZONTAL MODE END } @@ -1039,8 +1039,8 @@ } } - %igx-stepper__step-content-wrapper, - %igx-stepper__body-content { + //%igx-stepper__body-content, + %igx-stepper__step-content-wrapper { @include type-style($body-content) { margin-top: 0; margin-bottom: 0; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index a7ae64159e7..bc525ebf1f4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -608,13 +608,13 @@ @include tabs($tabs-theme-map); } - @if is-used('igx-stepper', $exclude) { - $stepper-theme-map: stepper-theme( - $schema: $schema, - ); - $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); - @include stepper($stepper-theme-map); - } + //@if is-used('igx-stepper', $exclude) { + // $stepper-theme-map: stepper-theme( + // $schema: $schema, + // ); + // $stepper-theme-map: meta.call($theme-handler, $stepper-theme-map); + // @include stepper($stepper-theme-map); + //} // @if is-used('igx-toast', $exclude) { // $toast-theme-map: toast-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index b90f24283a9..9c7d890c1cd 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -107,7 +107,7 @@ header-hour: 'h4', selected-time: 'h4' )); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index c5cff3ac778..88ff180a935 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -111,7 +111,7 @@ label: 'body-2' )); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' // )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index f3a0b819b4b..046805d1289 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -112,12 +112,12 @@ header-hour: 'h5', selected-time: 'h6' )); - @include stepper-typography($categories: ( - title: 'body-2', - subtitle: 'caption', - indicator: 'button', - body-content: 'body-2' - )); + //@include stepper-typography($categories: ( + // title: 'body-2', + // subtitle: 'caption', + // indicator: 'button', + // body-content: 'body-2' + //)); // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 28a8f1630ce..e04237aef6b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -62,7 +62,7 @@ @include switch-typography(); @include tabs-typography(); @include time-picker-typography(); - @include stepper-typography(); + //@include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); @include tree-typography(); diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.html b/projects/igniteui-angular/src/lib/stepper/step/step.component.html index 48dd55aed14..3600e765d22 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.html @@ -23,22 +23,22 @@ -
@if (isIndicatorVisible) { -
+
} -
+
@if (!isHorizontal) { -
+
} diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.scss b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss new file mode 100644 index 00000000000..b8f7e512fe8 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.scss @@ -0,0 +1,2 @@ +@use 'themes/base'; +@use 'themes/shared'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index dc439b3f026..7db1622b3a0 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -15,7 +15,7 @@ import { Output, Renderer2, TemplateRef, - ViewChild + ViewChild, ViewEncapsulation } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base'; @@ -54,6 +54,8 @@ let NEXT_ID = 0; @Component({ selector: 'igx-step', templateUrl: 'step.component.html', + styleUrl: 'step.component.css', + encapsulation: ViewEncapsulation.None, providers: [ { provide: IGX_STEP_COMPONENT, useExisting: IgxStepComponent } ], @@ -121,7 +123,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, * ``` */ @Input({ transform: booleanAttribute }) - @HostBinding('class.igx-stepper__step--completed') + @HostBinding('class.igx-step--completed') public completed = false; /** @@ -215,11 +217,17 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ - @HostBinding('class.igx-stepper__step') + @HostBinding('class.igx-step') public cssClass = true; /** @hidden @internal */ - @HostBinding('class.igx-stepper__step--disabled') + @HostBinding('class.igx-step--vertical') + public get isVertical(): boolean { + return this.stepper.orientation === 'vertical'; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--disabled') public get generalDisabled(): boolean { return this.disabled || this.linearDisabled; } @@ -228,12 +236,28 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, @HostBinding('class') public get titlePositionTop(): string { if (this.stepper.stepType !== IgxStepType.Full) { - return 'igx-stepper__step--simple'; + return 'igx-step--simple'; } - return `igx-stepper__step--${this.titlePosition}`; + return `igx-step--${this.titlePosition}`; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--current') + public get isActive(): boolean { + return this.active; + } + + /** @hidden @internal */ + @HostBinding('class.igx-step--invalid') + public get isInvalid(): boolean { + return !this.isValid + && this.stepperService.visitedSteps.has(this) + && !this.active + && this.isAccessible; } + /** * Emitted when the step's `active` property changes. Can be used for two-way binding. * @@ -317,6 +341,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } /** @hidden @internal */ + @HostBinding('class.igx-step--horizontal') public get isHorizontal(): boolean { return this.stepper.orientation === IgxStepperOrientation.Horizontal; } @@ -360,17 +385,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, } } - /** @hidden @internal */ - public get stepHeaderClasses(): any { - return { - 'igx-stepper__step--optional': this.optional, - 'igx-stepper__step-header--current': this.active, - 'igx-stepper__step-header--invalid': !this.isValid - && this.stepperService.visitedSteps.has(this) && !this.active && this.isAccessible - }; - } - - /** @hidden @internal */ +/** @hidden @internal */ public get nativeElement(): HTMLElement { return this.element.nativeElement; } diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss new file mode 100644 index 00000000000..0868546aea7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -0,0 +1,533 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-step) { + $this: bem--selector-to-string(&); + + display: flex; + position: relative; + flex-direction: column; + align-content: center; + justify-content: center; + + &:focus { + outline: none; + + @include e(title) { + color: var-get($theme, 'title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-focus-color'); + } + + @include e(header) { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } + + @include e(header, $m: current) { + background: var-get($theme, 'current-step-focus-background') !important; + } + + @include e(title, $m: current) { + color: var-get($theme, 'current-title-focus-color'); + } + + @include e(subtitle, $m: current) { + color: var-get($theme, 'current-subtitle-focus-color'); + } + + @include e(header, $m: invalid) { + background: var-get($theme, 'invalid-step-focus-background'); + } + } + + &:first-of-type { + @include e(header) { + &::before { + visibility: hidden; + } + } + } + + &:last-of-type { + @include e(header) { + &::after { + visibility: hidden; + } + } + + @include e(content-wrapper) { + &::before { + display: none; + } + } + } + + @include e(header) { + display: flex; + padding: rem(8px); + position: relative; + line-height: normal; + flex-direction: column; + align-items: flex-start; + gap: rem(8px); + cursor: pointer; + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + overflow: hidden; + + &:hover { + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color'); + } + } + + @include e(indicator) { + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: rem(12px); + white-space: nowrap; + border-radius: var-get($theme, 'border-radius-indicator'); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'indicator-background'); + } + + @include e(title) { + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'title-color'); + } + + @include e(subtitle) { + @include type-style(caption) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'subtitle-color'); + } + + @include m(invalid) { + &:focus { + @include e(title) { + color: var-get($theme, 'invalid-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-focus-color'); + } + } + } + + @include m(current) { + background: var-get($theme, 'current-step-background') !important; + color: var-get($theme, 'current-title-color'); + + @include e(indicator) { + color: var-get($theme, 'current-indicator-color') !important; + background: var-get($theme, 'current-indicator-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-color'); + + // TODO See if we need this in all themes + font-weight: 600; + } + + @include e(indicator) { + color: var-get($theme, 'current-subtitle-color'); + } + + @include e(header) { + &:hover { + background: var-get($theme, 'current-step-hover-background') !important; + } + } + + &:hover { + @include e(title) { + color: var-get($theme, 'current-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-hover-color'); + } + } + } + + @include m(current, ('not', 'horizontal')) { + @include e(content-wrapper) { + padding: rem(16px); + } + } + + @include m(invalid) { + background: var-get($theme, 'invalid-step-background'); + color: var-get($theme, 'invalid-title-color'); + + @include e(indicator) { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-color'); + } + + @include e(header) { + &:hover { + background: var-get($theme, 'invalid-step-hover-background'); + } + } + + &:hover { + @include e(title) { + color: var-get($theme, 'invalid-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-hover-color'); + } + } + } + + @include e(title-wrapper) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: rem(32px); + + &:empty { + display: none; + } + + > * { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } + + @include e(content-wrapper) { + @include type-style(body-2) { + margin-block: 0; + }; + + position: relative; + + &::before { + content: ''; + position: absolute; + } + } + + @include m(completed) { + + #{$this} { + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + // the header will resolve to + //.igx-step--completed + .igx-step .igx-step__header::before { + // border-top-color: var(--complete-step-separator-color) !important; + // border-top-style: var(--complete-step-separator-style) !important + //} + #{elem($this, header)} { + /* stylelint-disable max-nesting-depth */ + &::before { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + /* stylelint-enable max-nesting-depth */ + } + } + + @include e(header) { + background: var-get($theme, 'complete-step-background'); + + &::after { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + } + + @include e(indicator) { + color: var-get($theme, 'complete-indicator-color'); + background: var-get($theme, 'complete-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-color'); + } + + @include e(header) { + &:hover { + background: var-get($theme, 'complete-step-hover-background'); + } + } + + &:hover { + @include e(title) { + color: var-get($theme, 'complete-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-hover-color'); + } + } + + &:focus { + @include e(header) { + background: var-get($theme, 'complete-step-focus-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-focus-color'); + } + } + + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($theme, 'complete-step-separator-color'); + } + } + + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + + @include m(simple) { + @include e(indicator) { + width: initial; + height: initial; + + div > igx-icon, + div > igx-avatar, + div > igx-circular-bar { + max-width: initial; + max-height: initial; + } + } + } + + @include m(horizontal) { + overflow: hidden; + flex-direction: row; + flex-grow: 1; + + &::before { + content: ''; + width: auto; + flex: 1; + position: relative; + z-index: -1; + } + + &:first-of-type { + flex-grow: 0; + min-width: max-content; + + &::before { + display: none; + } + } + + @include e(title-wrapper) { + width: 100%; + } + + @include e(header) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &::before, + &::after { + content: ''; + position: absolute; + z-index: -1; + flex: 1; + min-width: rem(4px); + } + + &::before { + inset-inline-start: 0; + } + + &::after { + inset-inline-end: 0; + } + } + + @include e(content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + } + + @include m(start) { + @include e(header) { + flex-direction: row; + align-items: center; + } + + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, start) { + &:first-of-type { + min-width: auto; + } + } + + @include mx(horizontal, end) { + &:first-of-type { + flex-grow: initial; + min-width: auto; + } + } + + @include m(end) { + @include e(header) { + flex-direction: row; + align-items: center; + } + } + + @include m(top) { + @include e(title-wrapper) { + order: -1; + } + } + + @include mx(horizontal, simple) { + text-align: center; + + @include e(header) { + align-self: center; + height: auto; + + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, ('not': 'simple')) { + @include e(header) { + min-width: rem(100px); + } + } + + @include mx(horizontal, top) { + @include e(header) { + flex-direction: column; + justify-content: flex-end; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, bottom) { + @include e(header) { + flex-direction: column; + justify-content: flex-start; + } + + @include e(title-wrapper) { + text-align: center; + } + } + + @include mx(horizontal, start) { + @include e(title-wrapper) { + text-align: end; + } + + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + + @include mx(horizontal, end) { + @include e(indicator) { + flex: 1 0 auto; + } + + @include e(header) { + &::before, + &::after { + display: none; + } + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss new file mode 100644 index 00000000000..24e23a42e85 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-step, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss new file mode 100644 index 00000000000..1caebf64811 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/stepper' as *; + +$base: digest-schema($base-stepper); +$material: digest-schema($dark-material-stepper); +$bootstrap: digest-schema($dark-bootstrap-stepper); +$fluent: digest-schema($dark-fluent-stepper); +$indigo: digest-schema($dark-indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss new file mode 100644 index 00000000000..c8ac3352475 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-step, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss new file mode 100644 index 00000000000..b7fddea3c31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/stepper' as *; + +$base: digest-schema($light-stepper); +$material: digest-schema($material-stepper); +$bootstrap: digest-schema($bootstrap-stepper); +$fluent: digest-schema($fluent-stepper); +$indigo: digest-schema($indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..292e268e4a1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -0,0 +1,162 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-step, bootstrap) { + $indicator-size: rem(40px); + $separator-size: rem(8px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + &:focus { + @include e(header) { + box-shadow: inset 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + } + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$indicator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: rem(24px); + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss new file mode 100644 index 00000000000..523c52e59f9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -0,0 +1,149 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-step, fluent) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{rem(24px)} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{rem(24px)} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{rem(24px)} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss new file mode 100644 index 00000000000..c7d6c4193f1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -0,0 +1,157 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-step, indigo) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{rem(8px)} - (#{rem(1px)} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{rem(8px)} + (#{rem(1px)} / 2))); + $v-line-indent: calc(#{rem(8px)} + (#{$indicator-size} / 2)); + + .igx-ripple__inner { + display: none !important; + } + + @include m(simple) { + @include e(indicator) { + min-width: rem(24px); + min-height: rem(24px); + } + } + + @include m(horizontal) { + &::before { + min-width: rem(40px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-block: rem(16px); + padding-inline-end: rem(16px); + padding-inline-start: $v-line-indent; + } + } + + [aria-selected='false'] { + @include e(content-wrapper) { + padding-block: 0; + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: #{var(--igx-icon--size, #{rem(14px)})}; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss new file mode 100644 index 00000000000..1be69400b02 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -0,0 +1,145 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $material; + +@include themed-block(igx-step, material) { + $indicator-size: rem(24px); + $separator-size: rem(1px); + $header-padding: rem(8px); + $title-separator-position-bottom: calc((#{$indicator-size} / 2) + #{$header-padding} - (#{$separator-size} / 2)); + $title-separator-position-top: calc(100% - ((#{$indicator-size} / 2) + #{$header-padding} + (#{$separator-size} / 2))); + $v-line-indent: calc(#{$header-padding} + (#{$indicator-size} / 2)); + + @include m(simple) { + @include e(indicator) { + min-width: $indicator-size; + min-height: $indicator-size; + } + } + + @include m(horizontal) { + &::before { + min-width: rem(36px); + height: $separator-size; + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + + @include e(header) { + &::before, + &::after { + height: $separator-size; + width: calc(50% - (#{$indicator-size} / 2) - #{$header-padding}); + top: $title-separator-position-bottom; + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + } + + @include mx(horizontal, simple) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + + @include e(header) { + padding: $header-padding; + } + } + + @include mx(horizontal, top) { + &::before { + border-top: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + top: $title-separator-position-top; + } + + @include e(header) { + &::before, + &::after { + top: $title-separator-position-top; + } + } + } + + @include mx(horizontal, start) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include mx(horizontal, end) { + &::before { + top: calc(50% - (#{$separator-size} / 2)); + } + } + + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } + + @include e(content-wrapper) { + margin-inline-start: $v-line-indent; + min-height: $indicator-size; + + &::before { + inset-inline-start: calc(-#{$separator-size} / 2); + top: calc(-#{$indicator-size} + #{$indicator-size}); + bottom: calc(-#{$indicator-size} + #{$indicator-size}); + width: $separator-size; + border-inline-start: $separator-size var-get($_theme, 'step-separator-style') var-get($_theme, 'step-separator-color'); + } + } + + &:last-of-type { + @include e(content-wrapper) { + min-height: 0; + } + } + + [aria-selected='true'] { + @include e(content-wrapper) { + padding-inline-start: $v-line-indent; + } + } + + @include e(indicator) { + height: $indicator-size; + width: $indicator-size; + min-width: $indicator-size; + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'indicator-outline'); + + > igx-icon { + --size: var(--igx-icon-size, #{rem(18px)}); + color: inherit; + } + + > igx-icon, + > igx-avatar, + > igx-circular-bar { + max-height: $indicator-size; + max-width: $indicator-size; + } + } + + @include m(disabled) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'disabled-indicator-outline'); + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts index fbcef0f488e..5345e97a0eb 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.common.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.common.ts @@ -92,8 +92,6 @@ export interface IgxStep extends ToggleAnimationPlayer { /** @hidden @internal */ contentClasses: any; /** @hidden @internal */ - stepHeaderClasses: any; - /** @hidden @internal */ nativeElement: HTMLElement; /** @hidden @internal */ previous: boolean; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 86509db32a8..1318e65ecf4 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -27,14 +27,14 @@ const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; const STEPPER_BODY = 'igx-stepper__body'; const STEP_TAG = 'IGX-STEP'; -const STEP_HEADER = 'igx-stepper__step-header'; -const STEP_INDICATOR_CLASS = 'igx-stepper__step-indicator'; -const STEP_TITLE_CLASS = 'igx-stepper__step-title'; -const STEP_SUBTITLE_CLASS = 'igx-stepper__step-subtitle'; -const INVALID_CLASS = 'igx-stepper__step-header--invalid'; -const DISABLED_CLASS = 'igx-stepper__step--disabled'; -const COMPLETED_CLASS = 'igx-stepper__step--completed'; -const CURRENT_CLASS = 'igx-stepper__step-header--current'; +const STEP_HEADER = 'igx-step__header'; +const STEP_INDICATOR_CLASS = 'igx-step__indicator'; +const STEP_TITLE_CLASS = 'igx-step__title'; +const STEP_SUBTITLE_CLASS = 'igx-step__subtitle'; +const INVALID_CLASS = 'igx-step--invalid'; +const DISABLED_CLASS = 'igx-step--disabled'; +const COMPLETED_CLASS = 'igx-step--completed'; +const CURRENT_CLASS = 'igx-step--current'; const getHeaderElements = (stepper: IgxStepperComponent, stepIndex: number): Map => { const elementsMap = new Map(); @@ -116,7 +116,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); tick(); - expect(stepper.steps[1].nativeElement).toHaveClass('igx-stepper__step--disabled'); + expect(stepper.steps[1].nativeElement).toHaveClass('igx-step--disabled'); stepper.next(); fix.detectChanges(); @@ -463,7 +463,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.Bottom); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } const positions = getStepperPositions(); @@ -472,7 +472,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); @@ -484,7 +484,7 @@ describe('Rendering Tests', () => { for (const step of stepper.steps) { expect(step.titlePosition).toBe(stepper._defaultTitlePosition); expect(step.titlePosition).toBe(IgxStepperTitlePosition.End); - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${stepper._defaultTitlePosition}`); + expect(step.nativeElement).toHaveClass(`igx-step--${stepper._defaultTitlePosition}`); } positions.forEach((pos: IgxStepperTitlePosition) => { @@ -492,7 +492,7 @@ describe('Rendering Tests', () => { fix.detectChanges(); for (const step of stepper.steps) { - expect(step.nativeElement).toHaveClass(`igx-stepper__step--${pos}`); + expect(step.nativeElement).toHaveClass(`igx-step--${pos}`); } }); }); diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts index 3c5329a1821..6e9203f4255 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.ts @@ -3,7 +3,7 @@ import { NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Inject, Input, OnChanges, OnDestroy, - OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute + OnInit, Output, QueryList, SimpleChanges, TemplateRef, booleanAttribute, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -69,6 +69,8 @@ import { fadeIn, growVerIn, growVerOut } from 'igniteui-angular/animations'; @Component({ selector: 'igx-stepper', templateUrl: 'stepper.component.html', + styleUrl: 'stepper.component.css', + encapsulation: ViewEncapsulation.None, providers: [ IgxStepperService, { provide: IGX_STEPPER_COMPONENT, useExisting: IgxStepperComponent }, diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index 9e5e334272b..a0f8a8e8832 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -7,7 +7,7 @@ import { IgxStepperService } from './stepper.service'; * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -28,7 +28,7 @@ export class IgxStepActiveIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -49,7 +49,7 @@ export class IgxStepCompletedIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -70,7 +70,7 @@ export class IgxStepInvalidIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -91,7 +91,7 @@ export class IgxStepIndicatorDirective { } * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -106,7 +106,7 @@ export class IgxStepIndicatorDirective { } standalone: true }) export class IgxStepTitleDirective { - @HostBinding('class.igx-stepper__step-title') + @HostBinding('class.igx-step__title') public defaultClass = true; } @@ -115,7 +115,7 @@ export class IgxStepTitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example @@ -130,7 +130,7 @@ export class IgxStepTitleDirective { standalone: true }) export class IgxStepSubtitleDirective { - @HostBinding('class.igx-stepper__step-subtitle') + @HostBinding('class.igx-step__subtitle') public defaultClass = true; } @@ -139,7 +139,7 @@ export class IgxStepSubtitleDirective { * * @igxModule IgxStepperModule * @igxTheme igx-stepper-theme - * @igxKeywords stepper + * @igxKeywords stepper * @igxGroup Layouts * * @example diff --git a/projects/igniteui-angular/src/lib/stepper/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss new file mode 100644 index 00000000000..b52304ca66c --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/_base.scss @@ -0,0 +1,79 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$theme: $material; + +@include layer(base) { + @include b(igx-stepper) { + display: flex; + flex-direction: column; + width: 100%; + overflow: hidden; + + @include e(header) { + display: flex; + white-space: nowrap; + flex-direction: column; + width: 100%; + flex: none; + } + + @include e(body) { + display: flex; + color: var-get($theme, 'content-foreground'); + position: relative; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + } + + @include m(horizontal) { + @include e(header) { + flex-direction: row; + } + + @include e(body-content) { + display: flex; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + z-index: -1; + padding: rem(16px); + + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + } + + @include e(body-content, $m: active) { + z-index: 1; + position: relative; + } + + @include e(step-content) { + flex-grow: 1; + + &:focus { + outline: none; + } + + &::before { + display: none; + } + } + + @include e(step-content-wrapper) { + text-align: center; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss new file mode 100644 index 00000000000..02f9fac8abf --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-stepper, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss new file mode 100644 index 00000000000..1caebf64811 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/dark/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/stepper' as *; + +$base: digest-schema($base-stepper); +$material: digest-schema($dark-material-stepper); +$bootstrap: digest-schema($dark-bootstrap-stepper); +$fluent: digest-schema($dark-fluent-stepper); +$indigo: digest-schema($dark-indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss new file mode 100644 index 00000000000..3b73043d778 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-stepper, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss new file mode 100644 index 00000000000..b7fddea3c31 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/stepper' as *; + +$base: digest-schema($light-stepper); +$material: digest-schema($material-stepper); +$bootstrap: digest-schema($bootstrap-stepper); +$fluent: digest-schema($fluent-stepper); +$indigo: digest-schema($indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss new file mode 100644 index 00000000000..0ca60c75786 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss @@ -0,0 +1,4 @@ +@forward 'material'; +@forward 'bootstrap'; +@forward 'fluent'; +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss new file mode 100644 index 00000000000..86f61b7bbce --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss @@ -0,0 +1,10 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $bootstrap; + +@include themed-block(igx-stepper, bootstrap) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss new file mode 100644 index 00000000000..8d56a722db4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, fluent) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss new file mode 100644 index 00000000000..1dd5b995d6a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, indigo) { + +} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss new file mode 100644 index 00000000000..6988a8e224a --- /dev/null +++ b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/bem' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-stepper, material) { + +} From 13979859dda1f25a3190224799ce12f2a5de66f4 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 12 Mar 2025 09:38:54 +0200 Subject: [PATCH 2/7] chore(stepper): revert styles in the core folder --- .../stepper/_stepper-component.scss | 24 +++--- .../components/stepper/_stepper-theme.scss | 80 +++++++++---------- 2 files changed, 52 insertions(+), 52 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss index 4b688b020ad..f197022c6ba 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss @@ -18,18 +18,6 @@ @extend %igx-stepper__body !optional; } - @include m(horizontal) { - @extend %igx-stepper--horizontal !optional; - - @include e(body-content) { - @extend %igx-stepper__body-content !optional; - } - - @include e(body-content, $m: active) { - @extend %igx-stepper__body-content--active !optional; - } - } - @include e(step) { @extend %igx-stepper__step !optional; } @@ -97,5 +85,17 @@ @include e(step, $m: end) { @extend %igx-stepper__step--end !optional; } + + @include m(horizontal) { + @extend %igx-stepper--horizontal !optional; + + @include e(body-content) { + @extend %igx-stepper__body-content !optional; + } + + @include e(body-content, $m: active) { + @extend %igx-stepper__body-content--active !optional; + } + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 067b4191e7e..e9d489aa0a4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -372,24 +372,24 @@ $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2))); $separator-title-bottom: calc((#{$indicator-size} / 2) + #{$step-header-padding} - (#{$separator-size} / 2)); - //%stepper-display, - //%igx-stepper__header, - //%igx-stepper__body, + %stepper-display, + %igx-stepper__header, + %igx-stepper__body, %igx-stepper__step { display: flex; } - //%stepper-display { - // flex-direction: column; - // width: 100%; - //} + %stepper-display { + flex-direction: column; + width: 100%; + } - //%igx-stepper__header { - // white-space: nowrap; - // flex-direction: column; - // width: 100%; - // flex: none; - //} + %igx-stepper__header { + white-space: nowrap; + flex-direction: column; + width: 100%; + flex: none; + } %igx-stepper__body { color: var-get($theme, 'content-foreground'); @@ -398,8 +398,8 @@ flex: 1 1 auto; } - //%stepper-display, - //%igx-stepper__body, + %stepper-display, + %igx-stepper__body, %igx-stepper__step-header, %igx-stepper__step-title-wrapper { overflow: hidden; @@ -643,26 +643,26 @@ } } - //%igx-stepper__body-content { - // display: block; - // position: absolute; - // inset: 0; - // width: 100%; - // height: 100%; - // overflow-y: auto; - // overflow-x: hidden; - // z-index: -1; - //} - - //%igx-stepper__body-content, - %igx-stepper__step-content-wrapper, { + %igx-stepper__body-content { + display: block; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + z-index: -1; + } + + %igx-stepper__step-content-wrapper, + %igx-stepper__body-content { padding: rem(16px); } - //%igx-stepper__body-content--active { - // z-index: 1; - // position: relative; - //} + %igx-stepper__body-content--active { + z-index: 1; + position: relative; + } %igx-stepper__step-content-wrapper { margin-inline-start: $v-line-indent; @@ -824,9 +824,9 @@ // HORIZONTAL MODE START %igx-stepper--horizontal { - //%igx-stepper__header { - // flex-direction: row; - //} + %igx-stepper__header { + flex-direction: row; + } %igx-stepper__step { overflow: hidden; @@ -988,9 +988,9 @@ text-align: center; } - //%igx-stepper__body-content { - // display: flex; - //} + %igx-stepper__body-content { + display: flex; + } } // HORIZONTAL MODE END } @@ -1039,8 +1039,8 @@ } } - //%igx-stepper__body-content, - %igx-stepper__step-content-wrapper { + %igx-stepper__step-content-wrapper, + %igx-stepper__body-content { @include type-style($body-content) { margin-top: 0; margin-bottom: 0; From 6cbf20388d25f431c0bdddcb7a1e954b91d8dc10 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 12 Mar 2025 13:03:05 +0200 Subject: [PATCH 3/7] fix(stepper): fix failing tests do to the refactoring --- .../src/lib/stepper/stepper.component.spec.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 1318e65ecf4..40757008133 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -338,14 +338,14 @@ describe('Rendering Tests', () => { }); it('should indicate the currently active step', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - const step1Header = stepper.steps[1].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0 = stepper.steps[0].nativeElement; + const step1 = stepper.steps[1].nativeElement; const serviceExpandSpy = spyOn((stepper as any).stepperService, 'expand').and.callThrough(); stepper.steps[0].active = true; fix.detectChanges(); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); stepper.steps[1].active = true; stepper.steps[1].nativeElement.focus(); @@ -354,8 +354,8 @@ describe('Rendering Tests', () => { UIInteractions.triggerKeyDownEvtUponElem(' ', stepper.steps[1].nativeElement); fix.detectChanges(); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); - expect(step1Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); + expect(step1).toHaveClass(CURRENT_CLASS); expect(serviceExpandSpy).toHaveBeenCalledOnceWith(stepper.steps[1]); }); @@ -378,7 +378,7 @@ describe('Rendering Tests', () => { }); it('should indicate that a step is invalid', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); + const step0Header = stepper.steps[0].nativeElement; stepper.steps[0].isValid = true; fix.detectChanges(); @@ -517,11 +517,11 @@ describe('Rendering Tests', () => { }); it('should allow overriding the default invalid, completed and active indicators', () => { - const step0Header = stepper.steps[0].nativeElement.querySelector(`.${STEP_HEADER}`); - let indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + const step0 = stepper.steps[0].nativeElement; + let indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('edit'); @@ -531,10 +531,10 @@ describe('Rendering Tests', () => { stepper.steps[1].active = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).not.toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('error'); @@ -543,10 +543,10 @@ describe('Rendering Tests', () => { stepper.steps[0].completed = true; fix.detectChanges(); - indicatorElement = step0Header.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; + indicatorElement = step0.querySelector(`.${STEP_INDICATOR_CLASS}`).children[0]; - expect(step0Header).not.toHaveClass(INVALID_CLASS); - expect(step0Header).not.toHaveClass(CURRENT_CLASS); + expect(step0).not.toHaveClass(INVALID_CLASS); + expect(step0).not.toHaveClass(CURRENT_CLASS); expect(stepper.steps[0].nativeElement).toHaveClass(COMPLETED_CLASS); expect(indicatorElement.tagName).toBe('IGX-ICON'); expect(indicatorElement.textContent).toBe('check'); From 44e41a64fb5cbf5cbf754a893794fb1664d84019 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 14 Mar 2025 20:13:58 +0200 Subject: [PATCH 4/7] refactor(stepper): change the BEM structure for step header states --- .../src/lib/stepper/step/step.component.html | 7 +- .../src/lib/stepper/step/step.component.ts | 9 + .../src/lib/stepper/step/themes/_base.scss | 381 +++++++++--------- .../stepper/step/themes/shared/bootstrap.scss | 47 ++- .../stepper/step/themes/shared/fluent.scss | 48 ++- .../stepper/step/themes/shared/indigo.scss | 47 ++- .../stepper/step/themes/shared/material.scss | 47 ++- .../src/lib/stepper/stepper.component.spec.ts | 4 +- .../src/lib/stepper/stepper.directive.ts | 8 +- 9 files changed, 322 insertions(+), 276 deletions(-) diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.html b/projects/igniteui-angular/src/lib/stepper/step/step.component.html index 3600e765d22..9703d5d731b 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.html +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.html @@ -23,11 +23,12 @@ -
+
@if (isIndicatorVisible) { -
+
} diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index 7db1622b3a0..27a54e97152 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -257,6 +257,15 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, && this.isAccessible; } + /** @hidden @internal */ + public get stepHeaderClasses(): { [key: string]: boolean } { + return { + 'igx-step-header--invalid': this.isInvalid, + 'igx-step-header--disabled': this.disabled, + 'igx-step-header--current': this.active, + 'igx-step-header--completed': this.completed, + }; + } /** * Emitted when the step's `active` property changes. Can be used for two-way binding. diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss index 0868546aea7..a3d3cb04ff8 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -33,22 +33,6 @@ $theme: $material; background: var-get($theme, 'step-focus-background'); color: var-get($theme, 'title-focus-color'); } - - @include e(header, $m: current) { - background: var-get($theme, 'current-step-focus-background') !important; - } - - @include e(title, $m: current) { - color: var-get($theme, 'current-title-focus-color'); - } - - @include e(subtitle, $m: current) { - color: var-get($theme, 'current-subtitle-focus-color'); - } - - @include e(header, $m: invalid) { - background: var-get($theme, 'invalid-step-focus-background'); - } } &:first-of-type { @@ -73,57 +57,18 @@ $theme: $material; } } - @include e(header) { - display: flex; - padding: rem(8px); - position: relative; - line-height: normal; - flex-direction: column; - align-items: flex-start; - gap: rem(8px); - cursor: pointer; - background: var-get($theme, 'step-background'); - border-radius: var-get($theme, 'border-radius-step-header'); - overflow: hidden; - - &:hover { - background: var-get($theme, 'step-hover-background'); - color: var-get($theme, 'title-hover-color'); - } - } - - @include e(indicator) { - display: flex; - align-items: center; - justify-content: center; - position: relative; - font-size: rem(12px); - white-space: nowrap; - border-radius: var-get($theme, 'border-radius-indicator'); - color: var-get($theme, 'indicator-color'); - background: var-get($theme, 'indicator-background'); - } - - @include e(title) { - @include type-style(body-2) { - margin-top: 0; - margin-bottom: 0; - } - - color: var-get($theme, 'title-color'); - } - - @include e(subtitle) { - @include type-style(caption) { - margin-top: 0; - margin-bottom: 0; + @include m(current, ('not', 'horizontal')) { + @include e(content-wrapper) { + padding: rem(16px); } - - color: var-get($theme, 'subtitle-color'); } @include m(invalid) { &:focus { + @include e(header) { + background: var-get($theme, 'invalid-step-focus-background'); + } + @include e(title) { color: var-get($theme, 'invalid-title-focus-color'); } @@ -135,78 +80,17 @@ $theme: $material; } @include m(current) { - background: var-get($theme, 'current-step-background') !important; - color: var-get($theme, 'current-title-color'); - - @include e(indicator) { - color: var-get($theme, 'current-indicator-color') !important; - background: var-get($theme, 'current-indicator-background') !important; - } - - @include e(title) { - color: var-get($theme, 'current-title-color'); - - // TODO See if we need this in all themes - font-weight: 600; - } - - @include e(indicator) { - color: var-get($theme, 'current-subtitle-color'); - } - - @include e(header) { - &:hover { - background: var-get($theme, 'current-step-hover-background') !important; - } - } - - &:hover { - @include e(title) { - color: var-get($theme, 'current-title-hover-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'current-subtitle-hover-color'); - } - } - } - - @include m(current, ('not', 'horizontal')) { - @include e(content-wrapper) { - padding: rem(16px); - } - } - - @include m(invalid) { - background: var-get($theme, 'invalid-step-background'); - color: var-get($theme, 'invalid-title-color'); - - @include e(indicator) { - color: var-get($theme, 'invalid-indicator-color'); - background: var-get($theme, 'invalid-indicator-background'); - } - - @include e(title) { - color: var-get($theme, 'invalid-title-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'invalid-subtitle-color'); - } - - @include e(header) { - &:hover { - background: var-get($theme, 'invalid-step-hover-background'); + &:focus { + @include e(header) { + background: var-get($theme, 'current-step-focus-background') !important; } - } - &:hover { @include e(title) { - color: var-get($theme, 'invalid-title-hover-color'); + color: var-get($theme, 'current-title-focus-color'); } @include e(subtitle) { - color: var-get($theme, 'invalid-subtitle-hover-color'); + color: var-get($theme, 'current-subtitle-focus-color'); } } } @@ -249,11 +133,6 @@ $theme: $material; border-top-style: var-get($theme, 'complete-step-separator-style') !important; } - // the header will resolve to - //.igx-step--completed + .igx-step .igx-step__header::before { - // border-top-color: var(--complete-step-separator-color) !important; - // border-top-style: var(--complete-step-separator-style) !important - //} #{elem($this, header)} { /* stylelint-disable max-nesting-depth */ &::before { @@ -264,44 +143,6 @@ $theme: $material; } } - @include e(header) { - background: var-get($theme, 'complete-step-background'); - - &::after { - border-top-color: var-get($theme, 'complete-step-separator-color') !important; - border-top-style: var-get($theme, 'complete-step-separator-style') !important; - } - } - - @include e(indicator) { - color: var-get($theme, 'complete-indicator-color'); - background: var-get($theme, 'complete-indicator-background'); - } - - @include e(title) { - color: var-get($theme, 'complete-title-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'complete-subtitle-color'); - } - - @include e(header) { - &:hover { - background: var-get($theme, 'complete-step-hover-background'); - } - } - - &:hover { - @include e(title) { - color: var-get($theme, 'complete-title-hover-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'complete-subtitle-hover-color'); - } - } - &:focus { @include e(header) { background: var-get($theme, 'complete-step-focus-background'); @@ -315,33 +156,6 @@ $theme: $material; color: var-get($theme, 'complete-subtitle-focus-color'); } } - - @include e(content-wrapper) { - &::before { - border-inline-start-style: var-get($theme, 'complete-step-separator-style'); - border-inline-start-color: var-get($theme, 'complete-step-separator-color'); - } - } - - } - - @include m(disabled) { - color: var-get($theme, 'disabled-title-color'); - pointer-events: none; - cursor: default; - - @include e(indicator) { - color: var-get($theme, 'disabled-indicator-color'); - background: var-get($theme, 'disabled-indicator-background'); - } - - @include e(title) { - color: var-get($theme, 'disabled-title-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'disabled-subtitle-color'); - } } @include m(simple) { @@ -530,4 +344,175 @@ $theme: $material; } } } + + @include b(igx-step-header) { + display: flex; + padding: rem(8px); + position: relative; + line-height: normal; + flex-direction: column; + align-items: flex-start; + gap: rem(8px); + cursor: pointer; + color: var-get($theme, 'title-color'); + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + overflow: hidden; + + @include e(indicator) { + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: rem(12px); + white-space: nowrap; + border-radius: var-get($theme, 'border-radius-indicator'); + color: var-get($theme, 'indicator-color'); + background: var-get($theme, 'indicator-background'); + } + + @include e(title) { + @include type-style(body-2) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'title-color'); + } + + @include e(subtitle) { + @include type-style(caption) { + margin-top: 0; + margin-bottom: 0; + } + + color: var-get($theme, 'subtitle-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + + @include e(title) { + color: var-get($theme, 'title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-hover-color'); + } + } + + @include m(invalid) { + background: var-get($theme, 'invalid-step-background'); + color: var-get($theme, 'invalid-title-color'); + + @include e(indicator) { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'invalid-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-color'); + } + + &:hover { + @include e(title) { + color: var-get($theme, 'invalid-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'invalid-subtitle-hover-color'); + } + } + } + + @include m(completed) { + background: var-get($theme, 'complete-step-background'); + + &::after { + border-top-color: var-get($theme, 'complete-step-separator-color') !important; + border-top-style: var-get($theme, 'complete-step-separator-style') !important; + } + + @include e(indicator) { + color: var-get($theme, 'complete-indicator-color'); + background: var-get($theme, 'complete-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'complete-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'complete-step-hover-background'); + + @include e(title) { + color: var-get($theme, 'complete-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'complete-subtitle-hover-color'); + } + } + } + + @include m(current) { + background: var-get($theme, 'current-step-background') !important; + color: var-get($theme, 'current-title-color'); + + @include e(indicator) { + color: var-get($theme, 'current-indicator-color') !important; + background: var-get($theme, 'current-indicator-background') !important; + } + + @include e(title) { + color: var-get($theme, 'current-title-color'); + + // TODO See if we need this in all themes + font-weight: 600; + } + + @include e(indicator) { + color: var-get($theme, 'current-subtitle-color'); + } + + &:hover { + background: var-get($theme, 'current-step-hover-background') !important; + + @include e(title) { + color: var-get($theme, 'current-title-hover-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'current-subtitle-hover-color'); + } + } + } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } + } } diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss index 292e268e4a1..7d4c03e3f2c 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -93,24 +93,6 @@ $_theme: $bootstrap; } } - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - @include e(content-wrapper) { margin-inline-start: $v-line-indent; min-height: rem(24px); @@ -124,6 +106,15 @@ $_theme: $bootstrap; } } + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + &:last-of-type { @include e(content-wrapper) { min-height: 0; @@ -153,6 +144,26 @@ $_theme: $bootstrap; max-width: $indicator-size; } } +} + +@include themed-block(igx-step-header, bootstrap) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } @include m(disabled) { @include e(indicator) { diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss index 523c52e59f9..20a3fafc332 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -79,24 +79,6 @@ $_theme: $fluent; } } - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - @include e(content-wrapper) { margin-inline-start: $v-line-indent; min-height: $indicator-size; @@ -110,6 +92,16 @@ $_theme: $fluent; } } + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + + &:last-of-type { @include e(content-wrapper) { min-height: 0; @@ -140,6 +132,26 @@ $_theme: $fluent; max-width: $indicator-size; } } +} + +@include themed-block(igx-step-header, fluent) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } @include m(disabled) { @include e(indicator) { diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss index c7d6c4193f1..ff383907da7 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -80,12 +80,6 @@ $_theme: $indigo; } } - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); - } - } - @include e(content-wrapper) { margin-inline-start: $v-line-indent; min-height: $indicator-size; @@ -99,6 +93,15 @@ $_theme: $indigo; } } + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + &:last-of-type { @include e(content-wrapper) { min-height: 0; @@ -119,18 +122,6 @@ $_theme: $indigo; } } - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - @include e(indicator) { height: $indicator-size; width: $indicator-size; @@ -148,6 +139,26 @@ $_theme: $indigo; max-width: $indicator-size; } } +} + +@include themed-block(igx-step-header, indigo) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(2px, rem(2px), rem(2px)) var-get($_theme, 'invalid-indicator-outline'); + } + } @include m(disabled) { @include e(indicator) { diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss index 1be69400b02..e2fa7a30eed 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -75,24 +75,6 @@ $_theme: $material; } } - @include m(completed) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); - } - } - - @include m(current) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; - } - } - - @include m(invalid) { - @include e(indicator) { - box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); - } - } - @include e(content-wrapper) { margin-inline-start: $v-line-indent; min-height: $indicator-size; @@ -106,6 +88,15 @@ $_theme: $material; } } + @include m(completed) { + @include e(content-wrapper) { + &::before { + border-inline-start-style: var-get($_theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($_theme, 'complete-step-separator-color'); + } + } + } + &:last-of-type { @include e(content-wrapper) { min-height: 0; @@ -136,6 +127,26 @@ $_theme: $material; max-width: $indicator-size; } } +} + +@include themed-block(igx-step-header, material) { + @include m(completed) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'complete-indicator-outline'); + } + } + + @include m(current) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'current-indicator-outline') !important; + } + } + + @include m(invalid) { + @include e(indicator) { + box-shadow: 0 0 0 clamp(1px, rem(1px), rem(1px)) var-get($_theme, 'invalid-indicator-outline'); + } + } @include m(disabled) { @include e(indicator) { diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 40757008133..26966ab8bd2 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -74,7 +74,7 @@ const testAnimationBehvior = ( activeChangeSpy.calls.reset(); }; -describe('Rendering Tests', () => { +fdescribe('Rendering Tests', () => { configureTestSuite(); let fix: ComponentFixture; let stepper: IgxStepperComponent; @@ -916,7 +916,7 @@ describe('Rendering Tests', () => { }); }); -describe('Stepper service unit tests', () => { +fdescribe('Stepper service unit tests', () => { configureTestSuite(); let stepperService: IgxStepperService; diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts index a0f8a8e8832..1c0335f8183 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.directive.ts @@ -108,6 +108,9 @@ export class IgxStepIndicatorDirective { } export class IgxStepTitleDirective { @HostBinding('class.igx-step__title') public defaultClass = true; + + @HostBinding('class.igx-step-header__title') + public headerElementClass = true; } /** @@ -131,7 +134,10 @@ export class IgxStepTitleDirective { }) export class IgxStepSubtitleDirective { @HostBinding('class.igx-step__subtitle') - public defaultClass = true; + public elementClass = true; + + @HostBinding('class.igx-step-header__subtitle') + public headerElementClass = true; } /** From 96e9ad7b40ff31072686213afde99724d627d942 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 17 Mar 2025 12:55:00 +0200 Subject: [PATCH 5/7] refactor(stepper): fix linear mode and disabled colors --- .../src/lib/stepper/step/step.component.ts | 2 +- .../src/lib/stepper/step/themes/_base.scss | 57 ++++++++++++------- .../stepper/step/themes/shared/bootstrap.scss | 6 ++ 3 files changed, 45 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index 27a54e97152..d6aa41f3e5b 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -261,7 +261,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, public get stepHeaderClasses(): { [key: string]: boolean } { return { 'igx-step-header--invalid': this.isInvalid, - 'igx-step-header--disabled': this.disabled, + 'igx-step-header--disabled': this.disabled || this.linearDisabled, 'igx-step-header--current': this.active, 'igx-step-header--completed': this.completed, }; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss index a3d3cb04ff8..58e80ffb69a 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -18,23 +18,6 @@ $theme: $material; align-content: center; justify-content: center; - &:focus { - outline: none; - - @include e(title) { - color: var-get($theme, 'title-focus-color'); - } - - @include e(subtitle) { - color: var-get($theme, 'subtitle-focus-color'); - } - - @include e(header) { - background: var-get($theme, 'step-focus-background'); - color: var-get($theme, 'title-focus-color'); - } - } - &:first-of-type { @include e(header) { &::before { @@ -57,7 +40,24 @@ $theme: $material; } } - @include m(current, ('not', 'horizontal')) { + &:focus { + outline: none; + + @include e(title) { + color: var-get($theme, 'title-focus-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'subtitle-focus-color'); + } + + @include e(header) { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } + } + + @include m(current, $not: ('horizontal')) { @include e(content-wrapper) { padding: rem(16px); } @@ -175,7 +175,7 @@ $theme: $material; @include m(horizontal) { overflow: hidden; flex-direction: row; - flex-grow: 1; + flex: 1; &::before { content: ''; @@ -343,6 +343,25 @@ $theme: $material; } } } + + @include m(disabled) { + color: var-get($theme, 'disabled-title-color'); + pointer-events: none; + cursor: default; + + @include e(indicator) { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + } + + @include e(title) { + color: var-get($theme, 'disabled-title-color'); + } + + @include e(subtitle) { + color: var-get($theme, 'disabled-subtitle-color'); + } + } } @include b(igx-step-header) { diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss index 7d4c03e3f2c..61669d33e4e 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -144,6 +144,12 @@ $_theme: $bootstrap; max-width: $indicator-size; } } + + @include m(disabled) { + @include e(header) { + box-shadow: none; + } + } } @include themed-block(igx-step-header, bootstrap) { From 21d4752ba6b2558d796f8537e4376f1d5d6fe3ac Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 27 Mar 2025 09:40:04 +0200 Subject: [PATCH 6/7] refactor(stepper): remove duplicate declarations --- .../src/lib/stepper/step/step.component.ts | 3 ++- .../src/lib/stepper/step/themes/_base.scss | 2 +- .../src/lib/stepper/step/themes/dark/_index.scss | 6 ------ .../src/lib/stepper/step/themes/dark/_tokens.scss | 8 -------- .../src/lib/stepper/step/themes/light/_index.scss | 6 ------ .../src/lib/stepper/step/themes/light/_tokens.scss | 8 -------- .../src/lib/stepper/step/themes/shared/bootstrap.scss | 2 +- .../src/lib/stepper/step/themes/shared/fluent.scss | 2 +- .../src/lib/stepper/step/themes/shared/indigo.scss | 2 +- .../src/lib/stepper/step/themes/shared/material.scss | 2 +- 10 files changed, 7 insertions(+), 34 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss delete mode 100644 projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts index d6aa41f3e5b..a19cd3acc06 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/step.component.ts +++ b/projects/igniteui-angular/src/lib/stepper/step/step.component.ts @@ -15,7 +15,8 @@ import { Output, Renderer2, TemplateRef, - ViewChild, ViewEncapsulation + ViewChild, + ViewEncapsulation } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Direction, IgxSlideComponentBase } from '../../carousel/carousel-base'; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss index 58e80ffb69a..94282c576cc 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/_base.scss @@ -4,7 +4,7 @@ @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/typography' as *; @use 'styles/themes/standalone' as *; -@use './light/tokens' as *; +@use '../../themes/light/tokens' as *; $theme: $material; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss deleted file mode 100644 index 24e23a42e85..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$tokens: meta.module-variables(tokens); -@include themes(igx-step, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss deleted file mode 100644 index 1caebf64811..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/dark/_tokens.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/dark/stepper' as *; - -$base: digest-schema($base-stepper); -$material: digest-schema($dark-material-stepper); -$bootstrap: digest-schema($dark-bootstrap-stepper); -$fluent: digest-schema($dark-fluent-stepper); -$indigo: digest-schema($dark-indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss deleted file mode 100644 index c8ac3352475..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$tokens: meta.module-variables(tokens); -@include themes(igx-step, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss deleted file mode 100644 index b7fddea3c31..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/light/_tokens.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/stepper' as *; - -$base: digest-schema($light-stepper); -$material: digest-schema($material-stepper); -$bootstrap: digest-schema($bootstrap-stepper); -$fluent: digest-schema($fluent-stepper); -$indigo: digest-schema($indigo-stepper); diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss index 61669d33e4e..a33b64cd354 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/bootstrap.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/bem' as *; @use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; +@use '../../../themes/light/tokens' as *; $_theme: $bootstrap; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss index 20a3fafc332..31dd16ee9aa 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/fluent.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/bem' as *; @use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; +@use '../../../themes/light/tokens' as *; $_theme: $fluent; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss index ff383907da7..a010f103ed8 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/indigo.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/bem' as *; @use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; +@use '../../../themes/light/tokens' as *; $_theme: $indigo; diff --git a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss index e2fa7a30eed..8c6599363c2 100644 --- a/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss +++ b/projects/igniteui-angular/src/lib/stepper/step/themes/shared/material.scss @@ -1,7 +1,7 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/bem' as *; @use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; +@use '../../../themes/light/tokens' as *; $_theme: $material; From a493c0c376c2237256f984191aede9c777fcd4e3 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 27 Mar 2025 09:42:27 +0200 Subject: [PATCH 7/7] spec(stepper): remove fdescribe --- .../src/lib/stepper/stepper.component.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts index 26966ab8bd2..a763a806de7 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts @@ -27,7 +27,6 @@ const STEPPER_CLASS = 'igx-stepper'; const STEPPER_HEADER = 'igx-stepper__header'; const STEPPER_BODY = 'igx-stepper__body'; const STEP_TAG = 'IGX-STEP'; -const STEP_HEADER = 'igx-step__header'; const STEP_INDICATOR_CLASS = 'igx-step__indicator'; const STEP_TITLE_CLASS = 'igx-step__title'; const STEP_SUBTITLE_CLASS = 'igx-step__subtitle'; @@ -74,7 +73,7 @@ const testAnimationBehvior = ( activeChangeSpy.calls.reset(); }; -fdescribe('Rendering Tests', () => { +describe('Rendering Tests', () => { configureTestSuite(); let fix: ComponentFixture; let stepper: IgxStepperComponent; @@ -916,7 +915,7 @@ fdescribe('Rendering Tests', () => { }); }); -fdescribe('Stepper service unit tests', () => { +describe('Stepper service unit tests', () => { configureTestSuite(); let stepperService: IgxStepperService;