fix(list): Update styles to fix TestCafe tests

DevExpress · Nov 6, 2024 · eee4c2a · eee4c2a
1 parent 45379a6
commit eee4c2a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 47 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/list/_index.scss
@@ -229,6 +229,15 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
       .dx-list-item {
         @include item-states();
       }
+
+      .dx-list-group-header {
+        @include item-states();
+
+        &.dx-state-hover {
+          background-color: $list-item-hover-bg;
+          color: $list-item-hover-color;
+        }
+      }
     }
   }
 
@@ -279,8 +288,6 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
   }
 
   .dx-list-group-header {
-    @include item-states();
-
     font-weight: 500;
     padding: $fluent-list-group-header-vertical-padding $item-horizontal-padding;
     background: $list-group-header-bg;
@@ -291,11 +298,6 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
     align-items: center;
     column-gap: $fluent-list-item-horizontal-padding;
 
-    &.dx-state-hover {
-      background-color: $list-item-hover-bg;
-      color: $list-item-hover-color;
-    }
-
     .dx-list-group-header-indicator {
       color: $list-header-indicator-color;
 

diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
@@ -161,6 +161,15 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
       .dx-list-item {
         @include item-states();
       }
+
+      .dx-list-group-header {
+        @include item-states();
+
+        &.dx-state-hover {
+          background-color: $list-item-hover-bg;
+          color: $list-item-hover-color;
+        }
+      }
     }
   }
 
@@ -204,8 +213,6 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
   }
 
   .dx-list-group-header {
-    @include item-states();
-
     font-weight: 500;
     padding: $material-list-group-header-vertical-padding $item-horizontal-padding;
     background: $list-group-header-bg;
@@ -217,11 +224,6 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
     border-top-color: transparent;
     font-size: $material-list-main-font-size;
 
-    &.dx-state-hover {
-      background-color: $list-item-hover-bg;
-      color: $list-item-hover-color;
-    }
-
     .dx-list-group-header-indicator {
       color: $list-header-indicator-color;
       order: 1;

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <title>DevExtreme jQuery Example</title>
+  <title>DevExtreme jQuery Example</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <script type="text/javascript">
-        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+  <script type="text/javascript">
+    const currentThemeId = localStorage.getItem("currentThemeId") || "light";
 
-        const link = document.createElement("link");
-        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
-        link.type = "text/css";
-        link.rel = "stylesheet";
+    const link = document.createElement("link");
+    link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+    link.type = "text/css";
+    link.rel = "stylesheet";
 
-        document.getElementsByTagName("head")[0].appendChild(link);
-    </script>
+    document.getElementsByTagName("head")[0].appendChild(link);
+  </script>
 
-    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
-    <!-- HtmlEditor -->
-    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+  <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+  <!-- HtmlEditor -->
+  <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
 
-    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+  <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
@@ -30,34 +31,65 @@
     <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
 
-    <!--
+  <!--
     <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
     -->
 
-    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
-    <script type="text/javascript" src="./themeSelector.js"></script>
-    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+  <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+  <script type="text/javascript" src="./themeSelector.js"></script>
+  <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
+
 <body class="dx-surface">
-    <div role="main">
-        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
-
-        <select id="theme-selector" style="display: block;">
-        </select>
-        <br />
-        <div id="button"></div>
-        <script>
-            $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
-                });
-            });
-        </script>
+  <div role="main">
+    <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+    <select id="theme-selector" style="display: block;">
+    </select>
+    <br />
+
+    <div class="dx-viewport demo-container">
+      <div class="list-container">
+        <div id="simpleList"></div>
+      </div>
     </div>
+
+    <script>
+      $(() => {
+        const instance = $('#simpleList').dxList({
+          width: 300,
+          height: 800,
+          dataSource: [{
+            key: 'group_1',
+            items: ['item_1_1', 'item_1_2', 'item_1_3'],
+            expanded: false,
+          }, {
+            key: 'group_2',
+            items: [
+              { text: 'item_2_1', disabled: true },
+              { text: 'item_2_2', icon: 'home' },
+              { text: 'item_2_3', showChevron: true, badge: 'item_2_3' },
+              { text: 'item_2_4', badge: 'item_2_4' },
+              'item_2_5'],
+          }, {
+            key: 'group_3',
+            items: ['item_3_1', 'item_3_2', 'item_3_3'],
+            expanded: false,
+          }],
+          collapsibleGroups: true,
+          grouped: true,
+          // onItemClick: () => {
+          //   debugger
+          // },
+        }).dxList('instance');
+
+        // instance.focus();
+      });
+    </script>
+  </div>
 </body>
 </html>