@elastic/eui 115.0.0 → 116.0.0

package/optimize/es/components/list_group/list_group.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "listItems", "style", "flush", "bordered", "gutterSize", "wrapText", "maxWidth", "showToolTips", "color", "size", "ariaLabelledby"];
+var _excluded = ["children", "className", "listItems", "style", "bordered", "wrapText", "maxWidth", "showToolTips", "color", "ariaLabelledby"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -19,31 +19,26 @@ import { logicalStyle } from '../../global_styling';
 import { EuiListGroupItem } from './list_group_item';
 import { euiListGroupStyles } from './list_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['none', 's', 'm'];
 export var EuiListGroup = function EuiListGroup(_ref) {
   var children = _ref.children,
     className = _ref.className,
     listItems = _ref.listItems,
     style = _ref.style,
-    _ref$flush = _ref.flush,
-    flush = _ref$flush === void 0 ? false : _ref$flush,
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
-    _ref$gutterSize = _ref.gutterSize,
-    gutterSize = _ref$gutterSize === void 0 ? 's' : _ref$gutterSize,
     _ref$wrapText = _ref.wrapText,
     wrapText = _ref$wrapText === void 0 ? false : _ref$wrapText,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? true : _ref$maxWidth,
     _ref$showToolTips = _ref.showToolTips,
     showToolTips = _ref$showToolTips === void 0 ? false : _ref$showToolTips,
-    color = _ref.color,
-    size = _ref.size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'text' : _ref$color,
     ariaLabelledby = _ref.ariaLabelledby,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiListGroup', className);
   var styles = useEuiMemoizedStyles(euiListGroupStyles);
-  var cssStyles = [styles.euiListGroup, styles[gutterSize], flush && styles.flush, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
+  var cssStyles = [styles.euiListGroup, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
   var maxWidthStyle = useMemo(function () {
     if (maxWidth && maxWidth !== true) {
       return logicalStyle('max-width', maxWidth);
@@ -59,12 +54,11 @@ export var EuiListGroup = function EuiListGroup(_ref) {
           // we're passing the parent `color` and `size` down to the children
           // so that they can inherit it if they don't have one
           ,
-          color: color,
-          size: size
+          color: color
         }, item));
       });
     }
-  }, [listItems, color, size, wrapText, showToolTips]);
+  }, [listItems, color, wrapText, showToolTips]);
   var listItemsOrChildren = renderedListItems ||
   // Note that there's no point in memoizing `children`, as JSX changes every rerender
   React.Children.map(children, function (child) {
@@ -72,8 +66,7 @@ export var EuiListGroup = function EuiListGroup(_ref) {
       return cloneElementWithCss(child, _objectSpread(_objectSpread({
         // we're passing the parent `color` and `size` down to the children
         // so that they can inherit it if they don't have one
-        color: color,
-        size: size
+        color: color
       }, showToolTips && {
         showToolTip: true
       }), child.props));

package/optimize/es/components/list_group/list_group.styles.js

@@ -11,14 +11,6 @@ import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 import { euiFormMaxWidth } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1urrzow-flush",
-  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;"
-} : {
-  name: "1urrzow-flush",
-  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "2tmo78-euiListGroup",
   styles: "display:flex;flex-direction:column;label:euiListGroup;"
 } : {
@@ -31,14 +23,8 @@ export var euiListGroupStyles = function euiListGroupStyles(euiThemeContext) {
   var formMaxWidth = euiFormMaxWidth(euiThemeContext);
   return {
     // Base
-    euiListGroup: _ref2,
-    // Variants
-    flush: _ref,
+    euiListGroup: _ref,
     bordered: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.thin, ";;label:bordered;"),
-    maxWidthDefault: /*#__PURE__*/css(logicalCSS('max-width', formMaxWidth), ";;label:maxWidthDefault;"),
-    // Gutter sizes
-    none: /*#__PURE__*/css(";label:none;"),
-    s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";gap:", euiTheme.size.s, ";;label:s;"),
-    m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";gap:", euiTheme.size.base, ";;label:m;")
+    maxWidthDefault: /*#__PURE__*/css(logicalCSS('max-width', formMaxWidth), ";;label:maxWidthDefault;")
   };
 };

package/optimize/es/components/list_group/list_group_item.js

@@ -2,8 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "isActive", "isDisabled", "href", "rel", "target", "external", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
-  _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
+var _excluded = ["label", "isActive", "isDisabled", "href", "rel", "target", "external", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+  _excluded2 = ["iconType", "alwaysShow", "isDisabled"],
+  _excluded3 = ["className", "css"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -20,14 +21,13 @@ import { getSecureRelForTarget, useEuiMemoizedStyles, cloneElementWithCss } from
 import { validateHref } from '../../services/security/href_validator';
 import { useInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
-import { EuiToolTip } from '../tool_tip';
-import { EuiExternalLinkIcon } from '../link/external_link_icon';
+import { EuiListItemLayout } from '../list_item_layout/_list_item_layout';
 import { EuiListGroupItemExtraAction } from './list_group_item_extra_action';
-import { euiListGroupItemStyles, euiListGroupItemIconStyles, euiListGroupItemInnerStyles, euiListGroupItemTooltipStyles, euiListGroupItemLabelStyles } from './list_group_item.styles';
+import { euiListGroupItemStyles, euiListGroupItemTooltipStyles } from './list_group_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var SIZES = ['xs', 's', 'm', 'l'];
 export var COLORS = ['primary', 'text', 'subdued'];
 export var EuiListGroupItem = function EuiListGroupItem(_ref) {
+  var _toolTipProps$anchorP;
   var label = _ref.label,
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
@@ -45,8 +45,6 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     iconProps = _ref.iconProps,
     extraAction = _ref.extraAction,
     onClick = _ref.onClick,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'text' : _ref$color,
     _ref$showToolTip = _ref.showToolTip,
@@ -56,11 +54,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     toolTipText = _ref.toolTipText,
     toolTipProps = _ref.toolTipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isClickable = !!(href || onClick);
   var isHrefValid = !href || validateHref(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var iconStyles = useEuiMemoizedStyles(euiListGroupItemIconStyles);
-  var cssIconStyles = [iconStyles.euiListGroupItem__icon, iconProps === null || iconProps === void 0 ? void 0 : iconProps.css];
   var iconNode;
   if (iconType) {
     iconNode = ___EmotionJSX(EuiIcon, _extends({
@@ -68,14 +63,14 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     }, iconProps, {
       type: iconType,
       className: classNames('euiListGroupItem__icon', iconProps === null || iconProps === void 0 ? void 0 : iconProps.className),
-      css: cssIconStyles
+      css: iconProps === null || iconProps === void 0 ? void 0 : iconProps.css
     }));
     if (icon) {
       console.warn('Both `iconType` and `icon` were passed to EuiListGroupItem but only one can exist. The `iconType` was used.');
     }
   } else if (icon) {
     iconNode = cloneElementWithCss(icon, {
-      css: cssIconStyles,
+      css: iconProps === null || iconProps === void 0 ? void 0 : iconProps.css,
       className: classNames('euiListGroupItem__icon', icon.props.className)
     });
   }
@@ -85,13 +80,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       alwaysShow = extraAction.alwaysShow,
       actionIsDisabled = extraAction.isDisabled,
       _rest = _objectWithoutProperties(extraAction, _excluded2);
-
-    // EuiListGroupItemExtraActionProps extends EuiButtonIconPropsForButton
-    // which doesn't have the color `subdued` so we need to assign a valid color
-    // the most similar is `text` so we'll use that
-    var extraActionColor = color === 'subdued' ? 'text' : color;
     extraActionNode = ___EmotionJSX(EuiListGroupItemExtraAction, _extends({
-      color: extraActionColor,
+      color: color === 'subdued' ? 'text' : color,
       iconType: _iconType,
       alwaysShow: alwaysShow
     }, _rest, {
@@ -99,8 +89,6 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       parentIsDisabled: isDisabled
     }));
   }
-  var labelStyles = euiListGroupItemLabelStyles;
-  var cssLabelStyles = [labelStyles.euiListGroupItem__label, wrapText ? labelStyles.wrapText : labelStyles.truncate];
 
   // Only add the label as the title attribute if it's possibly truncated
   // Also ensure the value of the title attribute is a string
@@ -109,23 +97,18 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var shouldRenderTitle = !wrapText && !showToolTip;
-  var labelContent = shouldRenderTitle ? ___EmotionJSX("span", {
-    ref: ref,
-    className: "euiListGroupItem__label",
-    css: cssLabelStyles,
-    title: typeof label === 'string' ? label : innerText
-  }, label) : ___EmotionJSX("span", {
-    className: "euiListGroupItem__label",
-    css: cssLabelStyles
-  }, label);
-
-  // Handle the variety of interaction behavior
-  var itemContent;
-  var innerStyles = useEuiMemoizedStyles(euiListGroupItemInnerStyles);
-  var cssInnerStyles = [innerStyles.euiListGroupItem__inner, innerStyles[size], !isDisabled && innerStyles[color], isActive && innerStyles.isActive, isDisabled && innerStyles.isDisabled, isClickable && !isDisabled && innerStyles.isClickable];
+  var labelProps = {
+    ref: shouldRenderTitle ? ref : undefined,
+    className: 'euiListGroupItem__label',
+    title: shouldRenderTitle ? typeof label === 'string' ? label : innerText : undefined
+  };
+  var styles = useEuiMemoizedStyles(euiListGroupItemStyles);
+  var cssInnerStyles = [styles.euiListGroupItem__inner, !isDisabled && !isActive && styles[color]];
+  var itemProps = {};
   if (href && !isDisabled) {
-    itemContent = ___EmotionJSX("a", _extends({
-      className: "euiListGroupItem__button",
+    itemProps = _objectSpread({
+      element: 'a',
+      className: 'euiListGroupItem__button',
       css: cssInnerStyles,
       href: href,
       target: target,
@@ -134,54 +117,54 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
         rel: rel,
         target: target
       }),
-      onClick: onClick
-    }, rest), iconNode, labelContent, ___EmotionJSX(EuiExternalLinkIcon, {
       external: external,
-      target: target
-    }));
+      onClick: onClick
+    }, rest);
   } else if (href && isDisabled || onClick) {
-    itemContent = ___EmotionJSX("button", _extends({
-      type: "button",
-      className: "euiListGroupItem__button",
+    itemProps = _objectSpread({
+      element: 'button',
+      type: 'button',
+      className: 'euiListGroupItem__button',
       css: cssInnerStyles,
-      disabled: isDisabled,
       onClick: onClick,
       ref: buttonRef
-    }, rest), iconNode, labelContent);
+    }, rest);
   } else {
-    itemContent = ___EmotionJSX("span", _extends({
-      className: "euiListGroupItem__text",
+    itemProps = _objectSpread({
+      element: 'li',
+      className: 'euiListGroupItem__text',
       css: cssInnerStyles
-    }, rest), iconNode, labelContent);
-  }
-  var styles = useEuiMemoizedStyles(euiListGroupItemStyles);
-  var cssStyles = [styles.euiListGroupItem, !isDisabled && isActive && styles.colors.isActive[color], !isDisabled && isClickable && styles.colors.isClickable[color], styles[size], customCss];
-  var classes = classNames('euiListGroupItem', className);
-  if (showToolTip) {
-    var _toolTipProps$anchorP;
-    var tooltipStyles = euiListGroupItemTooltipStyles;
-    var cssTooltipStyles = [tooltipStyles.euiListGroupItem__tooltip, toolTipProps === null || toolTipProps === void 0 || (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css];
-    var anchorClasses = classNames('euiListGroupItem__tooltip', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
-    var anchorPropsAndCss = _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
-      css: cssTooltipStyles
-    });
-    itemContent = ___EmotionJSX("li", {
-      className: classes,
-      css: cssStyles,
-      style: style
-    }, ___EmotionJSX(EuiToolTip, _extends({
-      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
-      position: "right"
-    }, toolTipProps, {
-      anchorClassName: anchorClasses,
-      anchorProps: anchorPropsAndCss
-    }), ___EmotionJSX(React.Fragment, null, itemContent, extraActionNode)));
-  } else {
-    itemContent = ___EmotionJSX("li", {
-      className: classes,
-      css: cssStyles,
-      style: style
-    }, itemContent, extraActionNode);
+    }, rest);
   }
-  return ___EmotionJSX(React.Fragment, null, itemContent);
+  var _itemProps = itemProps,
+    itemClassName = _itemProps.className,
+    itemCss = _itemProps.css,
+    restItemProps = _objectWithoutProperties(_itemProps, _excluded3);
+  var classes = classNames('euiListGroupItem', className, itemClassName);
+  var cssStyles = [styles.euiListGroupItem, itemCss, customCss];
+  var tooltipStyles = euiListGroupItemTooltipStyles;
+  var _tooltipProps = showToolTip ? _objectSpread(_objectSpread({
+    content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
+    position: 'right'
+  }, toolTipProps), {}, {
+    anchorClassName: classNames('euiListGroupItem__tooltip', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName),
+    anchorProps: _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      css: [tooltipStyles.euiListGroupItem__tooltip, toolTipProps === null || toolTipProps === void 0 || (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css]
+    })
+  }) : undefined;
+  return ___EmotionJSX(EuiListItemLayout, _extends({
+    className: classes,
+    wrapperElement: "li",
+    css: cssStyles,
+    style: style
+  }, restItemProps, {
+    tooltipProps: _tooltipProps,
+    showIndicator: false,
+    isSelected: isActive,
+    isDisabled: isDisabled,
+    prepend: iconNode,
+    extraAction: extraActionNode,
+    textWrap: wrapText ? 'wrap' : 'truncate',
+    textProps: labelProps
+  }), label);
 };

