@elastic/eui 101.4.0 → 102.0.0

package/optimize/es/themes/amsterdam/global_styling/variables/_colors_vis.js

@@ -103,21 +103,6 @@ export var colorVis = {
   euiColorVisDanger0: '#CC5642',
   euiColorVisDanger1: euiPaletteColorBlind.euiColorVis9.graphic,
   euiColorVisNeutral0: '#FFFFFF',
-  euiColorSeverity0: '#D3DAE6',
-  euiColorSeverity1: '#6092C0',
-  euiColorSeverity2: '#78A2C9',
-  euiColorSeverity3: '#90B0D1',
-  euiColorSeverity4: '#A6C0DA',
-  euiColorSeverity5: '#BECFE3',
-  euiColorSeverity6: '#DECC79',
-  euiColorSeverity7: '#D6BF57',
-  euiColorSeverity8: '#E69D8F',
-  euiColorSeverity9: '#E2907F',
-  euiColorSeverity10: '#E18773',
-  euiColorSeverity11: '#DD7B67',
-  euiColorSeverity12: '#D66E5C',
-  euiColorSeverity13: '#D2634E',
-  euiColorSeverity14: '#CC5642',
   euiColorVisGrey0: '#d3dae6',
   euiColorVisGrey1: '#98a2b3',
   euiColorVisGrey2: '#69707d',

package/optimize/lib/components/badge/badge.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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) { (0, _defineProperty2.default)(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; }
 var ICON_SIDES = exports.ICON_SIDES = ['left', 'right'];
-var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'accent', 'neutral', 'success', 'warning', 'risk', 'danger'];
 var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

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

@@ -42,9 +42,11 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
+    neutral: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.neutral), ";label:neutral;"),
+    success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
     warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
+    risk: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.risk), ";label:risk;"),
     danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
-    success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
     disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(

package/optimize/lib/components/badge/color_utils.js

@@ -26,8 +26,10 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
   return {
     // 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'),
     accentSecondary: (0, _button.euiButtonFillColor)(euiThemeContext, 'accentSecondary'),

package/optimize/lib/components/datagrid/body/header/column_sorting.js

@@ -29,8 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref) {
   var _sorting$columns;
   var sorting = _ref.sorting,
-    id = _ref.id,
-    hasColumnActions = _ref.hasColumnActions;
+    id = _ref.id;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -52,26 +51,28 @@ var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref
   }, [id, isColumnSorted, sortedColumn]);
 
   /**
-   * aria-sort attribute - should only be used when a single column is being sorted
+   * `aria-sort` attribute - should only be used when a single column is being sorted
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
    * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
-  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+  var hasAriaSortOnly = isColumnSorted && hasOnlyOneSort;
+  var ariaSort = hasAriaSortOnly ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
 
-  // aria-describedby ID for when aria-sort isn't sufficient
+  /**
+   * `aria-describedby` ID for when `aria-sort` cannot be used
+   */
   var sortingAriaId = (0, _services.useGeneratedHtmlId)({
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
 
   /**
-   * Sorting status - screen reader text
+   * Screen-reader-only sorting status, an alternative to `aria-sort` for multi-column sorting
    */
   var sortingScreenReaderText = (0, _react.useMemo)(function () {
     var _sorting$columns2;
-    if (!isColumnSorted) return null;
-    if (!hasColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
+    if (!isColumnSorted || hasAriaSortOnly) return null;
     return (0, _react2.jsx)("p", {
       id: sortingAriaId,
       hidden: true
@@ -134,7 +135,7 @@ var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref
         }
       }
     }), ".");
-  }, [isColumnSorted, hasColumnActions, hasOnlyOneSort, sorting, sortingAriaId]);
+  }, [isColumnSorted, hasAriaSortOnly, sortingAriaId, sorting === null || sorting === void 0 ? void 0 : sorting.columns, hasOnlyOneSort]);
   return {
     sortingArrow: sortingArrow,
     ariaSort: ariaSort,

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -67,8 +67,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var actionsButtonRef = (0, _react.useRef)(null);
   var _useColumnSorting = (0, _column_sorting.useColumnSorting)({
       sorting: sorting,
-      id: id,
-      hasColumnActions: hasColumnActions
+      id: id
     }),
     sortingArrow = _useColumnSorting.sortingArrow,
     ariaSort = _useColumnSorting.ariaSort,

package/optimize/lib/components/empty_prompt/empty_prompt.styles.js

@@ -119,8 +119,10 @@ var euiEmptyPromptStyles = exports.euiEmptyPromptStyles = function euiEmptyPromp
       accent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accent')), ";;label:accent;"),
       accentSecondary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accentSecondary')), ";;label:accentSecondary;"),
       danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      risk: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('risk')), ";;label:risk;"),
       warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('warning')), ";;label:warning;"),
