Fluent: speed dial action buttons redesign (#25847)

packages/devextreme/js/ui/speed_dial_action/speed_dial_main_item.js

@@ -6,7 +6,7 @@ import eventsEngine from '../../events/core/events_engine';
 import errors from '../widget/ui.errors';
 import swatchContainer from '../widget/swatch_container';
 import SpeedDialItem from './speed_dial_item';
-import { isCompact, isMaterialBased } from '../themes';
+import { isCompact, isMaterial, isFluent } from '../themes';
 
 const { getSwatchContainer } = swatchContainer;
 
@@ -105,7 +105,27 @@ class SpeedDialMainItem extends SpeedDialItem {
         return super._defaultOptionsRules().concat([
             {
                 device() {
-                    return isMaterialBased() && !isCompact();
+                    return isFluent() && !isCompact();
+                },
+                options: {
+                    indent: 60,
+                    childIndent: 60,
+                    childOffset: 0
+                }
+            },
+            {
+                device() {
+                    return isFluent() && isCompact();
+                },
+                options: {
+                    indent: 48,
+                    childIndent: 48,
+                    childOffset: 0
+                }
+            },
+            {
+                device() {
+                    return isMaterial() && !isCompact();
                 },
                 options: {
                     indent: 72,
@@ -115,7 +135,7 @@ class SpeedDialMainItem extends SpeedDialItem {
             },
             {
                 device() {
-                    return isMaterialBased() && isCompact();
+                    return isMaterial() && isCompact();
                 },
                 options: {
                     indent: 58,

packages/devextreme/scss/widgets/fluent/speedDialAction/_colors.scss

@@ -2,28 +2,15 @@
 @use "../sizes" as *;
 @use "../colors" as *;
 @use "../overlay/colors" as *;
+@use "../button/colors" as *;
 
 // adduse
 
-
-$speed-dial-action-bg: null !default;
-$speed-dial-action-hover-bg: null !default;
-$speed-dial-action-active-bg: null !default;
 $speed-dial-action-color: $base-text-color !default;
-$speed-dial-action-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2) !default;
-$speed-dial-action-label-shadow: 0 2px 6px rgba(0, 0, 0, 0.16) !default;
+$speed-dial-action-shadow: 0 2px 6px 0 color.change($base-shadow-color, $alpha: 0.2) !default;
+$speed-dial-action-label-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.16) !default;
 $speed-dial-action-shading-color: $overlay-shader-bg !default;
 
-
-@if $mode == "light" {
-  $speed-dial-action-bg: $base-bg !default;
-  $speed-dial-action-hover-bg: darken($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: darken($speed-dial-action-bg, 36%) !default;
-}
-
-@if $mode == "dark" {
-  $speed-dial-action-bg: color.change($base-bg, $alpha: 1) !default;
-  $speed-dial-action-hover-bg: lighten($speed-dial-action-bg, 8%) !default;
-  $speed-dial-action-active-bg: lighten($speed-dial-action-bg, 36%) !default;
-}
-
+$speed-dial-action-bg: $button-normal-bg !default;
+$speed-dial-action-hover-bg: $button-normal-hover-bg !default;
+$speed-dial-action-active-bg: $button-normal-active-bg !default;

packages/devextreme/scss/widgets/fluent/speedDialAction/_index.scss

@@ -9,7 +9,6 @@
 // adduse
 @use "../overlay";
 
-$fluent-fa-button-size: 40px;
 $fluent-fa-button-label-offset: 16px;
 $fluent-fa-button-label-padding: 4px 8px;
 
@@ -37,10 +36,16 @@ $fluent-fa-button-label-padding: 4px 8px;
       .dx-fa-button-label {
         padding: $fluent-main-fa-button-label-padding;
         font-size: $fluent-base-font-size;
-        text-transform: uppercase;
-        letter-spacing: 1.25px;
         font-weight: 500;
       }
     }
+
+    &.dx-fa-button-with-label {
+      .dx-overlay-content {
+        .dx-fa-button-icon {
+          padding-inline-start: $fluent-main-fa-button-horizontal-padding;
+        }
+      }
+    }
   }
 }

packages/devextreme/scss/widgets/fluent/speedDialAction/_sizes.scss

@@ -3,18 +3,20 @@
 // adduse
 
 $fluent-main-fa-button-label-padding: null !default;
+$fluent-main-fa-button-horizontal-padding: null !default;
 $fluent-main-fa-button-size: null !default;
-
-$fluent-fa-button-label-font-size: null !default;
+$fluent-fa-button-size: null !default;
 
 @if $size == "default" {
-  $fluent-main-fa-button-size: 56px !default;
-  $fluent-main-fa-button-label-padding: 0 24px 0 8px;
-  $fluent-fa-button-label-font-size: 14px;
+  $fluent-main-fa-button-size: 44px !default;
+  $fluent-fa-button-size: 44px !default;
+  $fluent-main-fa-button-horizontal-padding: 16px;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 8px;
 }
 
 @else if $size == "compact" {
-  $fluent-main-fa-button-size: 42px !default;
-  $fluent-main-fa-button-label-padding: 0 20px 0 8px;
-  $fluent-fa-button-label-font-size: 12px;
+  $fluent-main-fa-button-size: 32px !default;
+  $fluent-fa-button-size: 32px !default;
+  $fluent-main-fa-button-horizontal-padding: 12px;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 4px;
 }