change empty state to subdued

elastic · Oct 20, 2021 · bb710b5 · bb710b5
1 parent cb2cb9a
commit bb710b5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx b/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx
@@ -11,8 +11,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Story } from '@storybook/react';
 
 const bar = '#c5ced8';
-const panel = '#f7f9fa';
-const background = '#e0e6ec';
+const panel = '#ffff';
+const background = '#FAFBFD';
 const minHeight = 60;
 
 const panelStyle = {

diff --git a/...ation_util/public/components/controls/control_group/component/control_group_component.tsx b/...ation_util/public/components/controls/control_group/component/control_group_component.tsx
@@ -78,10 +78,10 @@ export const ControlGroup = () => {
   );
 
   const [draggingId, setDraggingId] = useState<string | null>(null);
-  const draggingIndex = useMemo(
-    () => (draggingId ? idsInOrder.indexOf(draggingId) : -1),
-    [idsInOrder, draggingId]
-  );
+  const draggingIndex = useMemo(() => (draggingId ? idsInOrder.indexOf(draggingId) : -1), [
+    idsInOrder,
+    draggingId,
+  ]);
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -104,6 +104,8 @@ export const ControlGroup = () => {
   return (
     <EuiPanel
       borderRadius="m"
+      color={emptyState ? 'subdued' : undefined}
+      paddingSize={emptyState ? 'none' : 's'}
       className={classNames('controlsWrapper', {
         'controlsWrapper--empty': emptyState,
         'controlsWrapper--twoLine': controlStyle === 'twoLine',

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
@@ -27,7 +27,7 @@ $controlMinWidth: $euiSize * 14;
         text-align: center;
       }
     }
-    padding-right: $euiSizeL;
+    min-height: $euiSize * 4;
   }
 
   &--twoLine {