package/optimize/es/components/list_group/list_group_item.styles.js

@@ -8,78 +8,34 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiCanAnimate, euiFontSize, logicalCSS, logicalShorthandCSS, euiTextTruncate, euiTextBreakWord } from '../../global_styling';
+import { logicalCSS } from '../../global_styling';
 import { euiButtonColor } from '../../global_styling/mixins/_button';
-export var euiListGroupItemStyles = function euiListGroupItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var primaryBgColor = euiTheme.components.listGroupItemBackgroundPrimaryActive;
-  var subduedBgColor = euiTheme.components.listGroupItemBackgroundSubduedActive;
-  var backgroundHover = euiTheme.components.listGroupItemBackgroundHover;
-  var backgroundPrimaryHover = euiTheme.components.listGroupItemBackgroundPrimaryHover;
-  return {
-    // Base
-    euiListGroupItem: /*#__PURE__*/css("padding:0;display:flex;align-items:center;position:relative;", euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, ";};label:euiListGroupItem;"),
-    // Sizes
-    xs: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
-    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
-    l: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:l;"),
-    // Colors
-    colors: {
-      isActive: {
-        primary: /*#__PURE__*/css("background-color:", primaryBgColor, ";;label:primary;"),
-        text: /*#__PURE__*/css("background-color:", subduedBgColor, ";;label:text;"),
-        subdued: /*#__PURE__*/css("background-color:", subduedBgColor, ";;label:subdued;")
-      },
-      isClickable: {
-        primary: /*#__PURE__*/css("&:hover,&:focus-within{background-color:", backgroundPrimaryHover, ";};label:primary;"),
-        text: /*#__PURE__*/css("&:hover,&:focus-within{background-color:", backgroundHover, ";};label:text;"),
-        subdued: /*#__PURE__*/css("&:hover,&:focus-within{background-color:", backgroundHover, ";};label:subdued;")
-      }
-    }
-  };
-};
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1sre2yb-isClickable",
-  styles: "&:hover,&:focus{text-decoration:underline;};label:isClickable;"
+  name: "1o0ywoj-euiListGroupItem__inner",
+  styles: "display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;font-weight:inherit;label:euiListGroupItem__inner;"
 } : {
-  name: "1sre2yb-isClickable",
-  styles: "&:hover,&:focus{text-decoration:underline;};label:isClickable;",
+  name: "1o0ywoj-euiListGroupItem__inner",
+  styles: "display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;font-weight:inherit;label:euiListGroupItem__inner;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiListGroupItemInnerStyles = function euiListGroupItemInnerStyles(euiThemeContext) {
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "2fwdx2-euiListGroupItem",
+  styles: "position:relative;label:euiListGroupItem;"
+} : {
+  name: "2fwdx2-euiListGroupItem",
+  styles: "position:relative;label:euiListGroupItem;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiListGroupItemStyles = function euiListGroupItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiListGroupItem__inner: /*#__PURE__*/css(logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), " display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;text-align:start;font-weight:inherit;;label:euiListGroupItem__inner;"),
-    // Sizes
-    xs: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " letter-spacing:0;", logicalCSS('min-height', euiTheme.size.l), ";;label:xs;"),
-    s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " letter-spacing:0;", logicalCSS('min-height', euiTheme.size.xl), ";;label:s;"),
-    m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'm'), " ", logicalCSS('min-height', euiTheme.size.xl), ";;label:m;"),
-    l: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'l'), " ", logicalCSS('min-height', euiTheme.size.xxl), ";;label:l;"),
+    euiListGroupItem: _ref2,
+    euiListGroupItem__inner: _ref,
     // Colors
     primary: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'primary').color, ";;label:primary;"),
     text: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'text').color, ";;label:text;"),
