Fluent: new design for Slider & RangeSlider & Progressbar components (#…

…25567)
DevExpress · Sep 11, 2023 · 76bf213 · 76bf213
1 parent 9ac8579
commit 76bf213
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 154 deletions.
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
@@ -322,6 +322,10 @@ export function isMaterial(themeName) {
     return isTheme('material', themeName);
 }
 
+export function isFluent(themeName) {
+    return isTheme('fluent', themeName);
+}
+
 export function isGeneric(themeName) {
     return isTheme('generic', themeName);
 }

diff --git a/packages/devextreme/scss/widgets/base/_rangeSlider.scss b/packages/devextreme/scss/widgets/base/_rangeSlider.scss
@@ -1,10 +1,4 @@
 .dx-rangeslider-start-handle {
   top: 0;
-  right: auto;
-  left: 0;
-}
-
-.dx-rtl .dx-rangeslider-start-handle {
-  right: 0;
-  left: auto;
+  inset-inline-start: 0;
 }
diff --git a/packages/devextreme/scss/widgets/base/_slider.scss b/packages/devextreme/scss/widgets/base/_slider.scss
@@ -10,13 +10,7 @@ $slider-tooltip-arrow-height: 7px;
   font-size: 0.85em;
 
   &:last-child {
-    right: 0;
-    left: auto;
-  }
-
-  .dx-rtl &:last-child {
-    left: 0;
-    right: auto;
+    inset-inline-end: 0;
   }
 }
 
@@ -71,7 +65,7 @@ $slider-tooltip-arrow-height: 7px;
 .dx-slider-handle {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   pointer-events: auto;
   -webkit-user-drag: none;
 
@@ -86,11 +80,6 @@ $slider-tooltip-arrow-height: 7px;
   }
 }
 
