fix: action sizing, component memoization

Author: nickofthyme

src/components/legend/_legend_item.scss

@@ -26,6 +26,8 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     justify-content: center;
     align-items: center;
     margin-left: $euiSizeXS;
+    height: 16px;
+    width: 20px;
   }
 
   &__color {

src/components/legend/color.tsx

@@ -18,7 +18,7 @@
  */
 
 import classNames from 'classnames';
-import React, { MouseEventHandler, forwardRef } from 'react';
+import React, { MouseEventHandler, forwardRef, memo } from 'react';
 
 import { Icon } from '../icons/icon';
 
@@ -33,8 +33,8 @@ interface ColorProps {
  * Color component used by the legend item
  * @internal
  */
-export const Color = forwardRef<HTMLDivElement, ColorProps>(
-  ({ color, isSeriesHidden = false, hasColorPicker, onClick }, ref) => {
+export const Color = memo(
+  forwardRef<HTMLDivElement, ColorProps>(({ color, isSeriesHidden = false, hasColorPicker, onClick }, ref) => {
     if (isSeriesHidden) {
       return (
         <div className="echLegendItem__color" aria-label="series hidden" title="series hidden">
@@ -60,5 +60,6 @@ export const Color = forwardRef<HTMLDivElement, ColorProps>(
         </div>
       </div>
     );
-  },
+  }),
 );
+Color.displayName = 'Color';

src/specs/settings.tsx

@@ -212,6 +212,8 @@ export interface LegendActionProps {
 /**
  * Legend action component used to render actions next to legend items
  *
+ * render slot is constrained to 20px x 16px
+ *
  * @public
  */
 export type LegendAction = ComponentType<LegendActionProps>;

src/state/selectors/get_legend_size.ts

@@ -72,21 +72,21 @@ export const getLegendSizeSelector = createCachedSelector(
     if (!showLegend) {
       return { width: 0, height: 0, margin: 0 };
     }
-    const actionPadding = isDefined(legendAction) ? 4 : 0; // euiSizeXS padding between action and label
+    const actionDimension = isDefined(legendAction) ? 24 : 0; // max width plus margin
     const legendItemWidth =
       MARKER_WIDTH + MARKER_LEFT_MARGIN + bbox.width + (showLegendDisplayValue ? VALUE_LEFT_MARGIN : 0);
     if (isVerticalAxis(legendPosition)) {
       const legendItemHeight = bbox.height + VERTICAL_PADDING * 2;
       return {
-        width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionPadding, verticalWidth)),
+        width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionDimension, verticalWidth)),
         height: legendItemHeight,
         margin,
       };
     }
     const isSingleLine = (parentDimensions.width - 20) / 200 > labels.length;
     return {
       height: isSingleLine ? bbox.height + 16 : bbox.height * 2 + 24,
-      width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionPadding, verticalWidth)),
+      width: Math.floor(Math.min(legendItemWidth + spacingBuffer + actionDimension, verticalWidth)),
       margin,
     };
   },