@elastic/eui 115.0.0 → 116.0.0

package/lib/components/list_group/list_group_item.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiListGroupItem = exports.COLORS = void 0;
+exports.EuiListGroupItem = exports.COLORS = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -12,13 +12,13 @@ var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
 var _inner_text = require("../inner_text");
 var _icon = require("../icon");
-var _tool_tip = require("../tool_tip");
-var _external_link_icon = require("../link/external_link_icon");
+var _list_item_layout = require("../list_item_layout/_list_item_layout");
 var _list_group_item_extra_action = require("./list_group_item_extra_action");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -41,9 +41,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-var SIZES = exports.SIZES = ['xs', 's', 'm', 'l'];
 var COLORS = exports.COLORS = ['primary', 'text', 'subdued'];
 var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref) {
+  var _toolTipProps$anchorP;
   var label = _ref.label,
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
@@ -61,8 +61,6 @@ var EuiListGroupItem = exports.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,
@@ -72,11 +70,8 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
     toolTipText = _ref.toolTipText,
     toolTipProps = _ref.toolTipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isClickable = !!(href || onClick);
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var iconStyles = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemIconStyles);
-  var cssIconStyles = [iconStyles.euiListGroupItem__icon, iconProps === null || iconProps === void 0 ? void 0 : iconProps.css];
   var iconNode;
   if (iconType) {
     iconNode = (0, _react2.jsx)(_icon.EuiIcon, _extends({
@@ -84,14 +79,14 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
     }, iconProps, {
       type: iconType,
       className: (0, _classnames.default)('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 = (0, _services.cloneElementWithCss)(icon, {
-      css: cssIconStyles,
+      css: iconProps === null || iconProps === void 0 ? void 0 : iconProps.css,
       className: (0, _classnames.default)('euiListGroupItem__icon', icon.props.className)
     });
   }
@@ -101,13 +96,8 @@ var EuiListGroupItem = exports.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 = (0, _react2.jsx)(_list_group_item_extra_action.EuiListGroupItemExtraAction, _extends({
-      color: extraActionColor,
+      color: color === 'subdued' ? 'text' : color,
       iconType: _iconType,
       alwaysShow: alwaysShow
     }, _rest, {
@@ -115,8 +105,6 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
       parentIsDisabled: isDisabled
     }));
   }
-  var labelStyles = _list_group_item.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
@@ -125,23 +113,18 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var shouldRenderTitle = !wrapText && !showToolTip;
-  var labelContent = shouldRenderTitle ? (0, _react2.jsx)("span", {
-    ref: ref,
-    className: "euiListGroupItem__label",
-    css: cssLabelStyles,
-    title: typeof label === 'string' ? label : innerText
-  }, label) : (0, _react2.jsx)("span", {
-    className: "euiListGroupItem__label",
-    css: cssLabelStyles
-  }, label);
-
-  // Handle the variety of interaction behavior
-  var itemContent;
-  var innerStyles = (0, _services.useEuiMemoizedStyles)(_list_group_item.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 = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemStyles);
+  var cssInnerStyles = [styles.euiListGroupItem__inner, !isDisabled && !isActive && styles[color]];
+  var itemProps = {};
   if (href && !isDisabled) {
-    itemContent = (0, _react2.jsx)("a", _extends({
-      className: "euiListGroupItem__button",
+    itemProps = _objectSpread({
+      element: 'a',
+      className: 'euiListGroupItem__button',
       css: cssInnerStyles,
       href: href,
       target: target,
@@ -150,56 +133,56 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
         rel: rel,
         target: target
       }),
-      onClick: onClick
-    }, rest), iconNode, labelContent, (0, _react2.jsx)(_external_link_icon.EuiExternalLinkIcon, {
       external: external,
-      target: target
-    }));
+      onClick: onClick
+    }, rest);
   } else if (href && isDisabled || onClick) {
-    itemContent = (0, _react2.jsx)("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 = (0, _react2.jsx)("span", _extends({
-      className: "euiListGroupItem__text",
+    itemProps = _objectSpread({
+      element: 'li',
+      className: 'euiListGroupItem__text',
       css: cssInnerStyles
-    }, rest), iconNode, labelContent);
-  }
-  var styles = (0, _services.useEuiMemoizedStyles)(_list_group_item.euiListGroupItemStyles);
-  var cssStyles = [styles.euiListGroupItem, !isDisabled && isActive && styles.colors.isActive[color], !isDisabled && isClickable && styles.colors.isClickable[color], styles[size], customCss];
-  var classes = (0, _classnames.default)('euiListGroupItem', className);
-  if (showToolTip) {
-    var _toolTipProps$anchorP;
-    var tooltipStyles = _list_group_item.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 = (0, _classnames.default)('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 = (0, _react2.jsx)("li", {
-      className: classes,
-      css: cssStyles,
-      style: style
-    }, (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
-      content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
-      position: "right"
-    }, toolTipProps, {
-      anchorClassName: anchorClasses,
-      anchorProps: anchorPropsAndCss
-    }), (0, _react2.jsx)(_react.default.Fragment, null, itemContent, extraActionNode)));
-  } else {
-    itemContent = (0, _react2.jsx)("li", {
-      className: classes,
-      css: cssStyles,
-      style: style
-    }, itemContent, extraActionNode);
+    }, rest);
   }
