Merge pull request #2 from cchaos/mbondyra-lens/fielditems_empty_acco…

…rdion More spacing fixes
mbondyra · Jun 15, 2020 · 9442649 · 9442649
2 parents f4036c0 + 651d412
commit 9442649
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 42 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/_index.scss b/x-pack/plugins/lens/public/indexpattern_datasource/_index.scss
@@ -1,4 +1,3 @@
-@import 'datapanel';
 @import 'field_item';
 
 @import 'dimension_panel/index';
diff --git a/...c/indexpattern_datasource/_datapanel.scss → ...ic/indexpattern_datasource/datapanel.scss b/...c/indexpattern_datasource/_datapanel.scss → ...ic/indexpattern_datasource/datapanel.scss
@@ -35,12 +35,11 @@
   top: 0;
   left: $euiSize; /* 1 */
   right: $euiSizeXS; /* 1 */
+}
 
-  /* EUI-TODO: Allow passing a classname to this component */
-  .euiAccordion__childWrapper {
-    // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
-    padding: $euiSizeXS;
-  }
+.lnsInnerIndexPatternDataPanel__fieldItems {
+  // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
+  padding: $euiSizeXS $euiSizeXS 0;
 }
 
 .lnsInnerIndexPatternDataPanel__textField {

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './datapanel.scss';
 import { uniq, indexBy, groupBy } from 'lodash';
 import React, { useState, useEffect, memo, useCallback } from 'react';
 import {
@@ -487,22 +488,24 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                 }
               >
                 <EuiSpacer size="s" />
-                {paginatedAvailableFields.map((field: IndexPatternField) => {
-                  return (
-                    <FieldItem
-                      core={core}
-                      data={data}
-                      indexPattern={currentIndexPattern}
-                      key={field.name}
-                      field={field}
-                      highlight={hilight}
-                      exists={true}
-                      dateRange={dateRange}
-                      query={query}
-                      filters={filters}
-                    />
-                  );
-                })}
+                <div className="lnsInnerIndexPatternDataPanel__fieldItems">
+                  {paginatedAvailableFields.map((field: IndexPatternField) => {
+                    return (
+                      <FieldItem
+                        core={core}
+                        data={data}
+                        indexPattern={currentIndexPattern}
+                        key={field.name}
+                        field={field}
+                        highlight={hilight}
+                        exists={true}
+                        dateRange={dateRange}
+                        query={query}
+                        filters={filters}
+                      />
+                    );
+                  })}
+                </div>
 
                 {paginatedAvailableFields.length === 0 && (
                   <EuiCallOut
@@ -572,9 +575,8 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                     )}
                   </EuiCallOut>
                 )}
-                <EuiSpacer size="s" />
               </EuiAccordion>
-              <EuiSpacer size="s" />
+              <EuiSpacer size="m" />
               <EuiAccordion
                 initialIsOpen={false}
                 id="emptyFieldsLabel"
@@ -602,25 +604,26 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                 }
               >
                 <EuiSpacer size="s" />
-                {paginatedEmptyFields.map((field: IndexPatternField) => {
-                  return (
-                    <FieldItem
-                      core={core}
-                      data={data}
-                      indexPattern={currentIndexPattern}
-                      key={field.name}
-                      field={field}
-                      highlight={hilight}
-                      exists={false}
-                      dateRange={dateRange}
-                      query={query}
-                      filters={filters}
-                    />
-                  );
-                })}
-                <EuiSpacer size="s" />
+                <div className="lnsInnerIndexPatternDataPanel__fieldItems">
+                  {paginatedEmptyFields.map((field: IndexPatternField) => {
+                    return (
+                      <FieldItem
+                        core={core}
+                        data={data}
+                        indexPattern={currentIndexPattern}
+                        key={field.name}
+                        field={field}
+                        highlight={hilight}
+                        exists={false}
+                        dateRange={dateRange}
+                        query={query}
+                        filters={filters}
+                      />
+                    );
+                  })}
+                </div>
               </EuiAccordion>
-              <EuiSpacer size="l" />
+              <EuiSpacer size="m" />
             </div>
           </div>
         </EuiFlexItem>