@elastic/eui 75.0.0 → 75.1.0

package/test-env/components/code/code_block_line.styles.js

@@ -33,11 +33,12 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.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__*/(0, _css.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__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.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__*/(0, _css.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__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/test-env/components/code/utils.js

@@ -17,6 +17,8 @@ var _refractor = require("refractor");
 
 var _css = require("@emotion/css");
 
+var _code_block_annotations = require("./code_block_annotations");
+
 var _code_block_line = require("./code_block_line.styles");
 
 var _react2 = require("@emotion/react");
@@ -68,7 +70,15 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
       key: key,
       className: (0, _css.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
+        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          lineNumber: el.lineNumber,
+          children: el.annotation,
+          key: i
+        }) // prettier-ignore
+        : nodeToHtml(el, i, nodes, depth + 1)
+      );
     }));
   }
 
@@ -176,31 +186,61 @@ function wrapLines(nodes, options, euiTheme) {
     var lineStyles = (0, _css.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 = (0, _css.cx)([styles.lineText.euiCodeBlock__lineText, highlights.includes(lineNumber) && styles.lineText.isHighlighted]);
-      var lineNumberStyles = (0, _css.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 = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumberWrapper);
+      var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
         properties: (_properties = {
           style: {
             inlineSize: width
           }
-        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, 'aria-hidden', true), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberStyles]), _properties),
+        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
         children: []
-      }, {
+      }; // Line number element
+
+      var lineNumberStyles = (0, _css.cx)(styles.lineNumber.euiCodeBlock__lineNumber);
+      var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: {
-          className: ['euiCodeBlock__lineText', lineTextStyles]
-        },
-        children: node
-      }];
+        properties: (0, _defineProperty2.default)({
+          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({
@@ -220,7 +260,8 @@ var highlightByLine = function highlightByLine(children, language, data, euiThem
     lineNumber: data.start
   }), {
     showLineNumbers: data.show,
-    highlight: data.highlight
+    highlight: data.highlight,
+    annotations: data.annotations
   }, euiTheme);
 };
 

package/test-env/components/form/range/range_track.js

@@ -105,7 +105,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
   }, [showTicks, ticks, min, max, tickInterval, step]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_track.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 = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/test-env/components/icon/assets/app_agent.js

@@ -36,18 +36,10 @@ var EuiIconAppAgent = function EuiIconAppAgent(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 2.82L16 .038 11 2.82v2.289l5-2.782 5 2.782v-2.29z"
-  }), (0, _react2.jsx)("path", {
-    className: "euiIcon__fillSecondary",
-    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
-  }), (0, _react2.jsx)("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"
   }), (0, _react2.jsx)("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/test-env/components/icon/assets/app_fleet.js

@@ -36,10 +36,18 @@ var EuiIconAppFleet = function EuiIconAppFleet(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("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"
+  }), (0, _react2.jsx)("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M21 7.282L16 4.5l-5 2.782V9.57l5-2.781 5 2.781V7.282z"
+  }), (0, _react2.jsx)("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"
   }), (0, _react2.jsx)("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/test-env/components/steps/step.js

@@ -23,6 +23,10 @@ var _title = require("../title");
 
 var _step_number = require("./step_number");
 
+var _services = require("../../services");
+
+var _step = require("./step.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "children", "headingElement", "step", "title", "titleSize", "status"];
@@ -43,27 +47,32 @@ var EuiStep = function EuiStep(_ref) {
       titleSize = _ref$titleSize === void 0 ? 's' : _ref$titleSize,
       status = _ref.status,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiStep', {
-    'euiStep--small': titleSize === 'xs',
-    'euiStep-isDisabled': status === 'disabled'
-  }, className);
-  var numberClasses = (0, _classnames.default)('euiStep__circle', {
-    'euiStepNumber--small': titleSize === 'xs'
-  });
+  var classes = (0, _classnames.default)('euiStep', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _step.euiStepStyles)(euiTheme);
+  var cssStyles = [styles.euiStep, styles[titleSize]];
+  var contentStyles = (0, _step.euiStepContentStyles)(euiTheme);
+  var cssContentStyles = [contentStyles.euiStep__content, contentStyles[titleSize]];
+  var titleStyles = (0, _step.euiStepTitleStyles)(euiTheme);
+  var cssStepTitleStyles = [titleStyles.euiStep__title, status === 'disabled' && titleStyles.isDisabled, titleStyles[titleSize]];
+  var cssTitleWrapperStyles = titleStyles.euiStep__titleWrapper;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), (0, _react2.jsx)("div", {
-    className: "euiStep__titleWrapper"
+    className: "euiStep__titleWrapper",
+    css: cssTitleWrapperStyles
   }, (0, _react2.jsx)(_step_number.EuiStepNumber, {
-    className: numberClasses,
     number: step,
     status: status,
     titleSize: titleSize
   }), (0, _react2.jsx)(_title.EuiTitle, {
     size: titleSize,
-    className: "euiStep__title"
+    className: "euiStep__title",
+    css: cssStepTitleStyles
   }, /*#__PURE__*/(0, _react.createElement)(headingElement, null, title))), (0, _react2.jsx)("div", {
-    className: "euiStep__content"
+    className: "euiStep__content",
+    css: cssContentStyles
   }, children));
 };
 