-  return (0, _react2.jsx)(_react.default.Fragment, null, itemContent);
+  var _itemProps = itemProps,
+    itemClassName = _itemProps.className,
+    itemCss = _itemProps.css,
+    restItemProps = _objectWithoutProperties(_itemProps, _excluded3);
+  var classes = (0, _classnames.default)('euiListGroupItem', className, itemClassName);
+  var cssStyles = [styles.euiListGroupItem, itemCss, customCss];
+  var tooltipStyles = _list_group_item.euiListGroupItemTooltipStyles;
+  var _tooltipProps = showToolTip ? _objectSpread(_objectSpread({
+    content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
+    position: 'right'
+  }, toolTipProps), {}, {
+    anchorClassName: (0, _classnames.default)('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 (0, _react2.jsx)(_list_item_layout.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);
 };
 EuiListGroupItem.propTypes = {
   className: _propTypes.default.string,
@@ -207,12 +190,22 @@ EuiListGroupItem.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * Size of the label text
-       */
-  size: _propTypes.default.any,
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: _propTypes.default.bool,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: _propTypes.default.bool,
   /**
        * By default the item will get the color `text`.
        * You can customize the color of the item by passing a color name.
+       * @default 'text'
        */
   color: _propTypes.default.any,
   /**
@@ -223,10 +216,6 @@ EuiListGroupItem.propTypes = {
        * Apply styles indicating an item is active
        */
   isActive: _propTypes.default.bool,
-  /**
-       * Apply styles indicating an item is disabled
-       */
-  isDisabled: _propTypes.default.bool,
   /**
        * Make the list item label a link.
        * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.

package/lib/components/list_group/list_group_item.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiListGroupItemTooltipStyles = exports.euiListGroupItemStyles = exports.euiListGroupItemLabelStyles = exports.euiListGroupItemInnerStyles = exports.euiListGroupItemIconStyles = void 0;
+exports.euiListGroupItemTooltipStyles = exports.euiListGroupItemStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _button = require("../../global_styling/mixins/_button");
@@ -14,76 +14,32 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiListGroupItemStyles = exports.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__*/(0, _react.css)("padding:0;display:flex;align-items:center;position:relative;", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, ";};label:euiListGroupItem;"),
-    // Sizes
-    xs: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:l;"),
-    // Colors
-    colors: {
-      isActive: {
-        primary: /*#__PURE__*/(0, _react.css)("background-color:", primaryBgColor, ";;label:primary;"),
-        text: /*#__PURE__*/(0, _react.css)("background-color:", subduedBgColor, ";;label:text;"),
-        subdued: /*#__PURE__*/(0, _react.css)("background-color:", subduedBgColor, ";;label:subdued;")
-      },
-      isClickable: {
-        primary: /*#__PURE__*/(0, _react.css)("&:hover,&:focus-within{background-color:", backgroundPrimaryHover, ";};label:primary;"),
-        text: /*#__PURE__*/(0, _react.css)("&:hover,&:focus-within{background-color:", backgroundHover, ";};label:text;"),
-        subdued: /*#__PURE__*/(0, _react.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__
 };
-var euiListGroupItemInnerStyles = exports.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__
+};
+var euiListGroupItemStyles = exports.euiListGroupItemStyles = function euiListGroupItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiListGroupItem__inner: /*#__PURE__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'm'), " ", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'l'), " ", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xxl), ";;label:l;"),
+    euiListGroupItem: _ref2,
+    euiListGroupItem__inner: _ref,
     // Colors
     primary: /*#__PURE__*/(0, _react.css)("color:", (0, _button.euiButtonColor)(euiThemeContext, 'primary').color, ";;label:primary;"),
     text: /*#__PURE__*/(0, _react.css)("color:", (0, _button.euiButtonColor)(euiThemeContext, 'text').color, ";;label:text;"),
-    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    ghost: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textGhost, ";;label:ghost;"),
-    // Variants
-    isDisabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;&,&:hover,&:focus{color:", (0, _button.euiButtonColor)(euiThemeContext, 'disabled').color, ";cursor:not-allowed;background-color:transparent;text-decoration:none;};label:isDisabled;"),
-    isActive: /*#__PURE__*/(0, _react.css)(";label:isActive;"),
-    isClickable: _ref,
-    externalIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:externalIcon;")
-  };
-};
-var euiListGroupItemLabelStyles = exports.euiListGroupItemLabelStyles = {
-  // Base
-  euiListGroupItem__label: /*#__PURE__*/(0, _react.css)(";label:euiListGroupItem__label;"),
-  truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), ";;label:truncate;"),
-  wrapText: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";;label:wrapText;")
-};
-var euiListGroupItemIconStyles = exports.euiListGroupItemIconStyles = function euiListGroupItemIconStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  return {
-    // Base
-    euiListGroupItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.m), " flex-grow:0;flex-shrink:0;;label:euiListGroupItem__icon;")
+    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;")
   };
 };
 var euiListGroupItemTooltipStyles = exports.euiListGroupItemTooltipStyles = {

package/lib/components/list_group/list_group_item_extra_action.styles.js

@@ -22,17 +22,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__
 };
 var euiListGroupItemExtraActionStyles = exports.euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };

