@elastic/eui 74.1.0 → 75.1.0

package/es/components/selectable/selectable_list/selectable_list.js

@@ -117,6 +117,22 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+
+    _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
+      _this.ariaPosInSetMap = {};
+      var latestAriaPosIndex = 0;
+      optionArray.forEach(function (option, index) {
+        if (!option.isGroupLabel) {
+          latestAriaPosIndex++;
+          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+        }
+      });
+      _this.ariaSetSize = latestAriaPosIndex;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
       var data = _ref.data,
           index = _ref.index,
@@ -160,9 +176,6 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
 
-      var labelCount = data.filter(function (option) {
-        return option.isGroupLabel;
-      }).length;
       var id = makeOptionId(index);
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
@@ -183,8 +196,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": index + 1 - labelCount,
-        "aria-setsize": data.length - labelCount,
+        "aria-posinset": _this.ariaPosInSetMap[index],
+        "aria-setsize": _this.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -341,6 +354,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           rest = _objectWithoutProperties(_this$props7, _excluded3);
 
       var optionArray = visibleOptions || options;
+      this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
       var calculatedHeight = heightIsFull ? false : forcedHeight; // If calculatedHeight is still undefined, then calculate it
 

package/es/components/steps/step.js

@@ -18,6 +18,8 @@ import PropTypes from "prop-types";
 import React, { createElement } from 'react';
 import { EuiTitle } from '../title';
 import { EuiStepNumber } from './step_number';
+import { useEuiTheme } from '../../services';
+import { euiStepStyles, euiStepContentStyles, euiStepTitleStyles } from './step.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStep = function EuiStep(_ref) {
   var className = _ref.className,
@@ -32,27 +34,32 @@ export var EuiStep = function EuiStep(_ref) {
       status = _ref.status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiStep', {
-    'euiStep--small': titleSize === 'xs',
-    'euiStep-isDisabled': status === 'disabled'
-  }, className);
-  var numberClasses = classNames('euiStep__circle', {
-    'euiStepNumber--small': titleSize === 'xs'
-  });
+  var classes = classNames('euiStep', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepStyles(euiTheme);
+  var cssStyles = [styles.euiStep, styles[titleSize]];
+  var contentStyles = euiStepContentStyles(euiTheme);
+  var cssContentStyles = [contentStyles.euiStep__content, contentStyles[titleSize]];
+  var titleStyles = euiStepTitleStyles(euiTheme);
+  var cssStepTitleStyles = [titleStyles.euiStep__title, status === 'disabled' && titleStyles.isDisabled, titleStyles[titleSize]];
+  var cssTitleWrapperStyles = titleStyles.euiStep__titleWrapper;
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), ___EmotionJSX("div", {
-    className: "euiStep__titleWrapper"
+    className: "euiStep__titleWrapper",
+    css: cssTitleWrapperStyles
   }, ___EmotionJSX(EuiStepNumber, {
-    className: numberClasses,
     number: step,
     status: status,
     titleSize: titleSize
   }), ___EmotionJSX(EuiTitle, {
     size: titleSize,
-    className: "euiStep__title"
+    className: "euiStep__title",
+    css: cssStepTitleStyles
   }, /*#__PURE__*/createElement(headingElement, null, title))), ___EmotionJSX("div", {
-    className: "euiStep__content"
+    className: "euiStep__content",
+    css: cssContentStyles
   }, children));
 };
 EuiStep.propTypes = {

package/es/components/steps/step.styles.js

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits, logicalCSS } from '../../global_styling';
+export var euiStepVariables = function euiStepVariables(euiTheme) {
+  return {
+    numberSize: euiTheme.size.xl,
+    numberXSSize: euiTheme.size.l,
+    numberMargin: euiTheme.size.base
+  };
+};
+export var euiStepStyles = function euiStepStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme); // the vertical line is centered on the number, so we need to offset the line
+  // by half of the number size & half of the line size to center it
+
+  var lineStartPosition = mathWithUnits([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 - y / 2;
+  });
+  var lineEndPosition = mathWithUnits([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 + y / 2;
+  });
+  var lineGradient = "linear-gradient(to right,\n    transparent 0,\n    transparent ".concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineEndPosition, ",\n    transparent ").concat(lineEndPosition, ",\n    transparent 100%)");
+  return {
+    euiStep: /*#__PURE__*/css("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
+    // Sizes
+    m: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
+    s: /*#__PURE__*/css("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
+    xs: /*#__PURE__*/css("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
+  };
+};
+export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  var styles = {
+    euiStep__content: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.s), " ", logicalCSS('padding-top', euiTheme.size.base), " ", logicalCSS('padding-bottom', mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+      return x + y;
+    })), " ", logicalCSS('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
+    // Sizes
+    m: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), logicalCSS('margin-left', mathWithUnits(euiStep.numberSize, function (x) {
+      return x / 2;
+    })), ";;label:m;"),
+    s: /*#__PURE__*/css(";label:s;"),
+    // s is the same as m, so we'll programmatically duplicate it below
+    xs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
+      return x / 2;
+    })), ";;label:xs;")
+  };
+  styles.s = styles.m;
+  return styles;
+};
+export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  return {
+    euiStep__titleWrapper: /*#__PURE__*/css("display:flex;gap:", euiStep.numberMargin, ";;label:euiStep__titleWrapper;"),
+    euiStep__title: /*#__PURE__*/css(";label:euiStep__title;"),
+    isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:isDisabled;"),
+    // Sizes
+    m: /*#__PURE__*/css(";label:m;"),
+    s: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), ";;label:s;"),
+    xs: /*#__PURE__*/css(";label:xs;")
+  };
+};

