@elastic/eui 75.0.0 → 75.1.0

package/es/components/code/code_block.js

@@ -219,12 +219,14 @@ EuiCodeBlock.propTypes = {
 
   /**
      * Displays line numbers.
-     * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges:
-     * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
+     * Optionally accepts a configuration object for setting the starting number,
+     * visually highlighting ranges, or annotating specific lines:
+     * `{ start: 100, highlight: '1, 5-10, 20-30, 40', annotations: { 6: 'A special note about this line' } }`
      */
   lineNumbers: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     start: PropTypes.number,
-    highlight: PropTypes.string
+    highlight: PropTypes.string,
+    annotations: PropTypes.any
   }).isRequired]),
 
   /**

package/es/components/code/code_block_annotations.js

@@ -0,0 +1,94 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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 React, { useState } from 'react';
+import PropTypes from "prop-types";
+import { useEuiTheme } from '../../services';
+import { useEuiI18n } from '../i18n';
+import { EuiPopover } from '../popover';
+import { EuiIcon } from '../icon';
+import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { euiCodeBlockAnnotationsStyles } from './code_block_annotations.style';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
+  var lineNumber = _ref.lineNumber,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var ariaLabel = useEuiI18n('euiCodeBlockAnnotations.ariaLabel', 'Click to view a code annotation for line {lineNumber}', {
+    lineNumber: lineNumber
+  });
+
+  var _useEuiTheme = useEuiTheme(),
+      euiTheme = _useEuiTheme.euiTheme,
+      colorMode = _useEuiTheme.colorMode;
+
+  var styles = euiCodeBlockAnnotationsStyles(euiTheme);
+  var buttonIconFocusStyle = useEuiButtonFocusCSS();
+  var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
+  var isDarkMode = colorMode === 'DARK';
+  return ___EmotionJSX(EuiPopover, {
+    isOpen: isOpen,
+    closePopover: function closePopover() {
+      return setIsOpen(false);
+    },
+    button: ___EmotionJSX("button", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-label": ariaLabel,
+      css: cssButtonIconStyles,
+      "data-test-subj": "euiCodeBlockAnnotationIcon"
+    }, ___EmotionJSX(EuiIcon, {
+      type: AnnotationInfoIcon,
+      size: "s",
+      color: isDarkMode ? euiTheme.colors.ink : 'ghost'
+    })),
+    css: styles.euiCodeBlockAnnotation,
+    zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
+    ,
+    anchorPosition: "leftCenter",
+    panelProps: {
+      'data-test-subj': 'euiCodeBlockAnnotationPopover'
+    }
+  }, children);
+};
+EuiCodeBlockAnnotation.propTypes = {
+  lineNumber: PropTypes.number.isRequired
+};
+
+var AnnotationInfoIcon = function AnnotationInfoIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    width: 11,
+    height: 11,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.139 14l-.052-6.007H5V6.28h4.111l.052 6.007h1.915V14h-3.94zM6.712 3.38c0-.396.118-.725.354-.987S7.639 2 8.077 2c.438 0 .777.131 1.016.393.24.262.359.591.359.987 0 .39-.12.714-.359.972s-.578.388-1.016.388c-.438 0-.775-.13-1.011-.388-.236-.258-.354-.582-.354-.972z"
+  }));
+};

package/es/components/code/code_block_annotations.style.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+export var euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(euiTheme) {
+  var buttonIconSize = mathWithUnits(euiTheme.size.base, function (x) {
+    return x - 1.5;
+  });
+  return {
+    euiCodeBlockAnnotation: /*#__PURE__*/css("position:absolute;", logicalCSS('right', 0), " ", logicalCSS('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/css(logicalSizeCSS(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+  };
+};

package/es/components/code/code_block_full_screen.js

@@ -45,9 +45,15 @@ export var useFullScreen = function useFullScreen(_ref) {
   }, []);
   var onKeyDown = useCallback(function (event) {
     if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      setIsFullScreen(false);
+      // We need to make sure annotation Escape keypresses don't also cause fullscreen mode to close
+      var focus = document.activeElement;
+      var isAnnotationPopover = !!(focus !== null && focus !== void 0 && focus.dataset.popoverOpen) || !!(focus !== null && focus !== void 0 && focus.closest('[data-popover-open]'));
+
+      if (!isAnnotationPopover) {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullScreen(false);
+      }
     }
   }, []);
 

package/es/components/code/code_block_line.styles.js

