Fluent: List redesign (#25663)

DevExpress · Sep 25, 2023 · 80111d5 · 80111d5
1 parent b9a53b7
commit 80111d5
Show file tree

Hide file tree

Showing 30 changed files with 340 additions and 427 deletions.
diff --git a/packages/devextreme/js/ui/date_range_box/ui.date_range_box.js b/packages/devextreme/js/ui/date_range_box/ui.date_range_box.js
@@ -6,7 +6,7 @@ import { getImageContainer } from '../../core/utils/icon';
 import config from '../../core/config';
 import devices from '../../core/devices';
 import messageLocalization from '../../localization/message';
-import { current, isMaterialBased } from '../themes';
+import { current, isMaterial, isMaterialBased } from '../themes';
 import Editor from '../editor/editor';
 import MultiselectDateBox from './ui.multiselect_date_box';
 import TextEditorButtonCollection from '../text_box/texteditor_button_collection/index';
@@ -129,10 +129,18 @@ class DateRangeBox extends Editor {
                     return isMaterialBased(themeName);
                 },
                 options: {
-                    stylingMode: config().editorStylingMode || 'filled',
                     labelMode: 'floating'
                 }
             },
+            {
+                device: function() {
+                    const themeName = current();
+                    return isMaterial(themeName);
+                },
+                options: {
+                    stylingMode: config().editorStylingMode || 'filled',
+                }
+            },
             {
                 device: function() {
                     const realDevice = devices.real();

diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.button.js b/packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.button.js
@@ -5,6 +5,7 @@ import Button from '../button';
 import messageLocalization from '../../localization/message';
 import { register as registerDecorator } from './ui.list.edit.decorator_registry';
 import SwitchableEditDecorator from './ui.list.edit.decorator.switchable';
+import { isMaterialBased } from '../themes';
 
 const SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS = 'dx-list-switchable-delete-button-container';
 const SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS = 'dx-list-switchable-delete-button-wrapper';
@@ -26,6 +27,7 @@ const SwitchableButtonEditDecorator = SwitchableEditDecorator.inherit({
         this._list._createComponent($button, Button, {
             text: messageLocalization.format('dxListEditDecorator-delete'),
             type: 'danger',
+            stylingMode: isMaterialBased() ? 'text' : 'contained',
             onClick: (function(e) {
                 this._deleteItem();
                 e.event.stopPropagation();

diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.base.js b/packages/devextreme/js/ui/text_box/ui.text_editor.base.js
@@ -5,7 +5,7 @@ import { focused } from '../widget/selectors';
 import { isDefined } from '../../core/utils/type';
 import { extend } from '../../core/utils/extend';
 import { each } from '../../core/utils/iterator';
-import { current, isMaterialBased } from '../themes';
+import { current, isMaterial, isMaterialBased } from '../themes';
 import devices from '../../core/devices';
 import Editor from '../editor/editor';
 import { addNamespace, normalizeKeyName } from '../../events/utils/index';
@@ -150,10 +150,18 @@ const TextEditorBase = Editor.inherit({
                     return isMaterialBased(themeName);
                 },
                 options: {
-                    stylingMode: config().editorStylingMode || 'filled',
                     labelMode: 'floating'
                 }
-            }
+            },
+            {
+                device: function() {
+                    const themeName = current();
+                    return isMaterial(themeName);
+                },
+                options: {
+                    stylingMode: config().editorStylingMode || 'filled',
+                }
+            },
         ]);
     },
 

diff --git a/packages/devextreme/scss/widgets/base/_badge.scss b/packages/devextreme/scss/widgets/base/_badge.scss
@@ -1,8 +1 @@
 // adduse
-
-.dx-badge {
-  padding: 0 5px;
-  border-radius: 14px;
-  color: white;
-  font-size: 13px;
-}
diff --git a/packages/devextreme/scss/widgets/base/list/_index.scss b/packages/devextreme/scss/widgets/base/list/_index.scss
@@ -83,6 +83,7 @@ $list-searchbox-margin-bottom: 5px;
 .dx-list .dx-empty-message {
   @include dx-overflow();
 
+  text-align: start;
   min-height: 3em;
 }
 
@@ -91,37 +92,23 @@ $list-searchbox-margin-bottom: 5px;
   width: 20px;
   text-align: right;
   vertical-align: middle;
-  padding-right: 10px;
 }
 
 .dx-list-item-badge {
   float: right;
   position: relative;
 }
 
-.dx-list-item-chevron-container {
-  display: table-cell;
-  width: 15px;
-  vertical-align: middle;
-}
-
 .dx-list-item-icon-container {
   display: inline-block;
 }
 
 .dx-list-item-chevron {
-  height: 8px;
-  width: 8px;
-  margin-left: -6px;
-  transform: rotate(135deg);
-  border-width: 2px 0 0 2px;
-  border-style: solid;
-  opacity: 0.3;
+  transform: rotate(0);
+  opacity: 1;
 
   .dx-rtl & {
-    margin-left: auto;
-    margin-right: -6px;
-    transform: rotate(-45deg);
+    transform: rotate(180deg);
   }
 }
 
@@ -139,19 +126,11 @@ $list-searchbox-margin-bottom: 5px;
 
 .dx-list-item-before-bag,
 .dx-list-item-after-bag {
-  display: table-cell;
-  width: 0;
   height: 100%;
   vertical-align: middle;
 }
 
 .dx-list-item-before-bag {
-  .dx-list-toggle-delete-switch {
-    display: block;
-    float: left;
-    padding: 3px 0;
-  }
-
   .dx-icon-toggle-delete {
     transition: all 0.1s linear;
   }
@@ -229,7 +208,6 @@ $list-searchbox-margin-bottom: 5px;
 
 .dx-list-switchable-delete-button-inner-wrapper {
   display: table-cell;
-  padding-left: 1px;
   height: 100%;
   vertical-align: middle;
 }
@@ -313,17 +291,20 @@ $list-searchbox-margin-bottom: 5px;
   margin-bottom: $list-searchbox-margin-bottom;
 }
 
+.dx-list-select-all-checkbox {
+  float: left;
+}
+
 .dx-rtl .dx-list,
 .dx-rtl.dx-list {
-  .dx-list-item-badge-container {
-    padding-left: 10px;
-    padding-right: 0;
-  }
-
   .dx-list-item-badge {
     float: left;
   }
 
+  .dx-list-select-all-checkbox {
+    float: right;
+  }
+
   .dx-list-item-before-bag {
     .dx-list-toggle-delete-switch {
       float: right;
@@ -334,11 +315,6 @@ $list-searchbox-margin-bottom: 5px;
     }
   }
 
-  .dx-list-switchable-delete-button-inner-wrapper {
-    padding-right: 1px;
-    padding-left: 0;
-  }
-
   .dx-list-slide-item-delete-button-container {
     right: 100%;
     left: 0;

diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -84,6 +84,10 @@ $base-neutral-background2: null !default;
 $base-neutral-background2-hover: null !default;
 $base-neutral-background2-active: null !default;
 $base-neutral-background2-selected: null !default;
+$base-neutral-background3: null !default;
+$base-neutral-background3-hover: null !default;
+$base-neutral-background3-active: null !default;
+$base-neutral-background3-selected: null !default;
 $base-neutral-background4: null !default;
 $base-neutral-background4-hover: null !default;
 $base-neutral-background6: null !default;
@@ -102,7 +106,7 @@ $base-border-color-focused: null !default;
 $base-border-color-accessible: null !default;
 $base-border-color-accessible-hover: null !default;
 $base-border-color-accessible-focused: null !default;
-
+$base-neutral-border-color2: null !default;
 $base-neutral-border-color3: null !default;
 
 $base-inverted-bg: null !default;
@@ -218,14 +222,18 @@ $scrollview-pulldown-path: null !default;
   $base-neutral-background2-hover: rgba(240, 240, 240, 1) !default; // #F0F0F0
   $base-neutral-background2-active: rgba(219, 219, 219, 1) !default; // #DBDBDB
   $base-neutral-background2-selected: rgba(230, 230, 230, 1) !default; // #E6E6E6
+  $base-neutral-background3: rgba(245, 245, 245, 1) !default; // #F5F5F5
+  $base-neutral-background3-hover: rgba(235, 235, 235, 1) !default; // #EBEBEB
+  $base-neutral-background3-active: rgba(214, 214, 214, 1) !default; // #D6D6D6
+  $base-neutral-background3-selected: rgba(224, 224, 224, 1) !default; // #E0E0E0
   $base-neutral-background4: rgba(240, 240, 240, 1) !default; // #f0f0f0
   $base-neutral-background4-hover: rgba(250, 250, 250, 1) !default; // #fafafa
   $base-neutral-background6: rgba(230, 230, 230, 1) !default; // #e6e6e6
 
-  $base-bg: $base-neutral-background2 !default; // rgba(255, 255, 255, 1) !default; // #ffffff
-  $base-bg-hover: $base-neutral-background2-hover !default; // rgba(245, 245, 245, 1) !default; // #f5f5f5
-  $base-bg-selected: $base-neutral-background2-active !default; // rgba(235, 235, 235, 1) !default;// #ebebeb 
-  $base-bg-active: $base-neutral-background2-selected !default; // rgba(224, 224, 224, 1) !default; // e0e0e0
+  $base-bg: $base-neutral-background1 !default;
+  $base-bg-hover: $base-neutral-background1-hover !default;
+  $base-bg-selected: $base-neutral-background1-active !default;
+  $base-bg-active: $base-neutral-background1-selected !default;
 
   $base-foreground-inverted: rgba(71, 158, 245, 1) !default; // #479EF5
   $base-foreground-inverted-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
@@ -239,6 +247,7 @@ $scrollview-pulldown-path: null !default;
   $base-border-color-accessible-hover: rgba(87, 87, 87, 1) !default; // #575757
   $base-border-color-accessible-focused: rgba(77, 77, 77, 1) !default; // #4d4d4d
 
+  $base-neutral-border-color2: rgba(224, 224, 224, 1) !default; // #E0E0E0
   $base-neutral-border-color3: rgba(240, 240, 240, 1) !default; // #F0F0F0
 
   $base-inverted-bg: darken($base-bg, 100%) !default;
@@ -314,14 +323,19 @@ $scrollview-pulldown-path: null !default;
   $base-neutral-background2-hover: rgba(51, 51, 51, 1) !default; // #333333
   $base-neutral-background2-active: rgba(20, 20, 20, 1) !default; // #141414
   $base-neutral-background2-selected: rgba(46, 46, 46, 1) !default; // #2E2E2E
+  $base-neutral-background3: rgba(20, 20, 20, 1) !default; // #1F1F1F
+  $base-neutral-background3-hover: rgba(41, 41, 41, 1) !default; // #292929
+  $base-neutral-background3-active: rgba(10, 10, 10, 1) !default; // #0A0A0A
+  $base-neutral-background3-selected: rgba(36, 36, 36, 1) !default; // #242424
+
   $base-neutral-background4: rgba(10, 10, 10, 1) !default; // #0A0A0A
-  $base-neutral-background4-hover: rgba(31, 31, 31, 1) !default; // #1F1F1F
+  $base-neutral-background4-hover: rgb(4, 3, 3) !default; // #1F1F1F
   $base-neutral-background6: rgba(51, 51, 51, 1) !default; // #e6e6e6
 
-  $base-bg: $base-neutral-background2 !default; // rgba(41, 41, 41, 1) !default; // #292929
-  $base-bg-hover: $base-neutral-background2-hover !default; // rgba(61, 61, 61, 1) !default; // #3d3d3d
-  $base-bg-selected: rgba(46, 46, 46, 1) !default; // rgba(56, 56, 56, 1) !default;// #383838
-  $base-bg-active: $base-neutral-background2-active !default; // rgba(31, 31, 31, 1) !default; // #1f1f1f
+  $base-bg: $base-neutral-background1 !default;
+  $base-bg-hover: $base-neutral-background1-hover !default;
+  $base-bg-selected: $base-neutral-background1-selected !default;
+  $base-bg-active: $base-neutral-background1-active !default;
 
   $base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
   $base-border-color: rgba(102, 102, 102, 1) !default; // #666666
@@ -331,6 +345,7 @@ $scrollview-pulldown-path: null !default;
   $base-border-color-accessible-hover: rgba(189, 189, 189, 1) !default; // #bdbdbd
   $base-border-color-accessible-focused: rgba(179, 179, 179, 1) !default; // #b3b3b3
 
+  $base-neutral-border-color2: rgba(82, 82, 82, 1) !default; // #525252
   $base-neutral-border-color3: rgba(61, 61, 61, 1) !default; // #3d3d33d
 
   $base-inverted-bg: lighten($base-bg, 100%) !default;

diff --git a/packages/devextreme/scss/widgets/fluent/badge/_colors.scss b/packages/devextreme/scss/widgets/fluent/badge/_colors.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-@use "../sizes" as *;
 @use "../colors" as *;
 @use "../color" as extcolor;
 
@@ -9,10 +8,21 @@
 * $name 130. Badge text color
 * $type color
 */
-$badge-color: $base-inverted-text-color !default;
+$badge-color: null !default;
 
 /**
 * $name 140. Badge background color
 * $type color
 */
-$badge-bg: $base-accent !default;
+$badge-bg: $base-brand-bg !default;
+
+$badge-text-color-disabled: $base-foreground-disabled !default;
+$badge-background-color-disabled: $base-neutral-background-disabled !default;
+
+@if $mode == "light" {
+  $badge-color: $base-inverted-text-color !default;
+}
+
+@if $mode == "dark" {
+  $badge-color: $base-text-color !default;
+}
diff --git a/packages/devextreme/scss/widgets/fluent/badge/_index.scss b/packages/devextreme/scss/widgets/fluent/badge/_index.scss
@@ -12,7 +12,11 @@
   color: $badge-color;
   font-size: $fluent-badge-font-size;
   padding: $fluent-badge-padding;
-  margin-inline-start: 4px;
-  line-height: normal;
-  margin-top: 1px;
+  border-radius: 999em;
+  line-height: $badge-line-height;
+
+  .dx-state-disabled & {
+    color: $badge-text-color-disabled;
+    background-color: $badge-background-color-disabled;
+  }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/badge/_sizes.scss b/packages/devextreme/scss/widgets/fluent/badge/_sizes.scss
@@ -4,13 +4,16 @@
 
 $fluent-badge-padding: null !default;
 $fluent-badge-font-size: null !default;
+$badge-line-height: null !default;
 
 @if $size == "default" {
-  $fluent-badge-padding: 3px 9px !default;
+  $fluent-badge-padding: 0 6px !default;
   $fluent-badge-font-size: 12px !default;
+  $badge-line-height: 20px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-badge-padding: 2px 7px !default;
-  $fluent-badge-font-size: 11px !default;
+  $fluent-badge-padding: 0 6px !default;
+  $fluent-badge-font-size: 10px !default;
+  $badge-line-height: 16px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/button/_colors.scss b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
@@ -26,7 +26,7 @@ $button-normal-selected-color: $base-text-color !default;
 * $name 20. Background color
 * $type color
 */
-$button-normal-bg: $base-element-bg !default;
+$button-normal-bg: $base-neutral-background1 !default;
 
 /**
 * $name 30. Hovered state background color
@@ -350,8 +350,8 @@ $button-success-text-selected-bg: null !default;
 
   $button-danger-text-hover-bg: #4F1314 !default;
   $button-danger-text-focused-bg: #4F1314 !default;
-  $button-danger-text-active-bg: #521516 !default;
-  $button-danger-text-selected-bg: #3F1011 !default;
+  $button-danger-text-active-bg: #BC2F32 !default;
+  $button-danger-text-selected-bg: #751D1F !default;
 
   $button-success-text-color: #54B054 !default;
   $button-success-text-color-hover: #F1FAF1 !default;

diff --git a/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss b/packages/devextreme/scss/widgets/fluent/calendar/_colors.scss
@@ -25,7 +25,7 @@ $calendar-header-color: $calendar-color !default;
 */
 $calendar-cell-other-color: $base-neutral-foreground3 !default;
 $calendar-cell-other-hover-color: $base-neutral-foreground3 !default;
-$calendar-bg: $base-bg !default;
+$calendar-bg: transparent !default;
 $calendar-hover-bg: null !default;
 $calendar-cell-hover-border-color: null !default;
 $calendar-cell-hover-color: $calendar-color !default;