-      success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('success')), ";;label:success;")
+      success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('success')), ";;label:success;"),
+      neutral: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('neutral')), ";;label:neutral;")
     }, generatePaddingStyles())
   };
 };

package/optimize/lib/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -24,6 +24,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlPadding = _euiFormVariables.controlPadding,
     controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
     controlDisabledColor = _euiFormVariables.controlDisabledColor;
@@ -31,10 +33,10 @@ var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles =
     euiFormControlLayoutIcons: _ref,
     uncompressed: "\n      gap: ".concat((0, _global_styling.mathWithUnits)(controlPadding, function (x) {
       return x / 2;
-    }), ";\n    "),
+    }), ";\n      max-block-size: ").concat(controlHeight, ";\n    "),
     compressed: /*#__PURE__*/(0, _react.css)("gap:", (0, _global_styling.mathWithUnits)(controlCompressedPadding, function (x) {
       return x / 2;
-    }), ";;label:compressed;"),
+    }), ";max-block-size:", controlCompressedHeight, ";;label:compressed;"),
     disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
     position: {
       absolute: {

package/optimize/lib/components/icon/icon.styles.js

@@ -40,15 +40,17 @@ var euiIconStyles = exports.euiIconStyles = function euiIconStyles(_ref3) {
     // Base
     euiIcon: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;vertical-align:middle;fill:currentColor;transform:translate(0, 0);.euiIcon__fillNegative{fill:", euiTheme.colors.darkestShade, ";};label:euiIcon;"),
     // Colors
+    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
     accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     accentSecondary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     ghost: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     text: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:text;"),
+    neutral: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textNeutral, ";;label:neutral;"),
+    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    risk: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textRisk, ";;label:risk;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     inherit: _ref2,
     default: /*#__PURE__*/(0, _react.css)(";label:default;"),
     customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;"),

package/optimize/lib/components/icon/named_colors.js

@@ -13,7 +13,7 @@ exports.isNamedColor = isNamedColor;
  * Side Public License, v 1.
  */
 
-var COLORS = exports.COLORS = ['default', 'primary', 'success', 'accent', 'accentSecondary', 'warning', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
+var COLORS = exports.COLORS = ['default', 'primary', 'neutral', 'success', 'accent', 'accentSecondary', 'warning', 'risk', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
 function isNamedColor(name) {
   return COLORS.includes(name);
 }

package/optimize/lib/global_styling/mixins/_button.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 var BUTTON_DISPLAYS = exports.BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -50,7 +50,7 @@ var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColo
     highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = (0, _euiThemeCommon.getTokenName)('backgroundFilled', color);
   var textColorTokenName = (0, _euiThemeCommon.getTokenName)('textColorFilled', color);
-  var highContrastForeground = color === 'warning' ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
+  var highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
   var foreground = highContrastMode ? highContrastForeground : euiTheme.components.buttons[textColorTokenName];
   var background = euiTheme.components.buttons[backgroundTokenName];
   return _objectSpread({

package/optimize/lib/global_styling/mixins/_color.js

@@ -17,7 +17,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 /**
  * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency