@elastic/eui 101.4.0 → 102.0.0

package/lib/themes/amsterdam/global_styling/variables/_colors_severity.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.severityColors = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * These are not actually used, but we map them to ensure token parity.
+ * They are mapped to other vis colors
+ */
+var severityColors = exports.severityColors = {
+  unknown: '#D3DAE6',
+  neutral: '#BECFE3',
+  success: '#54B399',
+  warning: '#D6BF57',
+  risk: '#DA8B45',
+  danger: '#E7664C'
+};

package/lib/themes/amsterdam/global_styling/variables/_colors_vis.js

@@ -109,21 +109,6 @@ var colorVis = exports.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/es/components/badge/badge.js

@@ -23,7 +23,7 @@ import { getTextColor, getColorContrast, getIsValidColor } from './color_utils';
 import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
-export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+export var COLORS = ['default', 'hollow', 'primary', 'accent', 'neutral', 'success', 'warning', 'risk', 'danger'];
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

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

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

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

@@ -21,8 +21,10 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
+    neutral: euiButtonFillColor(euiThemeContext, 'neutral'),
     success: euiButtonFillColor(euiThemeContext, 'success'),
     warning: euiButtonFillColor(euiThemeContext, 'warning'),
+    risk: euiButtonFillColor(euiThemeContext, 'risk'),
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
     accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'),

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

@@ -19,8 +19,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useColumnSorting = function useColumnSorting(_ref) {
   var _sorting$columns;
   var sorting = _ref.sorting,
-    id = _ref.id,
-    hasColumnActions = _ref.hasColumnActions;
+    id = _ref.id;
   var sortedColumn = useMemo(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -42,26 +41,28 @@ export var 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 = 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 = 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 ___EmotionJSX("p", {
       id: sortingAriaId,
       hidden: true
@@ -124,7 +125,7 @@ export var 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/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -57,8 +57,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var actionsButtonRef = useRef(null);
   var _useColumnSorting = useColumnSorting({
       sorting: sorting,
-      id: id,
-      hasColumnActions: hasColumnActions
+      id: id
     }),
     sortingArrow = _useColumnSorting.sortingArrow,
     ariaSort = _useColumnSorting.ariaSort,

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

@@ -114,8 +114,10 @@ export var euiEmptyPromptStyles = function euiEmptyPromptStyles(euiThemeContext)
       accent: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accent')), ";;label:accent;"),
       accentSecondary: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accentSecondary')), ";;label:accentSecondary;"),
       danger: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      risk: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('risk')), ";;label:risk;"),
       warning: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('warning')), ";;label:warning;"),
-      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;")
+      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;"),
+      neutral: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('neutral')), ";;label:neutral;")
     }, generatePaddingStyles())
   };
 };

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

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

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

@@ -35,15 +35,17 @@ export var euiIconStyles = function euiIconStyles(_ref3) {
     // Base
     euiIcon: /*#__PURE__*/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__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     accentSecondary: /*#__PURE__*/css("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
-    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     ghost: /*#__PURE__*/css("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
-    primary: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     text: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:text;"),
+    neutral: /*#__PURE__*/css("color:", euiTheme.colors.textNeutral, ";;label:neutral;"),
+    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     warning: /*#__PURE__*/css("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    risk: /*#__PURE__*/css("color:", euiTheme.colors.textRisk, ";;label:risk;"),
+    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     inherit: _ref2,
     default: /*#__PURE__*/css(";label:default;"),
     customColor: /*#__PURE__*/css(";label:customColor;"),

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

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

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

@@ -14,7 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { css, keyframes } from '@emotion/react';
 import { getTokenName, euiCanAnimate } from '@elastic/eui-theme-common';
 import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
-export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -45,7 +45,7 @@ export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, col
     highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = getTokenName('backgroundFilled', color);
   var textColorTokenName = 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/es/global_styling/mixins/_color.js

@@ -12,7 +12,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { css } from '@emotion/react';
 import { useEuiMemoizedStyles } from '../../services';
 import { getTokenName } from '@elastic/eui-theme-common';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var 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