diff --git a/packages/devextreme/js/ui/speed_dial_action/speed_dial_main_item.js b/packages/devextreme/js/ui/speed_dial_action/speed_dial_main_item.js index 027594d945d9..5c80ed6071cc 100644 --- a/packages/devextreme/js/ui/speed_dial_action/speed_dial_main_item.js +++ b/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, diff --git a/packages/devextreme/scss/widgets/fluent/speedDialAction/_colors.scss b/packages/devextreme/scss/widgets/fluent/speedDialAction/_colors.scss index 546c7af59985..635ec575c479 100644 --- a/packages/devextreme/scss/widgets/fluent/speedDialAction/_colors.scss +++ b/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; diff --git a/packages/devextreme/scss/widgets/fluent/speedDialAction/_index.scss b/packages/devextreme/scss/widgets/fluent/speedDialAction/_index.scss index b0ce79119cfd..3405d0583b4b 100644 --- a/packages/devextreme/scss/widgets/fluent/speedDialAction/_index.scss +++ b/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; + } + } + } } } diff --git a/packages/devextreme/scss/widgets/fluent/speedDialAction/_sizes.scss b/packages/devextreme/scss/widgets/fluent/speedDialAction/_sizes.scss index 8417940c948c..ea4e78592f90 100644 --- a/packages/devextreme/scss/widgets/fluent/speedDialAction/_sizes.scss +++ b/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; } diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light).png index 2bbafd99da5f..bbde6eb9d044 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light-compact).png index e442789e8b3c..fa0be3e2ee3e 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light).png index 4a1acb32ec72..e426b4fcf702 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light-compact).png index a612c3122366..9b5449bca2fd 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light).png index 08079acb10ba..6f6485ecf33f 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light-compact).png index 67e4ca3c0557..86fa3c551018 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light).png index 3cd2ce56598e..4c14a82108a6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light-compact).png index 1e74a97ffcb5..8ff888b4e1e3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-blue-light).png index f6b93975a74f..f090556d7d97 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-blue-light).png index 38ad28258d4d..e065ada5b0e6 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-blue-light).png index 8760ac3cbad4..9ab2b3d32102 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light).png index 66d253839f3a..55056eb377ac 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light-compact).png index 8a38be902997..65c02fec682e 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light).png index 5d97b311b0d1..f47b69e0a7ee 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light-compact).png index a6d7c9ef2774..cbb5b919abe3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light).png index 080d287f4aa3..aa8b1d6cdda2 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light-compact).png index 6c322ede9495..354f9ab86115 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light).png index 8fa9ae904ad0..f7cdea0ab3d0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light-compact).png index 136a5d6b6424..28788c44235e 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light).png index 74574b8f123f..a813c97c8c40 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light-compact).png index dd7a4addc202..22505aa7143e 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/button/etalons/FAB with two speed dial action buttons (fluent-blue-light-compact).png differ