@elastic/eui 112.3.0 → 113.0.0

package/es/components/form/form_label/form_label.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "isFocused", "isInvalid", "isDisabled", "children", "className"];
+var _excluded = ["type", "isFocused", "isInvalid", "isDisabled", "children", "className", "htmlFor"];
 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; }
@@ -24,6 +24,7 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
     isDisabled = _ref.isDisabled,
     children = _ref.children,
     className = _ref.className,
+    htmlFor = _ref.htmlFor,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiFormLabelStyles);
   var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid];
@@ -37,10 +38,16 @@ export var EuiFormLabel = function EuiFormLabel(_ref) {
       css: cssStyles,
       className: classes
     }, rest), children);
+  } else if (type === 'span' || !htmlFor) {
+    return ___EmotionJSX("span", _extends({
+      css: cssStyles,
+      className: classes
+    }, rest), children);
   } else {
     return ___EmotionJSX("label", _extends({
       css: cssStyles,
-      className: classes
+      className: classes,
+      htmlFor: htmlFor
     }, rest), children);
   }
 };
@@ -53,7 +60,11 @@ EuiFormLabel.propTypes = {
      * Default type is a `label` but can be changed to a `legend`
      * if using inside a `fieldset`.
      */
-  type: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["label"]), PropTypes.oneOf(["label", "legend"])]), PropTypes.oneOfType([PropTypes.oneOf(["legend"]).isRequired, PropTypes.oneOf(["label", "legend"])])]),
+  /**
+     * Default type is a `label` but can be changed to a `legend`
+     * if using inside a `fieldset`.
+     */
+  type: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.oneOf(["label"]), PropTypes.oneOf(["label", "legend", "span"])]), PropTypes.oneOfType([PropTypes.oneOf(["legend"]).isRequired, PropTypes.oneOf(["label", "legend", "span"])])]), PropTypes.oneOfType([PropTypes.oneOf(["span"]).isRequired, PropTypes.oneOf(["label", "legend", "span"])])]),
   isFocused: PropTypes.bool,
   isInvalid: PropTypes.bool,
   /**
@@ -62,6 +73,9 @@ EuiFormLabel.propTypes = {
   /**
      * Changes `cursor` to `default`.
      */
+  /**
+     * Changes `cursor` to `default`.
+     */
   isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,

package/es/components/form/range/range_levels.styles.js

@@ -16,7 +16,7 @@ export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext)
     colorMode = euiThemeContext.colorMode;
   var range = euiRangeVariables(euiThemeContext);
   var isColorDark = colorMode === 'DARK';
-  var stripeColor = isColorDark ? euiTheme.colors.ink : euiTheme.colors.ghost;
+  var stripeColor = isColorDark ? euiTheme.colors.plainDark : euiTheme.colors.plainLight;
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(transparentize(stripeColor, 0.5), ",\n    ").concat(transparentize(stripeColor, 0.5), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 50%,\n    ").concat(transparentize(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";", preventForcedColors(euiThemeContext), ";;label:euiRangeLevels;"),

package/es/components/form/range/range_tooltip.styles.js

@@ -32,7 +32,7 @@ export var euiRangeTooltipValueStyles = function euiRangeTooltipValueStyles(euiT
   return {
     euiRangeTooltip__value: /*#__PURE__*/css("position:absolute;inset-block-start:50%;max-inline-size:", mathWithUnits(euiTheme.size.base, function (x) {
       return x * 16;
-    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", euiFontSize(euiThemeContext, 's'), " color:", euiTheme.colors.ghost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", mathWithUnits(arrowSize, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", euiFontSize(euiThemeContext, 's'), " color:", euiTheme.colors.textGhost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", mathWithUnits(arrowSize, function (x) {
       return x / -2;
     }), ";background-color:inherit;border:inherit;};label:euiRangeTooltip__value;"),
     left: /*#__PURE__*/css("margin-inline-end:", arrowOffset, ";&::before{", arrowStyles.positions.left, " inset-inline-start:100%;};label:left;"),

package/es/components/header/header.styles.js

@@ -49,5 +49,5 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var backgroundColor = euiTheme.components.headerDarkBackground;
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.textGhost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n  ");
 };

package/es/components/header/header_links/header_link.js

@@ -33,6 +33,13 @@ export var EuiHeaderLink = function EuiHeaderLink(_ref) {
 EuiHeaderLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  isLoading: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,

package/es/components/header/header_section/header_section_item_button.js

@@ -174,6 +174,13 @@ ref) {
 EuiHeaderSectionItemButton.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  isLoading: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,

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

@@ -38,7 +38,7 @@ export var euiIconStyles = function euiIconStyles(_ref3) {
     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;"),
-    ghost: /*#__PURE__*/css("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
+    ghost: /*#__PURE__*/css("color:", euiTheme.colors.textGhost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
     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;"),

package/es/components/image/image_caption.styles.js

@@ -14,6 +14,6 @@ export var euiImageCaptionStyles = function euiImageCaptionStyles(euiThemeContex
   return {
     // Base
     euiImageCaption: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('margin-top', euiTheme.size.xs), ";;label:euiImageCaption;"),
-    isOnOverlayMask: /*#__PURE__*/css("color:", euiTheme.colors.ghost, ";text-shadow:0 1px 2px ", transparentize(euiTheme.colors.ink, 0.6), ";[class*='euiLink']{color:", euiTheme.colors.ghost, ";};label:isOnOverlayMask;")
+    isOnOverlayMask: /*#__PURE__*/css("color:", euiTheme.colors.textGhost, ";text-shadow:0 1px 2px ", transparentize(euiTheme.colors.plainDark, 0.6), ";[class*='euiLink']{color:", euiTheme.colors.textGhost, ";};label:isOnOverlayMask;")
   };
 };

package/es/components/link/link.styles.js

@@ -33,7 +33,7 @@ export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
     accent: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textAccent), ";label:accent;"),
     danger: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textDanger), ";label:danger;"),
     warning: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textWarning), ";label:warning;"),
-    ghost: /*#__PURE__*/css(_colorCSS(euiTheme.colors.ghost), ";label:ghost;"),
+    ghost: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textGhost), ";label:ghost;"),
     text: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textParagraph), ";label:text;")
   };
 };

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

