@elastic/eui 113.1.0 → 113.2.1

package/lib/components/accordion/accordion_trigger/accordion_arrow.js

@@ -39,7 +39,7 @@ var EuiAccordionArrow = exports.EuiAccordionArrow = function EuiAccordionArrow(_
   }, arrowProps, rest, {
     className: classes,
     css: cssStyles,
-    iconType: "arrowRight"
+    iconType: "chevronSingleRight"
   }));
 };
 EuiAccordionArrow.propTypes = {

package/lib/components/badge/badge.js

@@ -68,7 +68,7 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isNamedColor = COLORS.includes(color);
   var isIconOnly = !children && !!iconType;
-  var euiTheme = (0, _services.useEuiTheme)();
+  var euiThemeContext = (0, _services.useEuiTheme)();
   var customColorStyles = (0, _react.useMemo)(function () {
     // Disabled badges should not have custom colors
     if (isDisabled) return style;
@@ -78,22 +78,28 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
     // Do our best to ensure custom colors provide sufficient contrast
     try {
       // Set dark or light text color based upon best contrast
-      var textColor = (0, _color_utils.getTextColor)(euiTheme, color);
+      var textColor = (0, _color_utils.getTextColor)(euiThemeContext, color);
+      // These values are approximations as we don't know what custom color is passed
+      var customInteractiveColors = (0, _color_utils.getCustomInteractiveColors)(euiThemeContext, color);
 
       // Emit a warning if contrast is below WCAG threshold (centralized util)
       (0, _contrast.warnIfContrastBelowMin)(textColor, color, _contrast.wcagContrastMin);
       return _objectSpread({
         '--euiBadgeBackgroundColor': color,
-        '--euiBadgeTextColor': textColor
+        '--euiBadgeTextColor': textColor,
+        '--euiBadgeBackgroundHoverColor': customInteractiveColors.backgroundHover,
+        '--euiBadgeBackgroundActiveColor': customInteractiveColors.backgroundActive
       }, style);
     } catch (err) {
       if (!(0, _color_utils.getIsValidColor)(color)) {
         console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
       }
     }
-  }, [color, isNamedColor, isDisabled, style, euiTheme]);
+  }, [color, isNamedColor, isDisabled, style, euiThemeContext]);
   var styles = (0, _services.useEuiMemoizedStyles)(_badge.euiBadgeStyles);
-  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && styles.clickable]));
+  var clickableCssStyles = styles.clickable[isNamedColor ? color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill' : 'custom'];
+  var iconOnClickCssStyles = isNamedColor ? styles.iconClickable[color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill'] : styles.iconClickable.custom;
+  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat(_toConsumableArray(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && clickableCssStyles, iconOnClick && !(onClick || href) && iconOnClickCssStyles]));
   var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];

package/lib/components/badge/badge.styles.js

@@ -34,9 +34,31 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   var defaultBadgeColors = badgeColors.fill.default;
+  var focusOutlineOffset = (0, _global_styling.mathWithUnits)([euiTheme.focus.width, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
   var setBadgeColorVars = function setBadgeColorVars(colors) {
-    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    ").concat(colors.border ? "--euiBadgeBorder: ".concat(colors.border, ";") : '', "\n  ");
+    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    --euiBadgeBackgroundHoverColor: ").concat(colors.backgroundHover, ";\n    --euiBadgeBackgroundActiveColor: ").concat(colors.backgroundActive, ";\n    ").concat(colors.borderColor ? "--euiBadgeBorder: ".concat(euiTheme.border.width.thin, " solid ").concat(colors.borderColor, ";") : '', "\n  ");
+  };
+  var getButtonInteractionStyles = function getButtonInteractionStyles(euiThemeContext) {
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fill';
+    return "\n      ".concat((0, _global_styling.euiButtonInteractionStyles)(euiThemeContext, {
+      color: 'var(--euiBadgeTextColor)',
+      background: 'var(--euiBadgeBackgroundColor)',
+      borderColor: 'var(--euiBadgeBorder)',
+      backgroundHover: 'var(--euiBadgeBackgroundHoverColor)',
+      backgroundActive: 'var(--euiBadgeBackgroundActiveColor)'
+    }, type), "\n    ");
+  };
+  var highContrastStyles = (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n      text-decoration: underline;\n    ",
+    forced: "\n      &::after { display: none; }\n    "
+  });
+  var focusStyles = "\n    &:focus {\n      ".concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      /* uses custom offset as the default \"outset\" is not enough */\n      outline-offset: ").concat(focusOutlineOffset, ";\n    }\n  ");
+  var getClickableStyles = function getClickableStyles(interactionStyles) {
+    return "\n    &:not(:disabled) {\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  ");
   };
