Fix styling to use EuiSize constants

elastic · Nov 23, 2022 · 9398634 · 9398634
1 parent cf28f3d
commit 9398634
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss
@@ -91,3 +91,7 @@
 .optionsList--hiddenEditorForm {
   margin-left: $euiSizeXXL + $euiSizeM;
 }
+
+.optionsList--sortPopover {
+  width: $euiSizeXL * 7;
+}
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx
@@ -24,7 +24,6 @@ import {
 } from '@elastic/eui';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 
-import { css } from '@emotion/css';
 import {
   getCompatibleSortingTypes,
   DEFAULT_SORT,
@@ -35,8 +34,6 @@ import { OptionsListReduxState } from '../types';
 import { OptionsListStrings } from './options_list_strings';
 import { optionsListReducers } from '../options_list_reducers';
 
-const SORT_POPOVER_WIDTH = 220;
-
 interface OptionsListSortingPopoverProps {
   showOnlySelected: boolean;
 }
@@ -121,9 +118,7 @@ export const OptionsListPopoverSortingButton = ({
       isOpen={isSortingPopoverOpen}
       aria-labelledby="optionsList_sortingOptions"
       closePopover={() => setIsSortingPopoverOpen(false)}
-      panelStyle={{
-        width: `${SORT_POPOVER_WIDTH}px`,
-      }}
+      panelClassName={'optionsList--sortPopover'}
     >
       <span data-test-subj="optionsListControl__sortingOptionsPopover">
         <EuiPopoverTitle paddingSize="s">
@@ -149,9 +144,6 @@ export const OptionsListPopoverSortingButton = ({
           listProps={{ bordered: false }}
           data-test-subj="optionsListControl__sortingOptions"
           aria-label={OptionsListStrings.popover.getSortPopoverDescription()}
-          css={css`
-            max-width: ${SORT_POPOVER_WIDTH}px !important;
-          `}
         >
           {(list) => list}
         </EuiSelectable>