@@ -61,7 +61,7 @@ export var euiListGroupItemInnerStyles = function euiListGroupItemInnerStyles(eu
     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.ghost, ";;label:ghost;"),
+    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;"),

package/es/components/markdown_editor/markdown_format.styles.js

@@ -63,7 +63,7 @@ export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiThemeCo
       accentSecondary: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accentSecondary), ";label:accentSecondary;"),
       warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.warning), ";label:warning;"),
       danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger), ";label:danger;"),
-      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost), ";label:ghost;"),
+      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.plainLight), ";label:ghost;"),
       inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:inherit;"),
       custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:custom;")
     }

package/es/components/pagination/pagination_button.js

@@ -71,6 +71,13 @@ export var EuiPaginationButton = function EuiPaginationButton(_ref) {
 EuiPaginationButton.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  isLoading: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,

package/es/components/pagination/pagination_button.styles.js

@@ -11,7 +11,7 @@ export var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThe
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPaginationButton: /*#__PURE__*/css("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationButton;"),
+    euiPaginationButton: /*#__PURE__*/css("outline-offset:-", euiTheme.focus.width, ";.euiButtonEmpty__text{padding:0;};label:euiPaginationButton;"),
     // States
     isActive: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";&,&:hover{cursor:default;text-decoration:underline;};label:isActive;")
   };

package/es/components/text/text_color.styles.js

@@ -27,7 +27,7 @@ export var euiTextColorStyles = function euiTextColorStyles(_ref2) {
     accentSecondary: /*#__PURE__*/css("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
     danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     warning: /*#__PURE__*/css("color:", euiTheme.colors.textWarning, ";;label:warning;"),
-    ghost: /*#__PURE__*/css("color:", euiTheme.colors.ghost, "!important;;label:ghost;"),
+    ghost: /*#__PURE__*/css("color:", euiTheme.colors.textGhost, "!important;;label:ghost;"),
     inherit: _ref,
     customColor: /*#__PURE__*/css(";label:customColor;") // Handled by `style` tag - this is just here for a className hook
   };

package/es/components/token/token.styles.js

@@ -39,7 +39,7 @@ var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
   };
   var lightColor = isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
   var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
-  var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+  var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
   switch (fill) {
     case 'none':
       return "\n        // Without a background, the fill color should be the graphic color\n        color: ".concat(iconColor, ";\n      ");

package/es/components/tool_tip/tool_tip.styles.js

@@ -35,7 +35,7 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
   return {
     // Base
-    euiToolTip: /*#__PURE__*/css(hasShadow ? euiShadow(euiThemeContext) : '', " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;", euiPanelBorderStyles(euiThemeContext), " [class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/css(hasShadow ? euiShadow(euiThemeContext) : '', " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme), ";color:", euiTheme.colors.textGhost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;", euiPanelBorderStyles(euiThemeContext), " [class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions

package/es/global_styling/mixins/_button.js

@@ -38,7 +38,7 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
   var textTokenName = getTokenName(textTokenBase, color);
   var backgroundHoverTokenName = getTokenName(backgroundTokenBase, color, 'hover');
   var backgroundActiveTokenName = getTokenName(backgroundTokenBase, color, 'active');
-  var highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textTokenName] : euiTheme.colors.textInverse;
+  var highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) ? euiTheme.colors.textInk : color === 'disabled' ? euiTheme.components.buttons[textTokenName] : euiTheme.colors.textInverse;
   var foreground = variant === 'filled' ? highContrastMode ? highContrastForeground : euiTheme.components.buttons[textTokenName] : euiTheme.components.buttons[textTokenName];
   return {
     color: foreground,
@@ -140,7 +140,7 @@ export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var colorsDisplaysMap = useEuiMemoizedStyles(euiButtonDisplaysColors);
   return colorsDisplaysMap[display];
 };
-var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
+export var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var COLORS = [].concat(_toConsumableArray(EXTENDED_BUTTON_COLORS), ['disabled']);
   var displaysColorsMap = {};
@@ -206,18 +206,23 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
     xs: {
       minWidth: euiTheme.base * 6,
       height: euiTheme.size.l,
+      padding: mathWithUnits(euiTheme.size.m, function (x) {
+        return x / 2;
+      }),
       radius: euiTheme.border.radius.small,
       fontScale: 'xs'
     },
     s: {
       minWidth: euiTheme.base * 6,
       height: euiTheme.size.xl,
+      padding: euiTheme.size.s,
       radius: euiTheme.border.radius.small,
       fontScale: 's'
     },
     m: {
       minWidth: euiTheme.base * 7,
       height: euiTheme.size.xxl,
+      padding: euiTheme.size.m,
       radius: euiTheme.border.radius.small,
       fontScale: 's'
     }