-.dx-rtl .dx-slider-handle {
-  right: auto;
-  left: 0;
-}
-
 .dx-slider-tooltip-visible-on-hover {
   .dx-tooltip {
     visibility: hidden;

diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -52,6 +52,7 @@ $base-spin-icon-color: null !default;
 $base-bg: null !default;
 $base-bg-hover: null !default;
 $base-neutral-background: null !default;
+$base-neutral-background6: null !default;
 $base-neutral-foreground: null !default;
 $base-neutral-background-hover: null !default;
 
@@ -147,6 +148,7 @@ $scrollview-pulldown-path: null !default;
   $base-bg: rgba(255, 255, 255, 1) !default; // #ffffff
   $base-bg-hover: rgba(245, 245, 245, 1) !default; // #f5f5f5
   $base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-neutral-background6: rgba(230, 230, 230, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(235, 235, 235, 1) !default; // #ebebeb
   $base-border-color: rgba(209, 209, 209, 1) !default; // d1d1d1
   $base-border-color-hover: darken($base-border-color, 3.92) !default; // c7c7c7
@@ -187,6 +189,7 @@ $scrollview-pulldown-path: null !default;
   $base-bg: rgba(41, 41, 41, 1) !default; // #292929
   $base-bg-hover: rgba(61, 61, 61, 1) !default; // #3d3d3d
   $base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
+  $base-neutral-background6: rgba(51, 51, 51, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
   $base-border-color: rgba(102, 102, 102, 1) !default; // #666666
   $base-border-color-hover: lighten( $base-border-color, 5.88) !default; // #757575

diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
@@ -9,15 +9,21 @@
 * $name 10. Bar background color
 * $type color
 */
-$progressbar-bg: color.change($base-accent, $alpha: 0.3) !default;
+$progressbar-bg: $base-neutral-background6 !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
 $progressbar-range-bg: $base-accent !default;
-$progressbar-range-disabled-bg: color.change($base-accent, $alpha: 0.6) !default;
+$progressbar-container-disabled-bg: $base-neutral-background-disabled !default;
+$progressbar-range-disabled-bg: $base-foreground-disabled !default;
 $progressbar-range-indeterminate-color: $base-accent !default;
+$progressbar-range-invalid-color: $base-invalid-color !default;
+
+$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
+$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%;
+$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%;
 
 /**
 * $name 30. Label color

diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
@@ -9,47 +9,69 @@
 
 // adduse
 
-$fluent-bar-height: 4px;
-$fluent-background-width: 90%;
-$fluent-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
-
 .dx-progressbar-container {
-  height: $fluent-bar-height;
+  height: $progressbar-height;
   background-color: $progressbar-bg;
+  border-radius: $progressbar-border-radius;
 }
 
 .dx-progressbar-range {
   position: relative;
   background-color: $progressbar-range-bg;
-  margin-top: -1px;
+  border-radius: $progressbar-border-radius;
   box-sizing: content-box;
 }
 
 .dx-progressbar-animating-container {
-  height: $fluent-bar-height;
+  height: $progressbar-height;
   background-color: $progressbar-bg;
-  background-size: $fluent-background-width 5px;
+  background-size: $progressbar-indeterminate-background-width 5px;
   animation: dx-loader 2s linear infinite;
+  border-radius: $progressbar-border-radius;
 
-  @include gradient-linear($fluent-progressbar-interdeterminate-state-gradient);
+  @include gradient-linear($progressbar-interdeterminate-state-gradient);
 
   background-repeat: repeat;
 }
 
+.dx-invalid {
+  .dx-progressbar-range {
+    background-color: $progressbar-range-invalid-color;
+  }
+
+  .dx-progressbar-animating-container {
+    @include gradient-linear($progressbar-invalid-interdeterminate-state-gradient);
+
+    background-repeat: repeat;
+  }
+}
+
 .dx-state-disabled {
+  &.dx-progressbar {
+    opacity: 1;
+  }
+
+  .dx-progressbar-container {
+    background-color: $progressbar-container-disabled-bg;
+  }
+
   .dx-progressbar-range {
     background-color: $progressbar-range-disabled-bg;
   }
 
   .dx-progressbar-animating-container {
     animation: none;
-    background-position-x: math.div($fluent-background-width, 2);
+
+    @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+    background-position-x: math.div($progressbar-indeterminate-background-width, 2);
   }
 }
 
 .dx-progressbar-status {
-  padding-top: $fluent-progressbar-status-padding;
+  margin-top: $progressbar-status-height;
   color: $progressbar-label-color;
+  height: $progressbar-status-height;
 
   .dx-progressbar .dx-position-right & {
     padding-top: 0;
@@ -62,10 +84,20 @@ $fluent-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $pr
     .dx-progressbar-animating-container {
       animation: dx-loader-rtl 2s linear infinite;
 
-      @include gradient-linear($fluent-progressbar-interdeterminate-state-gradient);
+      @include gradient-linear($progressbar-interdeterminate-state-gradient);
 
       background-repeat: repeat;
     }
+
+    &.dx-state-disabled {
+      .dx-progressbar-animating-container {
+        animation: none;
+
+        @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+        background-position-x: math.div($progressbar-indeterminate-background-width, 2);
+      }
+    }
   }
 }
 

diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss
@@ -2,12 +2,16 @@
 
 // adduse
 
-$fluent-progressbar-status-padding: null !default;
+$progressbar-height: null !default;
+$progressbar-border-radius: $base-border-radius !default;
+$progressbar-status-height: 16px !default;
+$progressbar-status-margin: 2px !default;
+$progressbar-indeterminate-background-width: 90%;
 
 @if $size == "default" {
-  $fluent-progressbar-status-padding: 8px !default;
+  $progressbar-height: 4px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-progressbar-status-padding: 4px !default;
+  $progressbar-height: 2px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss b/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss
@@ -1,31 +1,14 @@
+@use "sass:math";
 @use "sass:color";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/rangeSlider";
+@use "../slider/sizes" as *;
 
 // adduse
 
-
-$fluent-slider-handle-margin: -14px;
-
 .dx-rangeslider-start-handle {
-  margin-left: $fluent-slider-handle-margin;
-}
-
-.dx-state-disabled {
-  .dx-rangeslider-start-handle {
-    margin-left: -5px;
-  }
-}
-
-.dx-rtl {
-  .dx-rangeslider-start-handle {
-    margin-right: $fluent-slider-handle-margin;
-  }
-
-  &.dx-state-disabled .dx-rangeslider-start-handle {
-    margin-right: -5px;
-  }
+  margin-inline-start: math.div(-$fluent-slider-handle-size, 2);
 }
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
@@ -9,16 +9,17 @@
 * $name 10. Slider bar background color
 * $type color
 */
-$fluent-slider-bar-bg: color.change($base-accent, $alpha: 0.24) !default;
+$fluent-slider-bar-bg: $base-neutral-foreground !default; // color.change($base-accent, $alpha: 0.24) !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
 $fluent-slider-bg: $base-accent !default;
-$fluent-slider-active: color.change($base-accent, $alpha: 0.24) !default;
-$fluent-slider-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
-$fluent-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
+$fluent-slider-bg-hover: $base-accent-hover !default;
+$fluent-slider-bg-focused: $base-accent-active !default;
+$fluent-slider-disabled-bg: $base-foreground-disabled !default;
+$fluent-slider-bar-disabled-bg: $base-neutral-background-disabled !default;
 $fluent-slider-tooltip-bg: $base-accent !default;
 
 /**