Stepper: use padding instead of margin on root container (#29540)

EugeniyKiyashko · web-flow · commit 6c0cfd9a5af1 · 2025-04-04T22:42:09.000+04:00
diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/connector/_index.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/connector/_index.scss
@@ -1,28 +1,38 @@
 .dx-stepper-connector {
   display: flex;
   position: absolute;
+  align-items: center;
+  pointer-events: none;
+}
+
+.dx-stepper-connector-horizontal {
+  width: 100%;
 
   .dx-stepper-connector-value {
-    transition: flex-grow 0.5s ease-in-out;
+    width: 0;
+    height: 100%;
   }
+}
 
-  &.dx-stepper-connector-horizontal {
-    width: 100%;
-
-    .dx-stepper-connector-value {
-      width: 0;
-      height: 100%;
-    }
-  }
+.dx-stepper-connector-vertical {
+  flex-direction: column;
+  height: 100%;
 
-  &.dx-stepper-connector-vertical {
-    height: 100%;
+  .dx-stepper-connector-container {
     flex-direction: column;
+  }
 
-    .dx-stepper-connector-value {
-      height: 0;
-      width: 100%;
-    }
+  .dx-stepper-connector-value {
+    height: 0;
+    width: 100%;
   }
 }
 
+.dx-stepper-connector-container {
+  display: flex;
+  flex: 1;
+}
+
+.dx-stepper-connector-value {
+  transition: flex-grow 0.5s ease-in-out;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/connector/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/connector/_mixins.scss
@@ -1,10 +1,11 @@
 @mixin connector(
   $connector-background-color,
   $background-color,
-  $margin-start,
+  $size,
+  $padding,
   $thickness,
 ) {
-  .dx-stepper-connector {
+  .dx-stepper-connector-container {
     background-color: $connector-background-color;
   }
 
@@ -13,12 +14,20 @@
   }
 
   .dx-stepper-connector-horizontal {
-    margin-block-start: $margin-start;
-    height: $thickness;
+    padding-inline: $padding;
+    height: $size;
+
+    .dx-stepper-connector-container {
+      height: $thickness;
+    }
   }
 
   .dx-stepper-connector-vertical {
-    margin-inline-start: $margin-start;
-    width: $thickness;
+    padding-block: $padding;
+    width: $size;
+
+    .dx-stepper-connector-container {
+      width: $thickness;
+    }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/stepper/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/stepper/_mixins.scss
@@ -1,7 +1,7 @@
 @mixin stepper(
-  $margin,
+  $padding,
 ) {
   .dx-stepper {
-    margin: $margin;
+    padding: $padding;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/stepper/_index.scss
@@ -8,12 +8,13 @@
 // adduse
 
 @include stepper(
-  $stepper-margin,
+  $stepper-padding,
 );
 @include connector(
   $stepper-connector-bg,
   $stepper-connector-value-bg,
-  $stepper-connector-margin-start,
+  $stepper-connector-size,
+  $stepper-connector-padding,
   $stepper-connector-thickness,
 );
 @include step(
diff --git a/packages/devextreme-scss/scss/widgets/fluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/stepper/_sizes.scss
@@ -1,12 +1,11 @@
-@use "sass:math";
 @use "colors" as *;
 @use "../colors" as *;
 @use "../sizes" as *;
 @use "../typography/sizes" as *;
 
 // adduse
 
-$stepper-margin: null !default;
+$stepper-padding: null !default;
 $stepper-step-min-size: null !default;
 $stepper-step-indicator-size: null !default;
 $stepper-step-content-row-gap: null !default;
@@ -18,20 +17,21 @@ $stepper-step-selected-font-weight: 600 !default;
 $stepper-step-transition-duration: .4s !default;
 
 @if $size == "default" {
-  $stepper-margin: 12px !default;
+  $stepper-padding: 12px !default;
   $stepper-step-min-size: 48px !default;
   $stepper-step-indicator-size: 32px !default;
   $stepper-step-content-row-gap: 8px !default;
   $stepper-step-content-column-gap: 12px !default;
 }
 
 @else if $size == "compact" {
-  $stepper-margin: 8px !default;
+  $stepper-padding: 8px !default;
   $stepper-step-min-size: 40px !default;
   $stepper-step-indicator-size: 24px !default;
   $stepper-step-content-row-gap: 6px !default;
   $stepper-step-content-column-gap: 8px !default;
 }
 
-$stepper-connector-margin-start: math.div($stepper-step-indicator-size - $fluent-base-border-width * 2, 2) !default;
 $stepper-connector-thickness: 2px !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/generic/stepper/_index.scss
@@ -8,12 +8,13 @@
 // adduse
 
 @include stepper(
-  $stepper-margin,
+  $stepper-padding,
 );
 @include connector(
   $stepper-connector-bg,
   $stepper-connector-value-bg,
-  $stepper-connector-margin-start,
+  $stepper-connector-size,
+  $stepper-connector-padding,
   $stepper-connector-thickness,
 );
 @include step(
diff --git a/packages/devextreme-scss/scss/widgets/generic/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/stepper/_sizes.scss
@@ -1,12 +1,11 @@
-@use "sass:math";
 @use "colors" as *;
 @use "../colors" as *;
 @use "../sizes" as *;
 @use "../typography/sizes" as *;
 
 // adduse
 
-$stepper-margin: null !default;
+$stepper-padding: null !default;
 $stepper-step-min-size: null !default;
 $stepper-step-indicator-size: null !default;
 $stepper-step-content-row-gap: null !default;
@@ -18,20 +17,21 @@ $stepper-step-selected-font-weight: 400 !default;
 $stepper-step-transition-duration: .2s !default;
 
 @if $size == "default" {
-  $stepper-margin: 12px !default;
+  $stepper-padding: 12px !default;
   $stepper-step-min-size: 52px !default;
   $stepper-step-indicator-size: 36px !default;
   $stepper-step-content-row-gap: 8px !default;
   $stepper-step-content-column-gap: 12px !default;
 }
 
 @else if $size == "compact" {
-  $stepper-margin: 8px !default;
+  $stepper-padding: 8px !default;
   $stepper-step-min-size: 42px !default;
   $stepper-step-indicator-size: 26px !default;
   $stepper-step-content-row-gap: 6px !default;
   $stepper-step-content-column-gap: 8px !default;
 }
 
-$stepper-connector-margin-start: math.div($stepper-step-indicator-size - $generic-base-border-width * 2, 2) !default;
 $stepper-connector-thickness: 1px !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/material/stepper/_index.scss
@@ -8,12 +8,13 @@
 // adduse
 
 @include stepper(
-  $stepper-margin,
+  $stepper-padding,
 );
 @include connector(
   $stepper-connector-bg,
   $stepper-connector-value-bg,
-  $stepper-connector-margin-start,
+  $stepper-connector-size,
+  $stepper-connector-padding,
   $stepper-connector-thickness,
 );
 @include step(
diff --git a/packages/devextreme-scss/scss/widgets/material/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/stepper/_sizes.scss
@@ -1,12 +1,11 @@
-@use "sass:math";
 @use "colors" as *;
 @use "../colors" as *;
 @use "../sizes" as *;
 @use "../typography/sizes" as *;
 
 // adduse
 
-$stepper-margin: null !default;
+$stepper-padding: null !default;
 $stepper-step-min-size: null !default;
 $stepper-step-indicator-size: null !default;
 $stepper-step-content-row-gap: null !default;
@@ -18,20 +17,21 @@ $stepper-step-selected-font-weight: 500 !default;
 $stepper-step-transition-duration: .2s !default;
 
 @if $size == "default" {
-  $stepper-margin: 12px !default;
+  $stepper-padding: 12px !default;
   $stepper-step-min-size: 46px !default;
   $stepper-step-indicator-size: 30px !default;
   $stepper-step-content-row-gap: 8px !default;
   $stepper-step-content-column-gap: 12px !default;
 }
 
 @else if $size == "compact" {
-  $stepper-margin: 8px !default;
+  $stepper-padding: 8px !default;
   $stepper-step-min-size: 40px !default;
   $stepper-step-indicator-size: 24px !default;
   $stepper-step-content-row-gap: 6px !default;
   $stepper-step-content-column-gap: 8px !default;
 }
 
-$stepper-connector-margin-start: math.div($stepper-step-indicator-size - $material-base-border-width * 2, 2) !default;
 $stepper-connector-thickness: 1px !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;
diff --git a/packages/devextreme/js/__internal/ui/stepper/connector.ts b/packages/devextreme/js/__internal/ui/stepper/connector.ts
@@ -11,6 +11,7 @@ import { ORIENTATION } from './stepper';
 export const STEPPER_CONNECTOR_CLASS = 'dx-stepper-connector';
 export const STEPPER_CONNECTOR_HORIZONTAL_ORIENTATION_CLASS = 'dx-stepper-connector-horizontal';
 export const STEPPER_CONNECTOR_VERTICAL_ORIENTATION_CLASS = 'dx-stepper-connector-vertical';
+export const STEPPER_CONNECTOR_CONTAINER_CLASS = 'dx-stepper-connector-container';
 export const STEPPER_CONNECTOR_VALUE_CLASS = 'dx-stepper-connector-value';
 
 const PERCENT_UNIT = '%';
@@ -91,9 +92,19 @@ class Connector extends DOMComponent<Connector, ConnectorProperties> {
   }
 
   _renderContent(): void {
+    const $container = $('<div>')
+      .addClass(STEPPER_CONNECTOR_CONTAINER_CLASS)
+      .appendTo(this.element());
+
     $('<div>')
       .addClass(STEPPER_CONNECTOR_VALUE_CLASS)
-      .appendTo(this.element());
+      .appendTo($container);
+  }
+
+  _clean(): void {
+    super._clean();
+
+    this.$element().empty();
   }
 
   _optionChanged(args: OptionChanged<ConnectorProperties>): void {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.connector.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.connector.markup.tests.js
@@ -4,6 +4,7 @@ import Connector, {
     STEPPER_CONNECTOR_CLASS,
     STEPPER_CONNECTOR_HORIZONTAL_ORIENTATION_CLASS,
     STEPPER_CONNECTOR_VERTICAL_ORIENTATION_CLASS,
+    STEPPER_CONNECTOR_CONTAINER_CLASS,
     STEPPER_CONNECTOR_VALUE_CLASS,
 } from '__internal/ui/stepper/connector';
 
@@ -31,6 +32,10 @@ const moduleConfig = {
             init(options, selector);
         };
 
+        this.getContainer = () => {
+            return this.$element.find(`.${STEPPER_CONNECTOR_CONTAINER_CLASS}`);
+        };
+
         this.getConnectorValue = () => {
             return this.$element.find(`.${STEPPER_CONNECTOR_VALUE_CLASS}`);
         };
@@ -67,8 +72,13 @@ QUnit.module('Stepper connector markup', moduleConfig, () => {
         assert.strictEqual(this.$element.hasClass(STEPPER_CONNECTOR_VERTICAL_ORIENTATION_CLASS), false);
     });
 
-    QUnit.test(`container value element should be rendered inside root container with the ${STEPPER_CONNECTOR_VALUE_CLASS} class`, function(assert) {
+    QUnit.test(`connector content element should be rendered inside root container with the ${STEPPER_CONNECTOR_CONTAINER_CLASS} class`, function(assert) {
+        assert.strictEqual(this.getContainer().length, 1, 'content element was rendered');
+        assert.strictEqual(this.getContainer().parent().is(this.$element), true, 'content element is rendered inside root container');
+    });
+
+    QUnit.test(`connector value element should be rendered inside content with the ${STEPPER_CONNECTOR_VALUE_CLASS} class`, function(assert) {
         assert.strictEqual(this.getConnectorValue().length, 1, 'value element was rendered');
-        assert.strictEqual(this.getConnectorValue().parent().is(this.$element), true, 'value element is rendered inside root container');
+        assert.strictEqual(this.getConnectorValue().parent().is(this.getContainer()), true, 'value element is rendered inside content');
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.connector.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.connector.tests.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 
 import Connector, {
     STEPPER_CONNECTOR_VALUE_CLASS,
+    STEPPER_CONNECTOR_CONTAINER_CLASS,
 } from '__internal/ui/stepper/connector';
 
 import 'generic_light.css!';
@@ -43,6 +44,10 @@ const moduleConfig = {
             init(options, selector);
         };
 
+        this.getContainer = () => {
+            return this.$element.find(`.${STEPPER_CONNECTOR_CONTAINER_CLASS}`);
+        };
+
         this.getConnectorValue = () => {
             return this.$element.find(`.${STEPPER_CONNECTOR_VALUE_CLASS}`);
         };
@@ -81,13 +86,13 @@ QUnit.module('Size option', moduleConfig, () => {
                 size: 75,
             });
 
-            assert.strictEqual(this.$element.css(dimension), '300px');
-            assert.strictEqual(this.$element.css(newDimension), '1px');
+            assert.strictEqual(this.getContainer().css(dimension), '300px');
+            assert.strictEqual(this.getContainer().css(newDimension), '1px');
 
             this.instance.option('orientation', newOrientation);
 
-            assert.strictEqual(this.$element.css(dimension), '1px');
-            assert.strictEqual(this.$element.css(newDimension), '300px');
+            assert.strictEqual(this.getContainer().css(dimension), '1px');
+            assert.strictEqual(this.getContainer().css(newDimension), '300px');
         });
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.tests.js
@@ -304,6 +304,14 @@ QUnit.module('Connector integration', moduleConfig, () => {
 
         assert.deepEqual(this.getConnector().option('orientation'), 'vertical', 'orientation value is passed');
     });
+
+    ['rtlEnabled', 'disabled', 'templatesRenderAsynchronously'].forEach((optionName) => {
+        QUnit.test(`connector content should not be duplicated after changing synchronizable ${optionName} options`, function(assert) {
+            this.instance.option(optionName, true);
+
+            assert.deepEqual(this.getConnector().$element().children().length, 1, 'content is not duplicated');
+        });
+    });
 });
 
 QUnit.module('Focus', moduleConfig, () => {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@mixin stepper(`
`2`		`- $margin,`
	`2`	`+ $padding,`
`3`	`3`	`) {`
`4`	`4`	`.dx-stepper {`
`5`		`- margin: $margin;`
	`5`	`+ padding: $padding;`
`6`	`6`	`}`
`7`	`7`	`}`