+  var customInteractiveStyles = "\n    &:hover {\n      background-color: var(--euiBadgeBackgroundHoverColor);\n    }\n\n    &:active {\n      background-color: var(--euiBadgeBackgroundActiveColor);\n    }\n\n    ".concat(focusStyles, "\n  ");
   var inlinePadding = (0, _global_styling.mathWithUnits)(
   // Account for the (usually transparent) border so that the visual
   // padding is of size s
@@ -56,7 +78,36 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     [euiTheme.size.xs, euiTheme.border.width.thin], function (size, borderWidth) {
       return size - borderWidth;
     }), ";;label:iconOnly;"),
-    clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    get clickable() {
+      // ensures border colors are aligned with the background colors
+      var borderHoverStyles = "\n        &:hover { \n          border-color: var(--euiBadgeBackgroundHoverColor);\n        }\n        &:active {\n          border-color: var(--euiBadgeBackgroundActiveColor);\n        }\n      ";
+      return {
+        fill: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'fill')), " ", borderHoverStyles, ";;label:fill;"),
+        base: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " ", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";;label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " &:hover,&:focus{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/(0, _react.css)("&:not(:disabled){", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
+      };
+    },
+    // on icon button hover, we apply hover styles on the entire badge
+    get iconClickable() {
+      var iconButtonSelector = function iconButtonSelector() {
+        var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ':hover';
+        return "&:not(:disabled):where(:has(.euiBadge__iconButton".concat(state, "))");
+      };
+      var borderHoverStyles = "\n        border-color: var(--euiBadgeBackgroundHoverColor);\n      ";
+      return {
+        fill: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'fill'), " ", borderHoverStyles, ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:fill;"),
+        base: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), " ", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/(0, _react.css)(iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, " ", customInteractiveStyles, ";};label:custom;")
+      };
+    },
     colors: {
       fill: {
         default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.default), " border-color:", badgeColors.fill.default.borderColor, ";;label:default;"),
@@ -81,7 +132,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
         danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
       }
     },
-    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
     // Ensure proper height in case of just displaying an icon

package/lib/components/badge/color_utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextColor = exports.getIsValidColor = exports.getBadgeColors = exports.euiBadgeColors = void 0;
+exports.getTextColor = exports.getIsValidColor = exports.getCustomInteractiveColors = exports.getBadgeColors = exports.euiBadgeColors = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _services = require("../../services");
 var _button = require("../../global_styling/mixins/_button");
