Fluent: fix disabled state appearance in Menu (#26106)

DevExpress · Nov 27, 2023 · 87d7b28 · 87d7b28
1 parent 62764ed
commit 87d7b28
Show file tree

Hide file tree

Showing 27 changed files with 47 additions and 73 deletions.
diff --git a/packages/devextreme/scss/widgets/base/_menuBase.scss b/packages/devextreme/scss/widgets/base/_menuBase.scss
@@ -34,10 +34,6 @@
     height: 100%;
     width: 100%;
 
-    &.dx-state-disabled {
-      opacity: 0.5;
-    }
-
     .dx-menu-item-content {
       white-space: nowrap;
       height: 100%;

diff --git a/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss b/packages/devextreme/scss/widgets/base/dateRangeBox/_index.scss
@@ -13,6 +13,7 @@
       &.dx-editor-outlined {
         border: 0;
         box-shadow: none;
+        background-color: transparent;
 
         &.dx-texteditor-with-label,
         &.dx-texteditor-with-floating-label {
@@ -34,6 +35,7 @@
 
     &.dx-editor-underlined {
       border-bottom: 0;
+      background-color: transparent;
 
       &::before {
         margin-left: 0;

diff --git a/packages/devextreme/scss/widgets/fluent/button/_index.scss b/packages/devextreme/scss/widgets/fluent/button/_index.scss
@@ -49,11 +49,6 @@
 
   .dx-button-content {
     position: relative;
-
-    .dx-inkripple {
-      overflow: hidden;
-      display: block;
-    }
   }
 
   @include dx-button-styling(

diff --git a/packages/devextreme/scss/widgets/fluent/button/_mixins.scss b/packages/devextreme/scss/widgets/fluent/button/_mixins.scss
@@ -99,10 +99,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
       color: $text-color-active;
     }
   }
-
-  .dx-inkripple-wave {
-    background-color: color.change($text-color, $alpha: 0.2);
-  }
 }
 
 @mixin dx-button-styling(

diff --git a/packages/devextreme/scss/widgets/fluent/common/_index.scss b/packages/devextreme/scss/widgets/fluent/common/_index.scss
@@ -66,35 +66,3 @@
 .dx-theme-border-color {
   border-color: $base-border-color !important;
 }
-
-// stylelint-enable declaration-no-important
-
-.dx-inkripple {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.dx-inkripple-wave {
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.16);
-  border-radius: 50%;
-  opacity: 0;
-  transform: scale(0);
-  pointer-events: none;
-}
-
-.dx-inkripple-showing {
-  transition: transform 0.1s linear;
-  opacity: 1;
-  transform: scale(1);
-}
-
-.dx-inkripple-hiding {
-  transition: transform 0.1s linear, opacity 0.1s linear;
-  transform: scale(1.01);
-  opacity: 0;
-}
diff --git a/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss b/packages/devextreme/scss/widgets/fluent/contextMenu/_index.scss
@@ -16,9 +16,9 @@
 
 
 .dx-context-menu {
-  .dx-menu-item {
-    color: $menu-color;
+  color: $menu-color;
 
+  .dx-menu-item {
     .dx-menu-item-content {
       display: flex;
       align-items: center;
@@ -33,14 +33,23 @@
         .dx-menu-item-popout {
           display: flex;
           align-items: center;
-          color: $base-icon-color;
 
           @include dx-icon(spinright);
           @include dx-icon-sizing($fluent-button-icon-size);
         }
       }
     }
 
+    .dx-menu-item-popout {
+      color: $base-icon-color;
+    }
+
+    &.dx-state-disabled {
+      .dx-menu-item-popout {
+        color: $base-foreground-disabled;
+      }
+    }
+
     &.dx-menu-item-has-submenu > .dx-menu-item-content {
       padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding;
     }

diff --git a/packages/devextreme/scss/widgets/fluent/lookup/_index.scss b/packages/devextreme/scss/widgets/fluent/lookup/_index.scss
@@ -115,10 +115,6 @@
   $fluent-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   @include dx-dropdownlist-list-appearance();
 

diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_colors.scss
@@ -4,3 +4,5 @@
 
 // adduse
 
+$menu-item-color-disabled: $base-foreground-disabled;
+
diff --git a/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss b/packages/devextreme/scss/widgets/fluent/menuBase/_index.scss
@@ -19,6 +19,10 @@
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    color: $menu-item-color-disabled;
+  }
+
   &.dx-state-hover {
     background-color: $menu-item-hover-bg;
   }

diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
@@ -32,9 +32,9 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 $progressbar-label-color: $base-text-color !default;
 
 @if $mode == "light" {
-  $progressbar-bg: darken($base-element-bg, 9.80) !default;
+  $progressbar-bg: darken($base-typography-bg, 7.84) !default;
 }
 
 @if $mode == "dark" {
-  $progressbar-bg: lighten($base-element-bg, 3.92) !default;
+  $progressbar-bg: lighten($base-typography-bg, 7.84) !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss b/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss
@@ -140,9 +140,9 @@
 }
 
 .dx-state-disabled {
-  color: $base-foreground-disabled;
-
   .dx-radiobutton {
+    color: $base-foreground-disabled;
+
     .dx-radiobutton-icon {
       border-color: $base-foreground-disabled;
     }

diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tab/_base.scss
@@ -56,8 +56,7 @@
     }
   }
 
-  &.dx-state-active,
-  &.dx-state-active .dx-inkripple-wave {
+  &.dx-state-active {
     background-color: $tabs-active-tab-bg-color;
   }
 

diff --git a/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss b/packages/devextreme/scss/widgets/fluent/tabs/layout/tabs/_index.scss
@@ -18,10 +18,6 @@
   padding: 0;
   background-color: $tabs-tab-background;
 
-  .dx-inkripple {
-    overflow: hidden;
-  }
-
   .dx-scrollable {
     flex-basis: 100%;
   }

diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss
@@ -36,7 +36,7 @@ $tagbox-tag-foreground-disabled: $base-foreground-disabled !default;
 $tagbox-tag-disabled: $base-background-disabled !default;
 
 @if $mode == "light" {
-  $tagbox-tag-bg: darken($base-element-bg, 5.88) !default;
+  $tagbox-tag-bg: darken($base-hover-bg, 1.96) !default;
 }
 
 @if $mode == "dark" {

diff --git a/packages/devextreme/scss/widgets/generic/lookup/_index.scss b/packages/devextreme/scss/widgets/generic/lookup/_index.scss
@@ -32,10 +32,6 @@
   $generic-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   .dx-list-item {
     border-top: none;

diff --git a/packages/devextreme/scss/widgets/generic/menuBase/_index.scss b/packages/devextreme/scss/widgets/generic/menuBase/_index.scss
@@ -25,6 +25,10 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    opacity: 0.5;
+  }
+
   &.dx-state-hover {
     color: $menu-item-hovered-color;
     background-color: $menu-item-hover-bg;

diff --git a/packages/devextreme/scss/widgets/material/lookup/_index.scss b/packages/devextreme/scss/widgets/material/lookup/_index.scss
@@ -115,10 +115,6 @@
   $material-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   .dx-list-item {
     border-top: none;

diff --git a/packages/devextreme/scss/widgets/material/menuBase/_index.scss b/packages/devextreme/scss/widgets/material/menuBase/_index.scss
@@ -21,6 +21,10 @@ $material-menu-arrow-image-size: 7px;
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    opacity: 0.5;
+  }
+
   &.dx-state-hover {
     background-color: $menu-item-hover-bg;
   }

diff --git a/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts b/packages/devextreme/testing/testcafe/tests/navigation/menu/common.ts
@@ -58,7 +58,14 @@ test('Menu items render', async (t) => {
       text: 'remove',
       icon: 'remove',
       items: [
-        { text: 'user', icon: 'user' },
+        {
+          text: 'user',
+          icon: 'user',
+          disabled: true,
+          items: [{
+            text: 'user_1',
+          }],
+        },
         {
           text: 'save',
           icon: 'save',
@@ -70,7 +77,11 @@ test('Menu items render', async (t) => {
       ],
     },
     { text: 'user', icon: 'user' },
-    { text: 'coffee', icon: 'coffee' },
+    {
+      text: 'coffee',
+      icon: 'coffee',
+      disabled: true,
+    },
   ] as Item[];
 
   return createWidget('dxMenu', { items: menuItems, cssClass: 'custom-class' }, '#menu');

diff --git a/...estcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png b/...estcafe/tests/navigation/menu/etalons/Menu render items (fluent-blue-light).png
diff --git a/...tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png b/...tests/navigation/menu/etalons/Menu render items (fluent-blue-light-compact).png
diff --git a/...testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png b/...testcafe/tests/navigation/menu/etalons/Menu render items (generic-contrast).png
diff --git a/...ing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png b/...ing/testcafe/tests/navigation/menu/etalons/Menu render items (generic-dark).png
diff --git a/...ng/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png b/...ng/testcafe/tests/navigation/menu/etalons/Menu render items (generic-light).png
diff --git a/...afe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png b/...afe/tests/navigation/menu/etalons/Menu render items (generic-light-compact).png
diff --git a/...tcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png b/...tcafe/tests/navigation/menu/etalons/Menu render items (material-blue-light).png
diff --git a/...sts/navigation/menu/etalons/Menu render items (material-blue-light-compact).png b/...sts/navigation/menu/etalons/Menu render items (material-blue-light-compact).png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,3 +4,5 @@

		// adduse

		$menu-item-color-disabled: $base-foreground-disabled;