chore: remove legend gap (#968)

elastic · Jan 14, 2021 · 9569ccb · 9569ccb
1 parent 3df73d0
commit 9569ccb
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 17 deletions.
diff --git a/...ll-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/...ll-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png
diff --git a/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png
diff --git a/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png
diff --git a/...nd-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png b/...nd-stories-test-ts-legend-stories-should-hide-bar-series-legend-item-1-snap.png
diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"background\\"></div><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
diff --git a/src/components/legend/__snapshots__/legend.test.tsx.snap b/src/components/legend/__snapshots__/legend.test.tsx.snap
diff --git a/src/components/legend/_legend_item.scss b/src/components/legend/_legend_item.scss
@@ -6,7 +6,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  position: relative;
 
   &:not(&--hidden) {
     .echLegendItem__color--changable {
@@ -16,12 +16,20 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     }
   }
 
-  &:hover {
+  &:hover .background {
     background-color: $euiColorLightestShade;
   }
 
+  .background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+
   &__action {
-    height: 100%;
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -80,19 +88,17 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
 
   &--right,
   &--left {
-    margin-top: $legendItemVerticalPadding;
-    margin-bottom: $legendItemVerticalPadding;
-  }
+    padding-top: $legendItemVerticalPadding / 2;
+    padding-bottom: $legendItemVerticalPadding / 2;
 
-  @include internetExplorerOnly {
-    &--bottom,
-    &--top {
-      width: $echLegendMaxWidth;
-      margin-right: $euiSizeL;
+    &:first-of-type {
+      margin-top: $legendItemVerticalPadding / 2;
     }
 
-    margin-top: $legendItemVerticalPadding;
-    margin-bottom: $legendItemVerticalPadding;
+    .background {
+      margin-top: $legendItemVerticalPadding / 2;
+      margin-bottom: $legendItemVerticalPadding / 2;
+    }
   }
 
   &--hidden {

diff --git a/src/components/legend/legend_item.tsx b/src/components/legend/legend_item.tsx
@@ -230,6 +230,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
           style={style}
           data-ech-series-name={label}
         >
+          <div className="background" />
           <ItemColor
             ref={this.colorRef}
             color={color}