add light grey line to seperate feature property rows

elastic · Aug 25, 2020 · 6b1a221 · 6b1a221
1 parent 8efb529
commit 6b1a221
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/...c/connected_components/map/features_tooltip/__snapshots__/feature_properties.test.js.snap b/...c/connected_components/map/features_tooltip/__snapshots__/feature_properties.test.js.snap
diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/_index.scss b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/_index.scss
@@ -8,6 +8,10 @@
   }
 }
 
+.mapFeatureTooltip_row {
+  border-bottom: 1px solid $euiColorLightestShade;
+}
+
 .mapFeatureTooltip_actionLinks {
   padding: $euiSizeXS;
 }

diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js
@@ -162,7 +162,7 @@ export class FeatureProperties extends React.Component {
 
   _renderFilterCell(tooltipProperty) {
     if (!this.props.showFilterButtons || !tooltipProperty.isFilterable()) {
-      return null;
+      return <td />;
     }
 
     const applyFilterButton = (
@@ -250,7 +250,7 @@ export class FeatureProperties extends React.Component {
     const rows = this.state.properties.map((tooltipProperty) => {
       const label = tooltipProperty.getPropertyName();
       return (
-        <tr key={label}>
+        <tr key={label} className="mapFeatureTooltip_row">
           <td className="eui-textOverflowWrap mapFeatureTooltip__propertyLabel">{label}</td>
           <td
             className="eui-textOverflowWrap"