fix(autosuggest): incorrect mark style

Refinitiv · Jan 17, 2024 · 75886ea · 75886ea
1 parent 90149f4
commit 75886ea
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 63 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-autosuggest.less b/packages/elemental-theme/src/custom-elements/ef-autosuggest.less
@@ -4,7 +4,6 @@
 @import '../shared-styles/scrollbar';
 @import '../responsive';
 @import '../native-elements/kbd';
-@import '../native-elements/mark';
 
 :host {
   min-height: 0;

diff --git a/packages/elemental-theme/src/custom-elements/ef-item.less b/packages/elemental-theme/src/custom-elements/ef-item.less
@@ -1,6 +1,7 @@
 @import 'element:ef-icon';
 @import 'element:ef-checkbox';
 @import '../responsive';
+@import (reference) '../native-elements/mark';
 
 :host {
   line-height: normal;
@@ -95,4 +96,8 @@
   [part='sub-label'] {
     font-size: 80%;
   }
+
+  ::slotted(mark) {
+    .default-mark();
+  }
 }
diff --git a/packages/elemental-theme/src/native-elements/mark.less b/packages/elemental-theme/src/native-elements/mark.less
@@ -1,4 +1,8 @@
-mark {
+.default-mark() {
   color: @global-text-mark-color;
   background-color: @global-text-mark-background;
 }
+
+mark {
+  .default-mark();
+}
diff --git a/packages/elements/src/autosuggest/__demo__/index.html b/packages/elements/src/autosuggest/__demo__/index.html
@@ -28,7 +28,7 @@
       import '@refinitiv-ui/elements/header';
       import '@refinitiv-ui/elements/item';
       import '@refinitiv-ui/elements/multi-input';
-      // import '@refinitiv-ui/elements/emerald-grid';
+      import '@refinitiv-ui/elements/search-field';
       import '@refinitiv-ui/elements/select';
       import '@refinitiv-ui/elements/text-field';
       import '@refinitiv-ui/elements/tooltip';
@@ -649,66 +649,21 @@
       </script>
     </demo-block>
 
-    <demo-block layout="normal" header="Inside Shadow DOM" tags="Shadow DOM,Grid">
-      <emerald-grid id="grid" style="height: 200px"></emerald-grid>
+    <demo-block layout="normal" header="Inside Shadow DOM" tags="Shadow DOM">
+      <div id="search-suggestion"></div>
       <script>
-        (function () {
-          const grid = document.getElementById('grid');
-          grid.config = {
-            rowHighlight: true,
-            rowSelection: true,
-            columns: [
-              {
-                id: 'suggest',
-                title: 'Suggest',
-                field: 'suggest',
-                formatter: {
-                  render: function () {},
-                  bind: function (rowIndex, columnIndex, value, cell, columnDef, dataRow, dataTable) {
-                    let wrapper = cell.getContent();
-                    if (!wrapper) {
-                      wrapper = document.createElement('div');
-                      const input = document.createElement('ef-text-field');
-                      input.style.height = '32px';
-                      input.style.margin = '0';
-                      input.placeholder = 'Start typing...';
-                      wrapper.appendChild(input);
-
-                      const autoSuggest = document.createElement('ef-autosuggest');
-                      autoSuggest.attach = input;
-                      autoSuggest.addEventListener(
-                        'suggestions-fetch-requested',
-                        ({ target, detail: { query } }) => {
-                          window.filterData(query, { minLength: 0 }).then(({ data }) => {
-                            target.suggestions = data;
-                          });
-                        }
-                      );
-                      wrapper.appendChild(autoSuggest);
-
-                      wrapper.input = input;
-                      wrapper.autoSuggest = autoSuggest;
-                    }
-                    cell.setContent(wrapper);
-                    wrapper.input.value = value;
-                  }
-                }
-              }
-            ],
-            dataModel: {
-              fields: ['suggest'],
-              format: 'rows',
-              data: [
-                {
-                  suggest: ''
-                },
-                {
-                  suggest: 'Cornelius Martin'
-                }
-              ]
-            }
-          };
-        })();
+        const wrapper = document.getElementById('search-suggestion');
+        let searchField = document.createElement('ef-search-field');
+        let autoSuggest = document.createElement('ef-autosuggest');
+        autoSuggest.attach = searchField;
+        autoSuggest.addEventListener('suggestions-fetch-requested', (event) => {
+          let query = event.detail.query;
+          window.filterData(query).then(({ data }) => {
+            autoSuggest.suggestions = data;
+          });
+        });
+        wrapper.appendChild(searchField);
+        wrapper.appendChild(autoSuggest);
       </script>
     </demo-block>
   </body>

diff --git a/packages/halo-theme/src/custom-elements/ef-autosuggest.less b/packages/halo-theme/src/custom-elements/ef-autosuggest.less
@@ -1,6 +1,5 @@
 @import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-autosuggest';
 @import '../native-elements/kbd';
-@import '../native-elements/mark';
 @import '../shared-styles/scrollbar';
 
 :host {