package/test-env/components/steps/step.styles.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepVariables = exports.euiStepTitleStyles = exports.euiStepStyles = exports.euiStepContentStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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.
+ */
+var euiStepVariables = function euiStepVariables(euiTheme) {
+  return {
+    numberSize: euiTheme.size.xl,
+    numberXSSize: euiTheme.size.l,
+    numberMargin: euiTheme.size.base
+  };
+};
+
+exports.euiStepVariables = euiStepVariables;
+
+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 = (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
+    return x / 2 - y / 2;
+  });
+  var lineEndPosition = (0, _global_styling.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__*/(0, _react.css)("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiTheme.size.xl, ";};label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiTheme.size.l, ";};label:xs;")
+  };
+};
+
+exports.euiStepStyles = euiStepStyles;
+
+var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  var styles = {
+    euiStep__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-bottom', (0, _global_styling.mathWithUnits)([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
+      return x + y;
+    })), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberSize, function (x) {
+      return x / 2;
+    })), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)(";label:s;"),
+    // s is the same as m, so we'll programmatically duplicate it below
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
+      return x / 2 + y;
+    })), (0, _global_styling.logicalCSS)('margin-left', (0, _global_styling.mathWithUnits)(euiStep.numberXSSize, function (x) {
+      return x / 2;
+    })), ";;label:xs;")
+  };
+  styles.s = styles.m;
+  return styles;
+};
+
+exports.euiStepContentStyles = euiStepContentStyles;
+
+var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = euiStepVariables(euiTheme);
+  return {
+    euiStep__titleWrapper: /*#__PURE__*/(0, _react.css)("display:flex;gap:", euiStep.numberMargin, ";;label:euiStep__titleWrapper;"),
+    euiStep__title: /*#__PURE__*/(0, _react.css)(";label:euiStep__title;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:isDisabled;"),
+    // Sizes
+    m: /*#__PURE__*/(0, _react.css)(";label:m;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), ";;label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)(";label:xs;")
+  };
+};
+
+exports.euiStepTitleStyles = euiStepTitleStyles;

package/test-env/components/steps/step_horizontal.js

@@ -21,6 +21,10 @@ var _step_number = require("./step_number");
 
 var _step_strings = require("./step_strings");
 
