Stepper: handle invalid state class (#29311)

EugeniyKiyashko · web-flow · commit e2aafe09c8f0 · 2025-03-17T13:19:32.000+04:00
diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss
@@ -44,7 +44,7 @@
         background-color: $background-color-hover;
       }
 
-      &.dx-state-invalid {
+      &.dx-step-invalid {
         .dx-step-indicator {
           color: $invalid-color-hover;
         }
@@ -53,7 +53,7 @@
           color: $invalid-color-hover;
         }
 
-        &.dx-state-selected {
+        &.dx-step-selected {
           .dx-step-indicator {
             color: $color-selected;
           }
@@ -74,7 +74,7 @@
       }
     }
 
-    &.dx-state-invalid {
+    &.dx-step-invalid {
       .dx-step-indicator {
         color: $invalid-color;
       }
@@ -100,7 +100,7 @@
         box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-selected, 0 0 0 8px $background-color;
       }
 
-      &.dx-state-invalid {
+      &.dx-step-invalid {
         .dx-step-title {
           color: $invalid-color;
         }
@@ -118,7 +118,7 @@
         box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
       }
 
-      &.dx-state-invalid {
+      &.dx-step-invalid {
         .dx-step-content::before {
           box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;
         }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/stepper/_colors.scss
@@ -18,7 +18,7 @@ $stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
 $stepper-step-border-color: $base-border-color !default;
 $stepper-step-hover-border-color: $base-border-color-hover !default;
 
-$stepper-step-focused-border-color: $base-text-color !default;
+$stepper-step-focused-border-color: $base-accent !default;
 $stepper-step-selected-border-color: $base-accent !default;
 
 $stepper-connector-bg: $base-border-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss
@@ -18,7 +18,7 @@ $stepper-step-invalid-hover-bg: $button-danger-contained-bg-hover !default;
 $stepper-step-border-color: $base-border-color !default;
 $stepper-step-hover-border-color: $base-border-color !default;
 
-$stepper-step-focused-border-color: $base-text-color !default;
+$stepper-step-focused-border-color: $base-accent !default;
 $stepper-step-selected-border-color: $base-accent !default;
 
 $stepper-connector-bg: $base-border-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss
@@ -18,7 +18,7 @@ $stepper-step-invalid-hover-bg: $button-danger-hover-bg !default;
 $stepper-step-border-color: $base-border-color !default;
 $stepper-step-hover-border-color: null !default;
 
-$stepper-step-focused-border-color: $base-text-color !default;
+$stepper-step-focused-border-color: $base-accent !default;
 $stepper-step-selected-border-color: $base-accent !default;
 
 $stepper-connector-bg: $base-border-color !default;
diff --git a/packages/devextreme/js/__internal/ui/stepper/stepper.ts b/packages/devextreme/js/__internal/ui/stepper/stepper.ts
@@ -5,6 +5,7 @@ import $, { type dxElementWrapper } from '@js/core/renderer';
 import { Deferred } from '@js/core/utils/deferred';
 import { isDefined } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
+import type { Item } from '@js/ui/stepper';
 import { BindableTemplate } from '@ts/core/templates/m_bindable_template';
 import type { Template } from '@ts/core/templates/m_template';
 import { getImageContainer } from '@ts/core/utils/m_icon';
@@ -40,6 +41,7 @@ export const ORIENTATION: Record<string, Orientation> = {
 export interface StepperProperties extends CollectionWidgetEditProperties<Stepper> {
   orientation?: Orientation;
   linear?: boolean;
+  isValidExpr?: (data: Item) => boolean | undefined;
 }
 
 class Stepper extends CollectionWidgetAsync<StepperProperties> {
@@ -82,7 +84,7 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     this._templateManager.addDefaultTemplates({
       item: new BindableTemplate(($container: dxElementWrapper, data: StepperItemProperties) => {
         this._prepareDefaultItemTemplate(data, $container);
-      }, ['text', 'icon', 'title'], this.option('integrationOptions.watchMethod')),
+      }, ['text', 'icon', 'title', 'isValid'], this.option('integrationOptions.watchMethod')),
     });
   }
 
@@ -113,6 +115,11 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
       focusStateEnabled: true,
       loopItemFocus: false,
       selectionRequired: true,
+      isValidExpr(data): boolean | undefined {
+        // @ts-expect-error ts-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return data ? data.isValid : undefined;
+      },
     };
   }
 
@@ -260,6 +267,9 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
         break;
       case 'linear':
         break;
+      case 'isValidExpr':
+        this._invalidate();
+        break;
       default:
         super._optionChanged(args);
     }
diff --git a/packages/devextreme/js/__internal/ui/stepper/stepper_item.ts b/packages/devextreme/js/__internal/ui/stepper/stepper_item.ts
@@ -3,11 +3,28 @@ import type {
 } from '@js/ui/collection/ui.collection_widget.base';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
+export const STEP_INVALID_CLASS = 'dx-step-invalid';
+
 export interface StepperItemProperties extends CollectionWidgetItemProperties {
   icon?: string;
   title?: string;
+  isValid?: boolean;
 }
 
-class StepperItem extends CollectionWidgetItem {}
+class StepperItem extends CollectionWidgetItem<StepperItemProperties> {
+  _renderWatchers(): void {
+    super._renderWatchers();
+
+    this._startWatcher('isValid', this._renderValidState.bind(this));
+  }
+
+  _renderValidState(
+    value: boolean | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    oldValue?: boolean | undefined,
+  ): void {
+    this._$element.toggleClass(STEP_INVALID_CLASS, value !== undefined && !value);
+  }
+}
 
 export default StepperItem;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.markup.tests.js
@@ -13,6 +13,10 @@ import {
     STEP_TITLE_CLASS,
 } from '__internal/ui/stepper/stepper';
 
+import {
+    STEP_INVALID_CLASS,
+} from '__internal/ui/stepper/stepper_item';
+
 const STEP_CONTENT_CLASS = 'dx-step-content';
 const ICON_CLASS = 'dx-icon';
 
@@ -200,3 +204,36 @@ QUnit.module('Render', moduleConfig, () => {
         assert.strictEqual(this.getStepList().children().length, 5, 'steps are rendered in the list container');
     });
 });
+
+QUnit.module('Step.isValid', moduleConfig, () => {
+    QUnit.test(`step should have the ${STEP_INVALID_CLASS} class in invalid state`, function(assert) {
+        this.reinit({
+            items: [{}, { isValid: true }, { isValid: false }, { isValid: undefined }]
+        });
+
+        assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), false, 'isValid is not declared');
+        assert.strictEqual(this.getItems().eq(1).hasClass(STEP_INVALID_CLASS), false, 'isValid has true value');
+        assert.strictEqual(this.getItems().eq(2).hasClass(STEP_INVALID_CLASS), true, 'isValid has false value');
+        assert.strictEqual(this.getItems().eq(3).hasClass(STEP_INVALID_CLASS), false, 'isValid has undefined value');
+    });
+
+    QUnit.test(`step should update the ${STEP_INVALID_CLASS} class after change isValid option at runtime`, function(assert) {
+        this.reinit({
+            items: [{ isValid: false }]
+        });
+
+        assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), true, `${STEP_INVALID_CLASS} is added`);
+
+        this.instance.option('items[0].isValid', true);
+
+        assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), false, `${STEP_INVALID_CLASS} is removed`);
+
+        this.instance.option('items[0].isValid', false);
+
+        assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), true, `${STEP_INVALID_CLASS} is added`);
+
+        this.instance.option('items[0].isValid', undefined);
+
+        assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), false, `${STEP_INVALID_CLASS} is removed`);
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@`
`44`	`44`	`background-color: $background-color-hover;`
`45`	`45`	`}`
`46`	`46`
`47`		`- &.dx-state-invalid {`
	`47`	`+ &.dx-step-invalid {`
`48`	`48`	`.dx-step-indicator {`
`49`	`49`	`color: $invalid-color-hover;`
`50`	`50`	`}`
`@@ -53,7 +53,7 @@`
`53`	`53`	`color: $invalid-color-hover;`
`54`	`54`	`}`
`55`	`55`
`56`		`- &.dx-state-selected {`
	`56`	`+ &.dx-step-selected {`
`57`	`57`	`.dx-step-indicator {`
`58`	`58`	`color: $color-selected;`
`59`	`59`	`}`
`@@ -74,7 +74,7 @@`
`74`	`74`	`}`
`75`	`75`	`}`
`76`	`76`
`77`		`- &.dx-state-invalid {`
	`77`	`+ &.dx-step-invalid {`
`78`	`78`	`.dx-step-indicator {`
`79`	`79`	`color: $invalid-color;`
`80`	`80`	`}`
`@@ -100,7 +100,7 @@`
`100`	`100`	`box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-selected, 0 0 0 8px $background-color;`
`101`	`101`	`}`
`102`	`102`
`103`		`- &.dx-state-invalid {`
	`103`	`+ &.dx-step-invalid {`
`104`	`104`	`.dx-step-title {`
`105`	`105`	`color: $invalid-color;`
`106`	`106`	`}`
`@@ -118,7 +118,7 @@`
`118`	`118`	`box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;`
`119`	`119`	`}`
`120`	`120`
`121`		`- &.dx-state-invalid {`
	`121`	`+ &.dx-step-invalid {`
`122`	`122`	`.dx-step-content::before {`
`123`	`123`	`box-shadow: 0 0 0 2px $background-color, 0 0 0 4px $border-color-focused, 0 0 0 8px $background-color;`
`124`	`124`	`}`