package/es/components/steps/step_horizontal.js

@@ -17,7 +17,9 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { EuiStepNumber } from './step_number';
-import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep } from './step_strings';
+import { useI18nCompleteStep, useI18nCurrentStep, useI18nDisabledStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nErrorsStep, useI18nLoadingStep } from './step_strings';
+import { useEuiTheme } from '../../services';
+import { euiStepHorizontalStyles, euiStepHorizontalNumberStyles, euiStepHorizontalTitleStyles } from './step_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
   var className = _ref.className,
@@ -30,43 +32,50 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
       status = _ref$status === void 0 ? 'incomplete' : _ref$status,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var buttonTitle = useI18nStep({
-    number: step,
-    title: title
-  });
-  var completeTitle = useI18nCompleteStep({
-    number: step,
-    title: title
-  });
-  var disabledTitle = useI18nDisabledStep({
-    number: step,
-    title: title
-  });
-  var incompleteTitle = useI18nIncompleteStep({
-    number: step,
-    title: title
-  });
-  var warningTitle = useI18nWarningStep({
-    number: step,
-    title: title
-  });
-  var currentTitle = useI18nCurrentStep({
-    number: step,
-    title: title
-  });
   if (disabled) status = 'disabled';
-  var classes = classNames('euiStepHorizontal', className, {
-    'euiStepHorizontal-isSelected': status === 'current',
-    'euiStepHorizontal-isComplete': status === 'complete',
-    'euiStepHorizontal-isIncomplete': status === 'incomplete',
-    'euiStepHorizontal-isDisabled': status === 'disabled'
-  });
-  var stepTitle = buttonTitle;
-  if (status === 'disabled') stepTitle = disabledTitle;
-  if (status === 'complete') stepTitle = completeTitle;
-  if (status === 'incomplete') stepTitle = incompleteTitle;
-  if (status === 'warning') stepTitle = warningTitle;
-  if (status === 'current') stepTitle = currentTitle;
+  var classes = classNames('euiStepHorizontal', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepHorizontalStyles(euiTheme);
+  var cssStyles = [styles.euiStepHorizontal, status === 'disabled' ? styles.disabled : styles.enabled];
+  var numberStyles = euiStepHorizontalNumberStyles(euiTheme);
+  var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
+  var titleStyles = euiStepHorizontalTitleStyles(euiTheme);
+  var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
+  var titleAttrsMap = {
+    step: useI18nStep({
+      number: step,
+      title: title
+    }),
+    current: useI18nCurrentStep({
+      number: step,
+      title: title
+    }),
+    disabled: useI18nDisabledStep({
+      number: step,
+      title: title
+    }),
+    incomplete: useI18nIncompleteStep({
+      number: step,
+      title: title
+    }),
+    complete: useI18nCompleteStep({
+      number: step,
+      title: title
+    }),
+    warning: useI18nWarningStep({
+      number: step,
+      title: title
+    }),
+    danger: useI18nErrorsStep({
+      number: step,
+      title: title
+    }),
+    loading: useI18nLoadingStep({
+      number: step,
+      title: title
+    })
+  };
+  var titleAttr = titleAttrsMap[status || 'step'];
 
   var onStepClick = function onStepClick(event) {
     if (!disabled) onClick(event);
@@ -74,15 +83,19 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
 
   return ___EmotionJSX("button", _extends({
     className: classes,
-    title: stepTitle,
+    title: titleAttr,
     onClick: onStepClick,
-    disabled: disabled
+    disabled: disabled,
+    css: cssStyles,
+    "data-step-status": status
   }, rest), ___EmotionJSX(EuiStepNumber, {
     className: "euiStepHorizontal__number",
     status: status,
-    number: step
+    number: step,
+    css: cssNumberStyles
   }), ___EmotionJSX("span", {
-    className: "euiStepHorizontal__title"
+    className: "euiStepHorizontal__title",
+    css: cssTitleStyles
   }, title));
 };
 EuiStepHorizontal.propTypes = {
@@ -102,7 +115,7 @@ EuiStepHorizontal.propTypes = {
   /**
      * Visual representation of the step number indicator.
      * May replace the number provided in props.step with alternate styling.
-     * The `isSelected`, `isComplete`, and `disabled` props will override these.
+     * The `disabled` prop will override this.
      */
   status: PropTypes.any,
   className: PropTypes.string,

package/es/components/steps/step_horizontal.styles.js

@@ -0,0 +1,55 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { euiBreakpoint, logicalShorthandCSS, euiFocusRing, euiCanAnimate, mathWithUnits } from '../../global_styling/';
+import { euiTitle } from '../title/title.styles';
+import { euiStepVariables } from './step.styles';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;"
+} : {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  /**
+   * 1. Ensure the connecting lines stays behind the number
+   * 2. Make the content of each step align to the top, even if the steps are of varying heights,
+   *    e.g. due to some of their titles wrapping to multiple lines
+   */
+
+  return {
+    euiStepHorizontal: /*#__PURE__*/css(logicalShorthandCSS('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";inline-size:calc(50% - (", euiStep.numberSize, " / 2));inset-block-start:", mathWithUnits([euiTheme.size.l, euiStep.numberSize], function (x, y) {
+      return x + y / 2;
+    }), ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
+    // Note: these selectors must be nested because focus/hover state
+    // is on the parent container, but affects specific children
+    enabled: /*#__PURE__*/css("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", euiFocusRing(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
+    disabled: _ref
+  };
+};
+export var euiStepHorizontalNumberStyles = function euiStepHorizontalNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__number: /*#__PURE__*/css("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
+  };
+};
+export var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", euiBreakpoint(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
+    disabled: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+  };
+};

package/es/components/steps/step_number.js

@@ -17,94 +17,103 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { keysOf } from '../common';
 import { EuiIcon } from '../icon';
 import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { EuiLoadingSpinner } from '../loading';
+import { useEuiTheme } from '../../services';
+import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var statusToClassNameMap = {
-  incomplete: 'euiStepNumber--incomplete',
-  disabled: 'euiStepNumber--disabled',
-  loading: 'euiStepNumber--loading',
-  warning: 'euiStepNumber--warning',
-  danger: 'euiStepNumber--danger',
-  complete: 'euiStepNumber--complete',
-  current: null // Current displays the same as the default (undefined)
-
-};
-export var STATUS = keysOf(statusToClassNameMap);
+export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
 export var EuiStepNumber = function EuiStepNumber(_ref) {
   var className = _ref.className,
       status = _ref.status,
       number = _ref.number,
-      titleSize = _ref.titleSize,
+      _ref$titleSize = _ref.titleSize,
+      titleSize = _ref$titleSize === void 0 ? 's' : _ref$titleSize,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var stepAriaLabel = useI18nStep({
-    number: number
-  });
-  var completeAriaLabel = useI18nCompleteStep({
-    number: number
-  });
-  var warningAriaLabel = useI18nWarningStep({
-    number: number
-  });
-  var errorsAriaLabel = useI18nErrorsStep({
-    number: number
-  });
-  var incompleteAriaLabel = useI18nIncompleteStep({
-    number: number
-  });
-  var disabledAriaLabel = useI18nDisabledStep({
-    number: number
-  });
-  var loadingAriaLabel = useI18nLoadingStep({
-    number: number
-  });
-  var currentAriaLabel = useI18nCurrentStep({
-    number: number
-  });
-  var classes = classNames('euiStepNumber', status ? statusToClassNameMap[status] : undefined, className);
-  var iconSize = titleSize === 'xs' ? 's' : 'm';
-  var screenReaderText = stepAriaLabel;
-  if (status === 'incomplete') screenReaderText = incompleteAriaLabel;else if (status === 'disabled') screenReaderText = disabledAriaLabel;else if (status === 'loading') screenReaderText = loadingAriaLabel;else if (status === 'current') screenReaderText = currentAriaLabel;
+  var ariaLabelsMap = {
+    step: useI18nStep({
+      number: number
+    }),
+    current: useI18nCurrentStep({
+      number: number
+    }),
+    incomplete: useI18nIncompleteStep({
+      number: number
+    }),
+    complete: useI18nCompleteStep({
+      number: number
+    }),
+    disabled: useI18nDisabledStep({
+      number: number
+    }),
+    warning: useI18nWarningStep({
+      number: number
+    }),
+    danger: useI18nErrorsStep({
+      number: number
+    }),
+    loading: useI18nLoadingStep({
+      number: number
+    })
+  };
+  var classes = classNames('euiStepNumber', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiStepNumberStyles(euiTheme);
+  var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
+  var contentStyles = euiStepNumberContentStyles(euiTheme);
+  var content;
+  var screenReaderText;
+
+  switch (status) {
+    // Loading spinner
+    case 'loading':
+      screenReaderText = ariaLabelsMap.loading;
+      content = ___EmotionJSX(EuiLoadingSpinner, {
+        className: "euiStepNumber__loader",
+        size: titleSize === 'xs' ? 'l' : 'xl'
+      });
+      break;
+    // Statuses with icons
 
-  var numberOrIcon = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), ___EmotionJSX("span", {
-    className: "euiStepNumber__number",
-    "aria-hidden": "true"
-  }, number));
+    case 'danger':
+    case 'warning':
+    case 'complete':
+      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
+      var iconTypeMap = {
+        danger: 'cross',
+        warning: 'alert',
+        complete: 'check'
+      };
+      content = ___EmotionJSX(EuiIcon, {
+        type: iconTypeMap[status],
+        "aria-label": ariaLabelsMap[status],
+        size: titleSize === 'xs' ? 's' : 'm',
+        className: "euiStepNumber__icon",
+        css: cssIconStyles
+      });
+      break;
+    // Statuses with numbers
 
-  if (status === 'complete') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "check",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": completeAriaLabel
-    });
-  } else if (status === 'warning') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "alert",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": warningAriaLabel
-    });
-  } else if (status === 'danger') {
-    numberOrIcon = ___EmotionJSX(EuiIcon, {
-      type: "cross",
-      className: "euiStepNumber__icon",
-      size: iconSize,
-      "aria-label": errorsAriaLabel
-    });
-  } else if (status === 'loading') {
-    numberOrIcon = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), ___EmotionJSX(EuiLoadingSpinner, {
-      className: "euiStepNumber__loader",
-      size: iconSize === 's' ? 'l' : 'xl'
-    }));
+    case 'incomplete':
+    case 'current':
+    case 'disabled':
+    default:
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
+      screenReaderText = ariaLabelsMap[status || 'step'];
+      content = ___EmotionJSX("span", {
+        "aria-hidden": "true",
+        className: "euiStepNumber__number",
+        css: cssNumberStyles
+      }, number);
+      break;
   }
 
   return ___EmotionJSX("span", _extends({
-    className: classes
-  }, rest), numberOrIcon);
+    className: classes,
+    css: cssStyles
+  }, rest), screenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, screenReaderText)), content);
 };
 EuiStepNumber.propTypes = {
   /**

package/es/components/steps/step_number.styles.js

@@ -0,0 +1,76 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
+import { euiStepVariables } from './step.styles';
+import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;"
+} : {
+  name: "76s2de-loading",
+  styles: "background:transparent;label:loading;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;"
+} : {
+  name: "1ru1jeq-euiStepNumber",
+  styles: "flex-shrink:0;label:euiStepNumber;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+
+  var createStepsNumber = function createStepsNumber(size, fontSize) {
+    return "\n      display: inline-block;\n      line-height: ".concat(size, ";\n      border-radius: ").concat(size, ";\n      ").concat(logicalCSS('width', size), ";\n      ").concat(logicalCSS('height', size), ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n    ");
+  };
+
+  return {
+    euiStepNumber: _ref2,
+    // sizes
+    m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
+    s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
+    xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
+    // status
+    incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'disabled').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor, ";;label:disabled;"),
+    loading: _ref,
+    warning: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'warning').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'warning').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'danger').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'danger').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'success').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'success').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/css(";label:current;")
+  };
+};
+export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Statuses with icon content
+    euiStepNumber__icon: /*#__PURE__*/css("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    complete: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:complete;"),
+    danger: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x / 2;
+    }), ";;label:danger;"),
+    warning: /*#__PURE__*/css("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
+    // Statuses with number content
+    euiStepNumber__number: /*#__PURE__*/css(";label:euiStepNumber__number;"),
+    incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
+    loading: /*#__PURE__*/css(";label:loading;"),
+    disabled: /*#__PURE__*/css(";label:disabled;"),
+    current: /*#__PURE__*/css(";label:current;")
+  };
+};

package/es/components/steps/steps_horizontal.js

@@ -17,6 +17,7 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { EuiStepHorizontal } from './step_horizontal';
+import { euiStepsHorizontalStyles } from './steps_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
@@ -24,16 +25,19 @@ export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classNames('euiStepsHorizontal', className);
+  var styles = euiStepsHorizontalStyles();
+  var cssStyles = styles.euiStepsHorizontal;
+  var cssItemStyles = styles.euiStepsHorizontal__item;
   return ___EmotionJSX("ol", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), steps.map(function (stepProps, index) {
-    var isCurrent = stepProps.status === 'current' ? {
-      'aria-current': 'step'
-    } : {};
-    return ___EmotionJSX("li", _extends({
+    return ___EmotionJSX("li", {
       key: index,
-      className: "euiStepHorizontal__item"
-    }, isCurrent), ___EmotionJSX(EuiStepHorizontal, _extends({
+      className: "euiStepsHorizontal__item",
+      css: cssItemStyles,
+      "aria-current": stepProps.status === 'current' ? 'step' : undefined
+    }, ___EmotionJSX(EuiStepHorizontal, _extends({
       step: index + 1
     }, stepProps)));
   }));