@@ -33,38 +33,44 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
   var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
   var fill = {
     // Colors shared between buttons and badges
-    primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
-    neutral: (0, _button.euiButtonFillColor)(euiThemeContext, 'neutral'),
-    success: (0, _button.euiButtonFillColor)(euiThemeContext, 'success'),
-    warning: (0, _button.euiButtonFillColor)(euiThemeContext, 'warning'),
-    risk: (0, _button.euiButtonFillColor)(euiThemeContext, 'risk'),
-    danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
-    accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
+    primary: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'primary'),
+    neutral: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'neutral'),
+    success: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'success'),
+    warning: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'warning'),
+    risk: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'risk'),
+    danger: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'danger'),
+    accent: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'accent'),
     // Colors unique to badges
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
-      borderColor: highContrastMode ? euiTheme.border.color : ''
+      backgroundHover: euiTheme.components.buttons.backgroundFilledTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundFilledTextActive,
+      borderColor: 'transparent'
     })
   };
   var base = {
-    primary: (0, _button.euiButtonColor)(euiThemeContext, 'primary'),
-    neutral: (0, _button.euiButtonColor)(euiThemeContext, 'neutral'),
-    success: (0, _button.euiButtonColor)(euiThemeContext, 'success'),
-    warning: (0, _button.euiButtonColor)(euiThemeContext, 'warning'),
-    risk: (0, _button.euiButtonColor)(euiThemeContext, 'risk'),
-    danger: (0, _button.euiButtonColor)(euiThemeContext, 'danger'),
-    accent: (0, _button.euiButtonColor)(euiThemeContext, 'accent'),
+    primary: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'primary'),
+    neutral: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'neutral'),
+    success: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'success'),
+    warning: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'warning'),
+    risk: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'risk'),
+    danger: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'danger'),
+    accent: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'accent'),
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.backgroundLightText)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : ''
     })
   };
   return {
     fill: fill,
     base: base,
-    disabled: _objectSpread(_objectSpread({}, (0, _button.euiButtonColor)(euiThemeContext, 'disabled')), {}, {
+    disabled: _objectSpread(_objectSpread({}, (0, _button.getEuiButtonColorValues)(euiThemeContext, 'disabled')), {}, {
       borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
     }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
@@ -88,6 +94,22 @@ var getTextColor = exports.getTextColor = function getTextColor(_ref, bgColor) {
   var textColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
   return textColor;
 };
+
+/**
+ * Generates the background hover and active colors for custom interactive badges by mixing
+ * the background color with black or white depending on the background color luminance.
+ * @returns { backgroundHover: string, backgroundActive: string }
+ */
+var getCustomInteractiveColors = exports.getCustomInteractiveColors = function getCustomInteractiveColors(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var isDarkColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb()));
+  var backgroundHover = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 10%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 10%)");
+  var backgroundActive = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 15%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 15%)");
+  return {
+    backgroundHover: backgroundHover,
+    backgroundActive: backgroundActive
+  };
+};
 var getIsValidColor = exports.getIsValidColor = function getIsValidColor(color) {
   return (0, _utils.chromaValid)((0, _utils.parseColor)(color || '') || '');
 };

package/lib/components/basic_table/basic_table.a11y.js

@@ -165,7 +165,7 @@ describe('EuiTable', function () {
               return toggleDetails(user);
             },
             "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
-            iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
+            iconType: itemIdToExpandedRowMapValues[user.id] ? 'chevronSingleDown' : 'chevronSingleRight'
           });
         }
       }]);

package/lib/components/basic_table/basic_table.js

@@ -26,7 +26,7 @@ var _delay_render = require("../delay_render");
 var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -377,6 +377,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         rowHeader = _this$props2.rowHeader,
         tableLayout = _this$props2.tableLayout,
         hasBackground = _this$props2.hasBackground,
+        scrollableInline = _this$props2.scrollableInline,
         rest = _objectWithoutProperties(_this$props2, _excluded);
       var classes = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -395,7 +396,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         responsiveBreakpoint = _this$props3.responsiveBreakpoint,
         tableLayout = _this$props3.tableLayout,
         hasBackground = _this$props3.hasBackground,
-        loading = _this$props3.loading;
+        loading = _this$props3.loading,
+        scrollableInline = _this$props3.scrollableInline;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
@@ -404,6 +406,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         hasBackground: hasBackground,
+        scrollableInline: scrollableInline,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
@@ -506,6 +509,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         var _ref8 = column,
           field = _ref8.field,
           width = _ref8.width,