@@ -39,11 +39,12 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.s, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
+      euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
       isHighlighted: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumber: /*#__PURE__*/css("flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.s, ";box-sizing:content-box;&:before{content:attr(data-line-number);color:", euiTheme.colors.subduedText, ";text-align:end;display:block;};label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
+      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/es/components/code/utils.js

@@ -14,6 +14,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { createElement } from 'react';
 import { listLanguages, highlight } from 'refractor';
 import { cx } from '@emotion/css';
+import { EuiCodeBlockAnnotation } from './code_block_annotations';
 import { euiCodeBlockLineStyles } from './code_block_line.styles';
 /**
  * Utils shared between EuiCode and EuiCodeBlock
@@ -47,7 +48,15 @@ export var nodeToHtml = function nodeToHtml(node, idx, nodes) {
       key: key,
       className: cx(properties.className)
     }), children && children.map(function (el, i) {
-      return nodeToHtml(el, i, nodes, depth + 1);
+      return (// @ts-ignore - using a custom type here to handle JSX annotations
+        el.type === 'annotation' ? // @ts-ignore - custom keys are passed by annotationElement below
+        ___EmotionJSX(EuiCodeBlockAnnotation, {
+          lineNumber: el.lineNumber,
+          children: el.annotation,
+          key: i
+        }) // prettier-ignore
+        : nodeToHtml(el, i, nodes, depth + 1)
+      );
     }));
   }
 
@@ -151,31 +160,61 @@ function wrapLines(nodes, options, euiTheme) {
     var lineStyles = cx([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
 
     if (options.showLineNumbers) {
-      var _properties;
+      var _properties, _options$annotations;
 
       var lineNumber = i + 1;
       var digits = grouped.length.toString().length;
-      var width = digits * CHAR_SIZE;
+      var width = digits * CHAR_SIZE; // Line text element and highlights
+
       var highlights = options.highlight ? parseLineRanges(options.highlight) : [];
       var lineTextStyles = cx([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
-      var lineNumberStyles = cx(styles.lineNumber.euiCodeBlock__lineNumber);
-      children = [{
+      var lineTextElement = {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['euiCodeBlock__lineText', lineTextStyles]
+        },
+        children: node
+      }; // Line number column/wrapper
+
+      var lineNumberWrapperStyles = cx(styles.lineNumber.euiCodeBlock__lineNumberWrapper);
+      var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
         properties: (_properties = {
           style: {
             inlineSize: width
           }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
         children: []
-      }, {
+      }; // Line number element
+
+      var lineNumberStyles = cx(styles.lineNumber.euiCodeBlock__lineNumber);
+      var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: {
-          className: ['euiCodeBlock__lineText', lineTextStyles]
-        },
-        children: node
-      }];
+        properties: _defineProperty({
+          className: [lineNumberStyles]
+        }, 'aria-hidden', true),
+        children: [{
+          type: 'text',
+          value: String(lineNumber)
+        }]
+      };
+      lineNumberWrapperElement.children.push(lineNumberElement); // Annotation element
+
+      var hasAnnotation = (_options$annotations = options.annotations) === null || _options$annotations === void 0 ? void 0 : _options$annotations.hasOwnProperty(lineNumber);
+
+      if (hasAnnotation) {
+        var annotationElement = {
+          type: 'annotation',
+          annotation: options.annotations[lineNumber],
+          lineNumber: lineNumber
+        };
+        lineNumberWrapperElement.children.push(annotationElement);
+      }
+
+      children = [lineNumberWrapperElement, lineTextElement];
     }
 
     wrapped.push({
@@ -195,6 +234,7 @@ export var highlightByLine = function highlightByLine(children, language, data,
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
-    highlight: data.highlight
+    highlight: data.highlight,
+    annotations: data.annotations
   }, euiTheme);
 };

package/es/components/form/range/range_track.js

@@ -101,7 +101,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   }, [showTicks, ticks, min, max, tickInterval, step]);
   var euiTheme = useEuiTheme();
   var styles = euiRangeTrackStyles(euiTheme);
-  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, (tickSequence || ticks) && styles.hasTicks];
+  var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),

package/es/components/icon/assets/app_agent.js

@@ -31,18 +31,10 @@ var EuiIconAppAgent = function EuiIconAppAgent(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
-  }), ___EmotionJSX("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
-  }), ___EmotionJSX("path", {
-    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
+    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
   }), ___EmotionJSX("path", {
     className: "euiIcon__fillSecondary",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
+    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
   }));
 };
 

package/es/components/icon/assets/app_fleet.js

@@ -31,10 +31,18 @@ var EuiIconAppFleet = function EuiIconAppFleet(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z"
+    className: "euiIcon__fillSecondary",
+    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
+  }), ___EmotionJSX("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
+  }), ___EmotionJSX("path", {
+    d: "M7 5.045L2 7.827v15.577l14 7.788 14-7.788V7.827l-5-2.782v2.289l3 1.669v13.225l-12 6.676-12-6.676V9.003l3-1.669V5.045z"
   }), ___EmotionJSX("path", {
     className: "euiIcon__fillSecondary",
-    d: "M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22 12.5L16 9l-6 3.5v7l6 3.5 6-3.5v-7zm-9.974 1.205L16 11.387l3.974 2.318v4.59L16 20.613l-3.974-2.318v-4.59z"
   }));
 };
 

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;")
+  };
+};