@elastic/eui 75.0.0 → 75.1.0

package/optimize/lib/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/optimize/lib/components/form/range/range_track.js

@@ -103,7 +103,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/optimize/lib/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/optimize/lib/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/optimize/lib/components/icon/svgs/app_agent.svg

@@ -1,6 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
-<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
-<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
-<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
+<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
+<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
 </svg>

package/optimize/lib/components/icon/svgs/app_fleet.svg

@@ -1,4 +1,6 @@
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.99581 18.6363L0 20.4337V26.5661L6 30.1661L11 27.1661L16 30.1661L21 27.1661L26 30.1661L32 26.5661V20.4337L27 17.4337V12.4337L22 9.43374V4.43374L16 0.83374L10 4.43374V7.26581L12 7.29946V5.56612L16 3.16612L20 5.56612V9.43374L18.0041 10.6313L19.0042 12.3636L21 11.1661L25 13.5661V17.4337L21 19.8337L18.7433 18.4797L17.772 20.2293L20 21.5661V25.4337L16 27.8337L12 25.4337V23.7342L10 23.7006V25.4337L6 27.8337L2 25.4337L2 21.5661L3.99595 20.3686L2.99581 18.6363ZM22 25.4337V21.5661L26 19.1661L30 21.5661V25.4337L26 27.8337L22 25.4337Z" />
-<path class="euiIcon__fillSecondary" d="M11 22.1662L5 18.5662L5 12.4338L11 8.83382L17 12.4338L17 18.5662L11 22.1662ZM15 17.4338L15 13.5662L11 11.1662L7 13.5662L7 17.4338L11 19.8338L15 17.4338Z" />
+<path class="euiIcon__fillSecondary" d="M21 2.81994L16 0.0383301L11 2.81991V5.10857L16 2.32699L21 5.1086V2.81994Z" />
+<path class="euiIcon__fillSecondary" d="M21 7.28161L16 4.5L11 7.28158V9.57024L16 6.78866L21 9.57027V7.28161Z" />
+<path d="M7 5.04535L2 7.82695V23.4039L16 31.1923L30 23.4039V7.82695L25 5.04536V7.33402L28 9.00297V22.2278L16 28.9037L4 22.2279V9.00297L7 7.33401V5.04535Z" />
+<path class="euiIcon__fillSecondary" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.5L16 9L10 12.5V19.5L16 23L22 19.5V12.5ZM12.026 13.7053L16 11.3871L19.974 13.7053V18.2947L16 20.6129L12.026 18.2947V13.7053Z" />
 </svg>

package/optimize/lib/components/steps/step.js

@@ -21,6 +21,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"];
@@ -41,27 +45,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/optimize/lib/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/optimize/lib/components/steps/step_horizontal.js

@@ -19,6 +19,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"];
@@ -33,43 +37,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);
@@ -77,15 +88,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));
 };
 

package/optimize/lib/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;