+          minWidth = _ref8.minWidth,
+          maxWidth = _ref8.maxWidth,
           name = _ref8.name,
           nameTooltip = _ref8.nameTooltip,
           align = _ref8.align,
@@ -517,6 +522,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         var columnAlign = align || _this3.getAlignForDataType(dataType);
         var sharedProps = {
           width: width,
+          minWidth: minWidth,
+          maxWidth: maxWidth,
           tooltipProps: nameTooltip,
           description: description,
           mobileOptions: mobileOptions,
@@ -526,9 +533,13 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
 
         // actions column
         if (column.actions) {
+          var sticky = _this3.props.scrollableInline && column.sticky;
           headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({}, sharedProps, {
             key: "_actions_h_".concat(index),
-            align: "right"
+            align: "right",
+            sticky: sticky ? {
+              side: 'end'
+            } : undefined
           }), name));
           return;
         }
@@ -583,7 +594,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         items = _this$props7.items,
         columns = _this$props7.columns,
         pagination = _this$props7.pagination,
-        selection = _this$props7.selection;
+        selection = _this$props7.selection,
+        scrollableInline = _this$props7.scrollableInline;
       var footers = [];
       var hasDefinedFooter = false;
       if (selection) {
@@ -604,18 +616,23 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         if (mobileOptions !== null && mobileOptions !== void 0 && mobileOptions.only) {
           return; // exclude columns that only exist for mobile headers
         }
+        var sticky = scrollableInline && column.actions && column.sticky === true;
+        var sharedProps = {
+          align: align,
+          sticky: sticky ? {
+            side: 'end'
+          } : undefined
+        };
         if (footer) {
-          footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, {
-            key: "footer_".concat(String(field), "_").concat(footers.length - 1),
-            align: align
-          }, footer));
+          footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, _extends({
+            key: "footer_".concat(String(field), "_").concat(footers.length - 1)
+          }, sharedProps), footer));
           hasDefinedFooter = true;
         } else {
           // Footer is undefined, so create an empty cell to preserve layout
-          footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, {
-            key: "footer_empty_".concat(footers.length - 1),
-            align: align
-          }, undefined));
+          footers.push((0, _react2.jsx)(_table.EuiTableFooterCell, _extends({
+            key: "footer_empty_".concat(footers.length - 1)
+          }, sharedProps), undefined));
         }
       });
       return footers.length && hasDefinedFooter ? (0, _react2.jsx)(_table.EuiTableFooter, null, footers) : null;
@@ -657,7 +674,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           width: '100%'
         }
       }, (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "minusInCircle",
+        type: "minusCircle",
         color: "danger"
       }), " ", error));
     }
@@ -842,13 +859,17 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         });
       }
