[EuiFilterSelectItem] Convert to Emotion + mark as deprecated (#6982)

elastic · Jul 25, 2023 · 26a5d3d · 26a5d3d
1 parent e7549ac
commit 26a5d3d
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 98 deletions.
diff --git a/src-docs/src/views/filter_group/filter_group.js b/src-docs/src/views/filter_group/filter_group.js
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 
 import {
-  EuiPopover,
   EuiFilterGroup,
   EuiFilterButton,
+  EuiPopover,
+  EuiSelectableMessage,
   EuiIcon,
   EuiSpacer,
 } from '../../../../src/components';
@@ -85,13 +86,11 @@ export default () => {
         closePopover={closePopover}
         panelPaddingSize="none"
       >
-        <div className="euiFilterSelect__note">
-          <div className="euiFilterSelect__noteContent">
-            <EuiIcon type="minusInCircle" />
-            <EuiSpacer size="xs" />
-            <p>No filters found</p>
-          </div>
-        </div>
+        <EuiSelectableMessage>
+          <EuiIcon type="minusInCircle" />
+          <EuiSpacer size="xs" />
+          <p>No filters found</p>
+        </EuiSelectableMessage>
       </EuiPopover>
       <EuiFilterButton
         numFilters={12}

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -531,7 +531,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
       >
         <button
           aria-selected="false"
-          class="euiFilterSelectItem"
+          class="euiFilterSelectItem emotion-euiFilterSelectItem"
           id="generated-id__option-0"
           role="option"
           style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
@@ -542,7 +542,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
             class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
           >
             <span
-              class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+              class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
             >
               <span
                 class="euiComboBoxOption__contentWrapper"
@@ -567,7 +567,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
         </button>
         <button
           aria-selected="false"
-          class="euiFilterSelectItem"
+          class="euiFilterSelectItem emotion-euiFilterSelectItem"
           id="generated-id__option-1"
           role="option"
           style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
@@ -578,7 +578,7 @@ exports[`props option.prepend & option.append renders in the options dropdown 1`
             class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
           >
             <span
-              class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+              class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
             >
               <span
                 class="euiComboBoxOption__contentWrapper"
@@ -684,7 +684,7 @@ exports[`props options list is rendered 1`] = `
         >
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             data-test-subj="titanOption"
             id="generated-id__option-0"
             role="option"
@@ -696,7 +696,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -712,7 +712,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-1"
             role="option"
             style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
@@ -723,7 +723,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -739,7 +739,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-2"
             role="option"
             style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
@@ -750,7 +750,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -766,7 +766,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-3"
             role="option"
             style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
@@ -777,7 +777,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -793,7 +793,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-4"
             role="option"
             style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
@@ -804,7 +804,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -820,7 +820,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-5"
             role="option"
             style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
@@ -831,7 +831,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -847,7 +847,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-6"
             role="option"
             style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
@@ -858,7 +858,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -874,7 +874,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-7"
             role="option"
             style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
@@ -885,7 +885,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"
@@ -901,7 +901,7 @@ exports[`props options list is rendered 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="euiFilterSelectItem"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
             id="generated-id__option-8"
             role="option"
             style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
@@ -912,7 +912,7 @@ exports[`props options list is rendered 1`] = `
               class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
             >
               <span
-                class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
               >
                 <span
                   class="euiComboBoxOption__contentWrapper"

diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { ReactNode } from 'react';
+import { fireEvent } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 import { render } from '../../test/rtl';
 import {
@@ -297,18 +298,22 @@ test('does not show multiple checkmarks with duplicate labels', () => {
       label: 'Tethys',
     },
   ];
-  const component = mount(
+  const { baseElement, getByTestSubject } = render(
     <EuiComboBox
       singleSelection={{ asPlainText: true }}
       options={options}
       selectedOptions={[options[1]]}
     />
   );
-
-  const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-  searchInput.simulate('focus');
-
-  expect(component.find('EuiFilterSelectItem[checked="on"]').length).toBe(1);
+  fireEvent.focus(getByTestSubject('comboBoxSearchInput'));
+
+  const dropdownOptions = baseElement.querySelectorAll('.euiFilterSelectItem');
+  expect(
+    dropdownOptions[0]!.querySelector('[data-euiicon-type="check"]')
+  ).toBeFalsy();
+  expect(
+    dropdownOptions[1]!.querySelector('[data-euiicon-type="check"]')
+  ).toBeTruthy();
 });
 
 describe('behavior', () => {

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -44,7 +44,7 @@ import {
   EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
 } from './types';
-import { EuiFilterSelectItem } from '../filter_group';
+import { EuiFilterSelectItemClass } from '../filter_group/filter_select_item';
 import AutosizeInput from 'react-input-autosize';
 import { CommonProps } from '../common';
 import { EuiFormControlLayoutProps } from '../form';
@@ -279,7 +279,7 @@ export class EuiComboBox<T> extends Component<
     this.toggleButtonRefInstance = ref;
   };
 
-  optionsRefInstances: Array<RefInstance<EuiFilterSelectItem>> = [];
+  optionsRefInstances: Array<RefInstance<EuiFilterSelectItemClass>> = [];
   optionRefCallback: EuiComboBoxOptionsListProps<T>['optionRef'] = (
     index,
     ref

diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -27,6 +27,7 @@ import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import {
   EuiFilterSelectItem,
+  EuiFilterSelectItemClass,
   FilterChecked,
 } from '../../filter_group/filter_select_item';
 import { htmlIdGenerator } from '../../../services';
@@ -73,7 +74,10 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     onOptionClick?: OptionHandler<T>;
     onOptionEnterKey?: OptionHandler<T>;
     onScroll?: ListProps['onScroll'];
-    optionRef: (index: number, node: RefInstance<EuiFilterSelectItem>) => void;
+    optionRef: (
+      index: number,
+      node: RefInstance<EuiFilterSelectItemClass>
+    ) => void;
     /**
      * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
      */

diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiFilterSelectItem is rendered 1`] = `
+exports[`EuiFilterSelectItem renders 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFilterSelectItem testClass1 testClass2 emotion-euiTestCss"
+  class="euiFilterSelectItem testClass1 testClass2 emotion-euiFilterSelectItem-euiTestCss"
   data-test-subj="test subject string"
   role="option"
   type="button"
@@ -19,7 +19,7 @@ exports[`EuiFilterSelectItem is rendered 1`] = `
       />
     </div>
     <span
-      class="euiFlexItem euiFilterSelectItem__content emotion-euiFlexItem-grow-1"
+      class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
     />
   </span>
 </button>

diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
diff --git a/src/components/filter_group/_index.scss b/src/components/filter_group/_index.scss