-    subdued: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    ghost: /*#__PURE__*/css("color:", euiTheme.colors.textGhost, ";;label:ghost;"),
-    // Variants
-    isDisabled: /*#__PURE__*/css("cursor:not-allowed;&,&:hover,&:focus{color:", euiButtonColor(euiThemeContext, 'disabled').color, ";cursor:not-allowed;background-color:transparent;text-decoration:none;};label:isDisabled;"),
-    isActive: /*#__PURE__*/css(";label:isActive;"),
-    isClickable: _ref,
-    externalIcon: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:externalIcon;")
-  };
-};
-export var euiListGroupItemLabelStyles = {
-  // Base
-  euiListGroupItem__label: /*#__PURE__*/css(";label:euiListGroupItem__label;"),
-  truncate: /*#__PURE__*/css(euiTextTruncate(), ";;label:truncate;"),
-  wrapText: /*#__PURE__*/css(euiTextBreakWord(), ";;label:wrapText;")
-};
-export var euiListGroupItemIconStyles = function euiListGroupItemIconStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  return {
-    // Base
-    euiListGroupItem__icon: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.m), " flex-grow:0;flex-shrink:0;;label:euiListGroupItem__icon;")
+    subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;")
   };
 };
 export var euiListGroupItemTooltipStyles = {

package/optimize/es/components/list_group/list_group_item_extra_action.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { euiCanAnimate } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "ls7zqx-alwaysShow",
   styles: "opacity:1;label:alwaysShow;"
@@ -18,17 +18,17 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "3r3xc1-hoverStyles",
-  styles: ".euiListGroupItem:hover &,.euiListGroupItem__button:focus+&,&:focus{opacity:1;};label:hoverStyles;"
+  name: "13tj7xa-hoverStyles",
+  styles: ".euiListGroupItem:hover &,.euiListGroupItem:hover+&,.euiListGroupItem__button:focus+&,&:hover,&:focus{opacity:1;};label:hoverStyles;"
 } : {
-  name: "3r3xc1-hoverStyles",
-  styles: ".euiListGroupItem:hover &,.euiListGroupItem__button:focus+&,&:focus{opacity:1;};label:hoverStyles;",
+  name: "13tj7xa-hoverStyles",
+  styles: ".euiListGroupItem:hover &,.euiListGroupItem:hover+&,.euiListGroupItem__button:focus+&,&:hover,&:focus{opacity:1;};label:hoverStyles;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/css("flex-shrink:0;opacity:0;", logicalCSS('margin-right', euiTheme.size.s), ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/css("flex-shrink:0;opacity:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };