[ML] Fix Data Visualizer responsive layout (#56372) (#56472)

* [ML] replace Example component with EuiListGroup * [ML] center alignment
elastic · Jan 31, 2020 · 5df9c86 · 5df9c86
1 parent 3f5149f
commit 5df9c86
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 36 deletions.
diff --git a/...plication/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx b/...plication/datavisualizer/index_based/components/field_data_card/examples_list/example.tsx
diff --git a/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx b/...ion/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
@@ -6,12 +6,10 @@
 
 import React, { FC } from 'react';
 
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiListGroup, EuiListGroupItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Example } from './example';
-
 interface Props {
   examples: Array<string | object>;
 }
@@ -22,7 +20,14 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
   }
 
   const examplesContent = examples.map((example, i) => {
-    return <Example key={`example_${i}`} example={example} />;
+    return (
+      <EuiListGroupItem
+        style={{ padding: 0, justifyContent: 'center' }}
+        size="xs"
+        key={`example_${i}`}
+        label={typeof example === 'string' ? example : JSON.stringify(example)}
+      />
+    );
   });
 
   return (
@@ -39,7 +44,9 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
         </h6>
       </EuiText>
       <EuiSpacer size="s" />
-      {examplesContent}
+      <EuiListGroup flush={true} showToolTips={true}>
+        {examplesContent}
+      </EuiListGroup>
     </div>
   );
 };