package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -104,12 +104,22 @@ EuiPinnableListGroup.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any,
     /**
-         * Size of the label text
-         */
-    size: _propTypes.default.any,
+       * Controls the disabled behavior via the native `disabled` attribute.
+       */
+    isDisabled: _propTypes.default.bool,
+    /**
+       * NOTE: Beta feature, may be changed or removed in the future
+       *
+       * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+       * This results in a semantically disabled button without the default browser handling of the disabled state.
+       *
+       * Use e.g. when a disabled button should have a tooltip.
+       */
+    hasAriaDisabled: _propTypes.default.bool,
     /**
          * By default the item will get the color `text`.
          * You can customize the color of the item by passing a color name.
+         * @default 'text'
          */
     color: _propTypes.default.any,
     /**
@@ -120,10 +130,6 @@ EuiPinnableListGroup.propTypes = {
          * Apply styles indicating an item is active
          */
     isActive: _propTypes.default.bool,
-    /**
-         * Apply styles indicating an item is disabled
-         */
-    isDisabled: _propTypes.default.bool,
     /**
          * Make the list item label a link.
          * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -258,13 +264,12 @@ EuiPinnableListGroup.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any,
-    /**
-         * Size of the label text
-         */
-    size: _propTypes.default.any,
+    isDisabled: _propTypes.default.bool,
+    hasAriaDisabled: _propTypes.default.bool,
     /**
          * By default the item will get the color `text`.
          * You can customize the color of the item by passing a color name.
+         * @default 'text'
          */
     color: _propTypes.default.any,
     /**
@@ -275,10 +280,6 @@ EuiPinnableListGroup.propTypes = {
          * Apply styles indicating an item is active
          */
     isActive: _propTypes.default.bool,
-    /**
-         * Apply styles indicating an item is disabled
-         */
-    isDisabled: _propTypes.default.bool,
     /**
          * Make the list item label a link.
          * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -383,24 +384,11 @@ EuiPinnableListGroup.propTypes = {
        * Add a border to the list container
        */
   bordered: _propTypes.default.bool,
-  /**
-       * Remove container padding, stretching list items to the edges
-       */
-  flush: _propTypes.default.bool,
-  /**
-       * Spacing between list items
-       */
-  gutterSize: _propTypes.default.any,
   /**
        * Change the colors of all `listItems` at once
        * @default text
        */
   color: _propTypes.default.any,
-  /**
-       * Change the size of all `listItems` at once
-       * @default m
-       */
-  size: _propTypes.default.any,
   /**
        * Sets the max-width of the page.
        * Set to `true` to use the default size,