@elastic/eui 115.0.0 → 116.0.0

package/es/components/list_group/list_group_item.js

@@ -1,6 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -30,14 +31,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,
@@ -55,8 +55,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,
@@ -66,11 +64,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({
@@ -78,14 +73,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)
     });
   }
@@ -95,13 +90,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, {
@@ -109,8 +99,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
@@ -119,23 +107,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,
@@ -144,56 +127,56 @@ 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);
 };
 EuiListGroupItem.propTypes = {
   className: PropTypes.string,
@@ -201,12 +184,22 @@ EuiListGroupItem.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
   /**
-       * Size of the label text
-       */
-  size: PropTypes.any,
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.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.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.any,
   /**
@@ -217,10 +210,6 @@ EuiListGroupItem.propTypes = {
        * Apply styles indicating an item is active
        */
   isActive: PropTypes.bool,
-  /**
-       * Apply styles indicating an item is disabled
-       */
-  isDisabled: PropTypes.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/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/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
   };

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -96,12 +96,22 @@ EuiPinnableListGroup.propTypes = {
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
     /**
-         * Size of the label text
-         */
-    size: PropTypes.any,
+       * Controls the disabled behavior via the native `disabled` attribute.
+       */
+    isDisabled: PropTypes.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.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.any,
     /**
@@ -112,10 +122,6 @@ EuiPinnableListGroup.propTypes = {
          * Apply styles indicating an item is active
          */
     isActive: PropTypes.bool,
-    /**
-         * Apply styles indicating an item is disabled
-         */
-    isDisabled: PropTypes.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.
@@ -250,13 +256,12 @@ EuiPinnableListGroup.propTypes = {
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
-    /**
-         * Size of the label text
-         */
-    size: PropTypes.any,
+    isDisabled: PropTypes.bool,
+    hasAriaDisabled: PropTypes.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.any,
     /**
@@ -267,10 +272,6 @@ EuiPinnableListGroup.propTypes = {
          * Apply styles indicating an item is active
          */
     isActive: PropTypes.bool,
-    /**
-         * Apply styles indicating an item is disabled
-         */
-    isDisabled: PropTypes.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.
@@ -375,24 +376,11 @@ EuiPinnableListGroup.propTypes = {
        * Add a border to the list container
        */
   bordered: PropTypes.bool,
-  /**
-       * Remove container padding, stretching list items to the edges
-       */
-  flush: PropTypes.bool,
-  /**
-       * Spacing between list items
-       */
-  gutterSize: PropTypes.any,
   /**
        * Change the colors of all `listItems` at once
        * @default text
        */
   color: PropTypes.any,
-  /**
-       * Change the size of all `listItems` at once
-       * @default m
-       */
-  size: PropTypes.any,
   /**
        * Sets the max-width of the page.
        * Set to `true` to use the default size,