Convert .euiFilterGroup__popoverPanel to Emotion

TODO: Kibana usages will need to be converted to a `css` prop as well, and import the styles fn directly
elastic · Jul 18, 2023 · 7412d84 · 7412d84
1 parent 622b069
commit 7412d84
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 58 deletions.
diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss
@@ -1,10 +0,0 @@
-.euiFilterGroup {
-}
-
-// A fixed width is required because of the shift in widths that can be caused
-// by the loading animation that precedes the results.
-.euiFilterGroup__popoverPanel {
-  // Note for Emotion conversion: there are unfortunately 5+ direct
-  // usages of this className in Kibana that will need to be refactored
-  width: $euiSize * 18;
-}

diff --git a/src/components/filter_group/filter_group.styles.ts b/src/components/filter_group/filter_group.styles.ts
@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
-import { logicalCSS, euiBreakpoint } from '../../global_styling';
+import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
 import { euiFormVariables } from '../form/form.styles';
 import { euiFilterButtonDisplay } from './filter_button.styles';
 
@@ -69,5 +69,16 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('height', controlCompressedHeight)}
       }
     `,
+    /**
+     * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
+     * A fixed width is required because of the shift in widths that can be caused
+     * by the loading animation that precedes the results.
+     */
+    euiFilterGroup__popoverPanel: css`
+      ${logicalCSS(
+        'width',
+        mathWithUnits(euiTheme.size.base, (x) => x * 18)
+      )}
+    `,
   };
 };
diff --git a/src/components/search_bar/filters/field_value_selection_filter.tsx b/src/components/search_bar/filters/field_value_selection_filter.tsx
@@ -7,10 +7,13 @@
  */
 
 import React, { Component, ReactNode } from 'react';
+
+import { RenderWithEuiTheme } from '../../../services';
 import { isArray, isNil } from '../../../services/predicate';
 import { ExclusiveUnion } from '../../common';
 import { EuiPopover, EuiPopoverTitle } from '../../popover';
 import { EuiFilterButton } from '../../filter_group';
+import { euiFilterGroupStyles } from '../../filter_group/filter_group.styles';
 import { EuiSelectable, EuiSelectableProps } from '../../selectable';
 import { EuiSelectableOptionCheckedType } from '../../../components/selectable/selectable_option';
 import { Query } from '../query';
@@ -378,54 +381,61 @@ export class FieldValueSelectionFilter extends Component<
     }
 
     return (
-      <EuiPopover
-        button={button}
-        isOpen={this.state.popoverOpen}
-        closePopover={this.closePopover.bind(this)}
-        panelPaddingSize="none"
-        anchorPosition="downCenter"
-        panelClassName="euiFilterGroup__popoverPanel"
-      >
-        <EuiSelectable<Partial<(typeof items)[number]['data']>>
-          singleSelection={!multiSelect}
-          aria-label={config.name}
-          options={items}
-          renderOption={(option) => option.view}
-          isLoading={isNil(this.state.options)}
-          loadingMessage={
-            config.loadingMessage || defaults.config.loadingMessage
-          }
-          emptyMessage={
-            config.noOptionsMessage || defaults.config.noOptionsMessage
-          }
-          errorMessage={this.state.error}
-          noMatchesMessage={
-            config.noOptionsMessage || defaults.config.noOptionsMessage
-          }
-          listProps={{
-            isVirtualized: isOverSearchThreshold || false,
-          }}
-          onChange={(options, event, changedOption) => {
-            if (changedOption.data) {
-              this.onOptionClick(
-                changedOption.data.optionField,
-                changedOption.data.value,
-                changedOption.checked
-              );
-            }
-          }}
-          {...searchProps}
-        >
-          {(list, search) => (
-            <>
-              {isOverSearchThreshold && (
-                <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
+      <RenderWithEuiTheme>
+        {(euiThemeContext) => (
+          <EuiPopover
+            button={button}
+            isOpen={this.state.popoverOpen}
+            closePopover={this.closePopover.bind(this)}
+            panelPaddingSize="none"
+            anchorPosition="downCenter"
+            panelProps={{
+              css: euiFilterGroupStyles(euiThemeContext)
+                .euiFilterGroup__popoverPanel,
+            }}
+          >
+            <EuiSelectable<Partial<(typeof items)[number]['data']>>
+              singleSelection={!multiSelect}
+              aria-label={config.name}
+              options={items}
+              renderOption={(option) => option.view}
+              isLoading={isNil(this.state.options)}
+              loadingMessage={
+                config.loadingMessage || defaults.config.loadingMessage
+              }
+              emptyMessage={
+                config.noOptionsMessage || defaults.config.noOptionsMessage
+              }
+              errorMessage={this.state.error}
+              noMatchesMessage={
+                config.noOptionsMessage || defaults.config.noOptionsMessage
+              }
+              listProps={{
+                isVirtualized: isOverSearchThreshold || false,
+              }}
+              onChange={(options, event, changedOption) => {
+                if (changedOption.data) {
+                  this.onOptionClick(
+                    changedOption.data.optionField,
+                    changedOption.data.value,
+                    changedOption.checked
+                  );
+                }
+              }}
+              {...searchProps}
+            >
+              {(list, search) => (
+                <>
+                  {isOverSearchThreshold && (
+                    <EuiPopoverTitle paddingSize="s">{search}</EuiPopoverTitle>
+                  )}
+                  {list}
+                </>
               )}
-              {list}
-            </>
-          )}
-        </EuiSelectable>
-      </EuiPopover>
+            </EuiSelectable>
+          </EuiPopover>
+        )}
+      </RenderWithEuiTheme>
     );
   }