+      var sticky = this.props.scrollableInline && column.sticky;
       var key = "record_actions_".concat(itemId, "_").concat(columnIndex);
       return (0, _react2.jsx)(_table.EuiTableRowCell, {
         key: key,
         align: "right",
         textOnly: false,
         hasActions: hasCustomActions ? 'custom' : true,
-        append: this.renderCopyChar(columnIndex)
+        append: this.renderCopyChar(columnIndex),
+        sticky: sticky ? {
+          side: 'end'
+        } : undefined
       }, (0, _react2.jsx)(_expanded_item_actions.ExpandedItemActions, {
         actions: actualActions,
         actionsDisabled: allDisabled,
@@ -1148,9 +1169,35 @@ EuiBasicTable.propTypes = {
        */
     dataType: _propTypes.default.oneOf(["auto", "string", "number", "boolean", "date"]),
     /**
-       * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..)
+       * Requested width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout#values|table-layout algorithms on MDN}
        */
     width: _propTypes.default.string,
+    /**
+       * Requested minimum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    minWidth: _propTypes.default.string,
+    /**
+       * Requested maximum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    maxWidth: _propTypes.default.string,
     /**
        * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against
        */
@@ -1396,7 +1443,26 @@ EuiBasicTable.propTypes = {
         delay: _propTypes.default.any,
         position: _propTypes.default.any
       })
-    })
+    }),
+    /**
+       * Whether the actions column should always stick to the right side
+       * of the table no matter the inline (horizontal) scroll position.
+       *
+       * This option should be used in tables with `scrollableInline={true}`
+       * and will be enabled by default in future versions of EUI.
+       *
+       * Currently, it can only be used when the actions column is the last column
+       * of the table.
+       *
+       * When set to `true` and `hasBackground: false` is set on the table,
+       * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+       * the background color of the element containing the table.
+       * Otherwise, the sticky column will use the default `backgroundBasePlain`
+       * background color.
+       * @beta
+       * @default false
+       */
+    sticky: _propTypes.default.bool
   }).isRequired]).isRequired),
   /**
      * Error message to display

package/lib/components/basic_table/collapsed_item_actions.js

@@ -102,7 +102,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     className: className,
     "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
     title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
-    iconType: "boxesHorizontal",
+    iconType: "boxesVertical",
     color: "text",
     isDisabled: actionsDisabled,
     onClick: function onClick() {

package/lib/components/basic_table/in_memory_table.js

@@ -695,9 +695,35 @@ EuiInMemoryTable.propTypes = {
        */
     dataType: _propTypes.default.oneOf(["auto", "string", "number", "boolean", "date"]),
     /**
-       * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..)
+       * Requested width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout#values|table-layout algorithms on MDN}
        */
     width: _propTypes.default.string,
+    /**
+       * Requested minimum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    minWidth: _propTypes.default.string,
+    /**
+       * Requested maximum width of the column.
+       *
+       * Exact width settings are not guaranteed in certain table layouts
+       * or configurations, and may be adjusted by browser's algorithm.
+       * Consider this value a guidance.
+       *
+       * This property takes effect only when `tableLayout="auto"` is set on the table.
+       */
+    maxWidth: _propTypes.default.string,
     /**
        * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against
        */
@@ -943,7 +969,26 @@ EuiInMemoryTable.propTypes = {
         delay: _propTypes.default.any,
         position: _propTypes.default.any
       })