+var _services = require("../../services");
+
+var _step_horizontal = require("./step_horizontal.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["className", "step", "title", "onClick", "disabled", "status"];
@@ -35,43 +39,50 @@ var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
       _ref$status = _ref.status,
       status = _ref$status === void 0 ? 'incomplete' : _ref$status,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var buttonTitle = (0, _step_strings.useI18nStep)({
-    number: step,
-    title: title
-  });
-  var completeTitle = (0, _step_strings.useI18nCompleteStep)({
-    number: step,
-    title: title
-  });
-  var disabledTitle = (0, _step_strings.useI18nDisabledStep)({
-    number: step,
-    title: title
-  });
-  var incompleteTitle = (0, _step_strings.useI18nIncompleteStep)({
-    number: step,
-    title: title
-  });
-  var warningTitle = (0, _step_strings.useI18nWarningStep)({
-    number: step,
-    title: title
-  });
-  var currentTitle = (0, _step_strings.useI18nCurrentStep)({
-    number: step,
-    title: title
-  });
   if (disabled) status = 'disabled';
-  var classes = (0, _classnames.default)('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 = (0, _classnames.default)('euiStepHorizontal', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _step_horizontal.euiStepHorizontalStyles)(euiTheme);
+  var cssStyles = [styles.euiStepHorizontal, status === 'disabled' ? styles.disabled : styles.enabled];
+  var numberStyles = (0, _step_horizontal.euiStepHorizontalNumberStyles)(euiTheme);
+  var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
+  var titleStyles = (0, _step_horizontal.euiStepHorizontalTitleStyles)(euiTheme);
+  var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
+  var titleAttrsMap = {
+    step: (0, _step_strings.useI18nStep)({
+      number: step,
+      title: title
+    }),
+    current: (0, _step_strings.useI18nCurrentStep)({
+      number: step,
+      title: title
+    }),
+    disabled: (0, _step_strings.useI18nDisabledStep)({
+      number: step,
+      title: title
+    }),
+    incomplete: (0, _step_strings.useI18nIncompleteStep)({
+      number: step,
+      title: title
+    }),
+    complete: (0, _step_strings.useI18nCompleteStep)({
+      number: step,
+      title: title
+    }),
+    warning: (0, _step_strings.useI18nWarningStep)({
+      number: step,
+      title: title
+    }),
+    danger: (0, _step_strings.useI18nErrorsStep)({
+      number: step,
+      title: title
+    }),
+    loading: (0, _step_strings.useI18nLoadingStep)({
+      number: step,
+      title: title
+    })
+  };
+  var titleAttr = titleAttrsMap[status || 'step'];
 
   var onStepClick = function onStepClick(event) {
     if (!disabled) onClick(event);
@@ -79,15 +90,19 @@ var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
 
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     className: classes,
-    title: stepTitle,
+    title: titleAttr,
     onClick: onStepClick,
-    disabled: disabled
+    disabled: disabled,
+    css: cssStyles,
+    "data-step-status": status
   }, rest), (0, _react2.jsx)(_step_number.EuiStepNumber, {
     className: "euiStepHorizontal__number",
     status: status,
-    number: step
+    number: step,
+    css: cssNumberStyles
   }), (0, _react2.jsx)("span", {
-    className: "euiStepHorizontal__title"
+    className: "euiStepHorizontal__title",
+    css: cssTitleStyles
   }, title));
 };
 
@@ -109,7 +124,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.default.any,
   className: _propTypes.default.string,

package/test-env/components/steps/step_horizontal.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStepHorizontalTitleStyles = exports.euiStepHorizontalStyles = exports.euiStepHorizontalNumberStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling/");
+
+var _title = require("../title/title.styles");
+
+var _step = require("./step.styles");
+
+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)."; }
+
+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__
+};
+
+var euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var euiStep = (0, _step.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__*/(0, _react.css)((0, _global_styling.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:", (0, _global_styling.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__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
+    disabled: _ref
+  };
+};
+
+exports.euiStepHorizontalStyles = euiStepHorizontalStyles;
+
+var euiStepHorizontalNumberStyles = function euiStepHorizontalNumberStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__number: /*#__PURE__*/(0, _react.css)("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
+  };
+};
+
+exports.euiStepHorizontalNumberStyles = euiStepHorizontalNumberStyles;
+
+var euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiStepHorizontal__title: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";margin-block-start:", euiTheme.size.s, ";font-weight:", euiTheme.font.weight.bold, ";text-align:center;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{display:none;};label:euiStepHorizontal__title;"),
+    disabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";;label:disabled;")
+  };
+};
+
+exports.euiStepHorizontalTitleStyles = euiStepHorizontalTitleStyles;