-    })
+    }),
+    /**
+       * Whether the actions column should always stick to the right side
+       * of the table no matter the inline (horizontal) scroll position.
+       *
+       * This option should be used in tables with `scrollableInline={true}`
+       * and will be enabled by default in future versions of EUI.
+       *
+       * Currently, it can only be used when the actions column is the last column
+       * of the table.
+       *
+       * When set to `true` and `hasBackground: false` is set on the table,
+       * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+       * the background color of the element containing the table.
+       * Otherwise, the sticky column will use the default `backgroundBasePlain`
+       * background color.
+       * @beta
+       * @default false
+       */
+    sticky: _propTypes.default.bool
   }).isRequired]).isRequired),
   /**
      * Error message to display

package/lib/components/breadcrumbs/_breadcrumb_content.js

@@ -355,7 +355,7 @@ var EuiBreadcrumbPopover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
     }, rest), (0, _react2.jsx)("span", {
       css: truncationStyles
     }, children), (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "arrowDown",
+      type: "chevronSingleDown",
       size: "s",
       "aria-label": " - ".concat(popoverAriaLabel)
     }))

package/lib/components/button/split_button/split_button.js

@@ -63,8 +63,8 @@ var _EuiSplitButton = exports._EuiSplitButton = function _EuiSplitButton(_ref) {
     hasAriaDisabled: hasAriaDisabled,
     isLoading: isLoading
   };
-  var buttonFilledColors = (0, _global_styling.getEuiFilledButtonColors)(euiThemeContext, isDisabled ? 'disabled' : color);
-  var buttonColors = (0, _global_styling.getEuiButtonColors)(euiThemeContext, isDisabled ? 'disabled' : color);
+  var buttonFilledColors = (0, _global_styling.getEuiFilledButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
+  var buttonColors = (0, _global_styling.getEuiButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
   var classes = (0, _classnames.default)('euiSplitButton', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_split_button.euiSplitButtonStyles);
   var cssStyles = [styles.euiSplitButton, fill && styles.fill];

package/lib/components/button/split_button/split_button_actions.js

@@ -95,8 +95,8 @@ var EuiSplitButtonActionSecondary = exports.EuiSplitButtonActionSecondary = func
   var styles = _split_button.euiSplitButtonActionStyles;
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
     display: display,
-    // enforce arrowDown icon when a popover is rendered
-    iconType: popoverProps != null ? 'arrowDown' : rest.iconType,
+    // enforce chevronSingleDown icon when a popover is rendered
+    iconType: popoverProps != null ? 'chevronSingleDown' : rest.iconType,
     isDisabled: _isDisabled,
     isLoading: _isLoading,
     css: [styles.euiSplitButtonActionSecondary],

package/lib/components/code/code_block_copy.js

@@ -69,7 +69,7 @@ var useCopy = exports.useCopy = function useCopy(_ref) {
     }, function (copy) {
       return (0, _react2.jsx)(_button.EuiButtonIcon, {
         onClick: copy,
-        iconType: "copyClipboard",
+        iconType: "copy",
         color: "text",
         "aria-label": copyAriaLabel || copyDefaultAriaLabel,
         "data-test-subj": "euiCodeBlockCopy"

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -85,7 +85,7 @@ var EuiCollapsedNavPopover = exports.EuiCollapsedNavPopover = function EuiCollap
     repositionOnScroll: true,
     button: (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, {
       title: title,
-      icon: icon || 'boxesHorizontal',
+      icon: icon || 'boxesVertical',
       iconProps: iconProps,
       isSelected: isSelected,
       onClick: togglePopover,

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -249,7 +249,7 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
           onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
           side: 'right',
           tabIndex: -1,
-          type: 'arrowDown'
+          type: 'chevronSingleDown'
         };
       }
       var wrapClasses = (0, _classnames.default)('euiComboBox__inputWrap', {

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -57,7 +57,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var hitEnterBadge = (0, _react2.jsx)(_badge.EuiBadge, {
   className: "euiComboBoxOption__enterBadge",
   color: "hollow",
-  iconType: "returnKey",
+  iconType: "return",
   "aria-hidden": "true"
 });
 var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {

package/lib/components/context_menu/context_menu_item.js

@@ -67,7 +67,7 @@ var EuiContextMenuItem = exports.EuiContextMenuItem = function EuiContextMenuIte
     css: styles.euiContextMenu__icon
   }));
   var arrow = hasPanel && (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "arrowRight",
+    type: "chevronSingleRight",
     size: "m",
     className: "euiContextMenu__arrow",
     css: styles.euiContextMenuItem__arrow

package/lib/components/context_menu/context_menu_panel.js

@@ -361,7 +361,7 @@ var EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/f
           if (onClose) _this3.backButton = node;
         },
         "data-test-subj": onClose ? 'contextMenuPanelTitleButton' : 'contextMenuPanelTitle',
-        icon: onClose && 'arrowLeft'
+        icon: onClose && 'chevronSingleLeft'
       }, title);
       var content = items && items.length ? items.map(function (MenuItem) {
         var cloneProps = {};

package/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -58,7 +58,7 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         display: "fill",
         color: "primary",
         iconSize: "s",
-        iconType: "expand",
+        iconType: "maximize",
         "aria-hidden": true,
         onClick: onExpandClick,
         title: expandButtonTitle

package/lib/components/datagrid/body/header/column_actions.js

@@ -309,7 +309,7 @@ var getHideColumnAction = exports.getHideColumnAction = function getHideColumnAc
       default: "Hide column"
     }),
     onClick: onClickHideColumn,
-    iconType: 'eyeClosed',
+    iconType: 'eyeSlash',
     size: 'xs',
     color: 'text'
   };