@automattic/vip-design-system 2.20.1 → 2.20.3

package/build/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -111,7 +111,7 @@ const inlineChipsContainerStyles = {
 	flexWrap: 'wrap',
 	alignItems: 'center',
 	p: 1,
-	pr: 0,
+	pr: 5,
 	position: 'relative',
 	'& .autocomplete__input': {
 		...defaultStyles[ '& .autocomplete__input' ],
@@ -125,13 +125,15 @@ const inlineChipsContainerStyles = {
 		lineHeight: '24px',
 		minHeight: '24px',
 		'& .autocomplete__dropdown-arrow-down': {
-			top: 'unset',
-			bottom: '6px',
+			top: '6px',
+			bottom: 'unset',
 		},
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
+const DefaultArrow = config => (
+	<FormSelectArrow className={ config.className } separator={ false } />
+);
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -446,7 +448,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 								unselectValue={ unselectValue }
 							/>
 						) ) }
-						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+						<div sx={ { flex: '1 1 120px', minWidth: '120px', mr: -5 } }>
 							<Autocomplete
 								id={ forLabel }
 								aria-busy={ loading }

package/build/system/Wizard/Wizard.d.ts

@@ -19,6 +19,12 @@ export interface WizardProps {
      * @default []
      */
     skipped?: number[];
+    /**
+     * Array of zero-based indices for steps that are in an error state. An errored
+     * step shows a red error icon, title, and left border (see WizardStep `error`).
+     * @default []
+     */
+    errored?: number[];
     /** Additional CSS class name for the wizard container. */
     className?: string;
     /**

package/build/system/Wizard/Wizard.js

@@ -23,6 +23,8 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
     completed = _ref$completed === void 0 ? [] : _ref$completed,
     _ref$skipped = _ref.skipped,
     skipped = _ref$skipped === void 0 ? [] : _ref$skipped,
+    _ref$errored = _ref.errored,
+    errored = _ref$errored === void 0 ? [] : _ref$errored,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$titleAutofocus = _ref.titleAutofocus,
@@ -61,6 +63,7 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
         active: index === activeStep,
         complete: completed.includes(index),
         skipped: skipped.includes(index),
+        error: errored.includes(index),
         order: index + 1,
         totalSteps: steps.length,
         subTitle: subTitle,

package/build/system/Wizard/Wizard.stories.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Wizard>;
 export declare const Primary: Story;
+export declare const Error: Story;
 export declare const Default: Story;
 export declare const WithTitleAutoFocus: Story;
 export declare const HideStepText: Story;

package/build/system/Wizard/Wizard.stories.js

@@ -37,6 +37,40 @@ export var Primary = {
     }]
   }
 };
+export var Error = {
+  render: function render() {
+    var steps = [{
+      title: 'Step One',
+      titleVariant: 'h3',
+      children: _jsxs(Box, {
+        children: [_jsx(Text, {
+          sx: {
+            display: 'block',
+            mb: 3,
+            color: 'texts.secondary'
+          },
+          children: "Something went wrong. Please try again."
+        }), _jsx(Button, {
+          children: "Retry"
+        })]
+      })
+    }, {
+      title: 'Step Two',
+      titleVariant: 'h3'
+    }, {
+      title: 'Step Three',
+      titleVariant: 'h3'
+    }];
+    return _jsx(Box, {
+      mt: 4,
+      children: _jsx(Wizard, {
+        activeStep: 0,
+        steps: steps,
+        errored: [0]
+      })
+    });
+  }
+};
 export var Default = {
   render: function render() {
     var steps = [{

package/build/system/Wizard/Wizard.test.d.ts

@@ -0,0 +1,2 @@
+/** @jsxImportSource theme-ui */
+export {};

package/build/system/Wizard/Wizard.test.js

@@ -0,0 +1,119 @@
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+/** @jsxImportSource theme-ui */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+import { Wizard } from './Wizard';
+import { theme } from '../';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+jest.mock('@theme-ui/match-media');
+var renderWithTheme = function renderWithTheme(children) {
+  return render(_jsx(ThemeUIProvider, {
+    theme: theme,
+    children: children
+  }));
+};
+var steps = [{
+  title: 'Salesforce Domain',
+  children: _jsx("div", {
+    children: "Domain content"
+  })
+}, {
+  title: 'Install Packages'
+}, {
+  title: 'Connect to Salesforce'
+}];
+describe('<Wizard /> error state', function () {
+  it('marks an errored step with the error status class', function () {
+    var _renderWithTheme = renderWithTheme(_jsx(Wizard, {
+        activeStep: 0,
+        steps: steps,
+        errored: [0]
+      })),
+      container = _renderWithTheme.container;
+    expect(container.querySelector('.wizard-step-error')).toBeInTheDocument();
+  });
+  it('still renders the active step content when it is in an error state', function () {
+    renderWithTheme(_jsx(Wizard, {
+      activeStep: 0,
+      steps: steps,
+      errored: [0]
+    }));
+    expect(screen.getByText('Domain content')).toBeInTheDocument();
+  });
+  it('announces the error status to screen readers', function () {
+    renderWithTheme(_jsx(Wizard, {
+      activeStep: 0,
+      steps: steps,
+      errored: [0]
+    }));
+    expect(screen.getByText(/Step has an error/i)).toBeInTheDocument();
+  });
+  it('does not apply the error status to steps that are not errored', function () {
+    var _renderWithTheme2 = renderWithTheme(_jsx(Wizard, {
+        activeStep: 0,
+        steps: steps,
+        errored: [0]
+      })),
+      container = _renderWithTheme2.container;
+
+    // Only one step should carry the error status.
+    expect(container.querySelectorAll('.wizard-step-error')).toHaveLength(1);
+  });
+  it('has no accessibility violations in the error state', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _renderWithTheme3, container, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _renderWithTheme3 = renderWithTheme(_jsx(Wizard, {
+            activeStep: 0,
+            steps: steps,
+            errored: [0]
+          })), container = _renderWithTheme3.container;
+          _t = expect;
+          _context.n = 1;
+          return axe(container);
+        case 1:
+          _t(_context.v).toHaveNoViolations();
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  })));
+  it('hides the subtitle of an errored step, showing only its error content', function () {
+    var errorSteps = [{
+      title: 'Step One',
+      subTitle: 'Step instructions',
+      children: _jsx("div", {
+        children: "Error body"
+      })
+    }];
+    renderWithTheme(_jsx(Wizard, {
+      activeStep: 0,
+      steps: errorSteps,
+      errored: [0]
+    }));
+    expect(screen.queryByText('Step instructions')).not.toBeInTheDocument();
+    expect(screen.getByText('Error body')).toBeInTheDocument();
+  });
+  it('shows the subtitle of an active step that is not errored', function () {
+    var okSteps = [{
+      title: 'Step One',
+      subTitle: 'Step instructions',
+      children: _jsx("div", {
+        children: "Body"
+      })
+    }];
+    renderWithTheme(_jsx(Wizard, {
+      activeStep: 0,
+      steps: okSteps
+    }));
+    expect(screen.getByText('Step instructions')).toBeInTheDocument();
+  });
+});

package/build/system/Wizard/WizardStep.d.ts

@@ -38,6 +38,14 @@ export interface WizardStepProps {
      * @default false
      */
     skipped?: boolean;
+    /**
+     * Whether this step is in an error state. Takes visual precedence over the
+     * active/complete/skipped status: renders a red error icon, title, and left
+     * border. The subtitle is hidden so the step shows only its error content
+     * (children); children continue to render for the active step.
+     * @default false
+     */
+    error?: boolean;
     /** Callback invoked when the user clicks the change action on a completed or skipped step. */
     onChange?: () => void;
     /** An array of label-value pairs displayed as a summary when the step is completed or skipped. */

package/build/system/Wizard/WizardStep.js

@@ -4,7 +4,7 @@
  * External dependencies
  */
 import React, { useLayoutEffect } from 'react';
-import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
+import { BsCircleFill, BsFillCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
 
 /**
  * Internal dependencies
@@ -23,6 +23,8 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     skipped = _ref$skipped === void 0 ? false : _ref$skipped,
     _ref$complete = _ref.complete,
     complete = _ref$complete === void 0 ? false : _ref$complete,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
     children = _ref.children,
     active = _ref.active,
     order = _ref.order,
@@ -45,7 +47,11 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
   var titleRef = React.useRef(null);
   var status = 'inactive';
   var statusText = 'Step not completed';
-  if (active && !(complete && totalSteps === 1)) {
+  if (error) {
+    // Error takes visual precedence over every other status.
+    status = 'error';
+    statusText = 'Step has an error';
+  } else if (active && !(complete && totalSteps === 1)) {
     // if the step is active but is an unique step, we don't want to show as active status
     status = 'active';
     statusText = ''; // not adding the status text for active step since it's announced by aria-current
@@ -60,6 +66,12 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     statusText = "Status: " + statusText;
   }
   var stepText = "STEP " + order + " OF " + totalSteps;
+  var StatusIcon = BsCircleFill;
+  if (error) {
+    StatusIcon = BsXCircleFill;
+  } else if (complete) {
+    StatusIcon = BsFillCheckCircleFill;
+  }
   var borderLeftColor = "wizard.step.border." + status;
   var statusIconColor = "wizard.step.icon." + status;
   var statusIconStyles = {
@@ -123,9 +135,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
             alignItems: 'center'
           },
           "aria-hidden": "true",
-          children: [complete ? _jsx(BsFillCheckCircleFill, {
-            sx: statusIconStyles
-          }) : _jsx(BsCircleFill, {
+          children: [_jsx(StatusIcon, {
             sx: statusIconStyles
           }), title]
         }), _jsx(ScreenReaderText, {
@@ -160,14 +170,17 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
       sx: {
         mt: 2
       }
-    }), subTitle && active && _jsx(Text, {
+    }), subTitle && active && !error && _jsx(Text, {
       sx: {
         my: 3
       },
       children: subTitle
-    }), active && Boolean(children) && _jsx(Box, {
+    }), active && Boolean(children) &&
+    // In the error state there's no subtitle, so the content sits directly
+    // under the heading and needs a bit more breathing room (12px vs 8px).
+    _jsx(Box, {
       sx: {
-        pt: 2
+        pt: error ? 3 : 2
       },
       children: children
     })]

package/build/system/theme/index.js

@@ -88,24 +88,31 @@ var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
         number: {
           color: theme.text.helper
         },
+        // The `error` status (heading/icon/border below) intentionally uses
+        // `theme.text.error` (#bf2a23) for all three, per the Figma error design —
+        // not the `support.*.error` palette used by other statuses, whose reds are
+        // different shades (icon #e74135, accent #ff745f) and would not match.
         heading: {
           complete: theme.text.success,
           active: theme.heading,
           inactive: theme.text.helper,
-          skipped: theme.text.helper
+          skipped: theme.text.helper,
+          error: theme.text.error
         },
         icon: {
           complete: theme.support.icon.success,
           active: theme.link["default"],
           inactive: theme.input.border.disabled,
-          skipped: theme.input.border.disabled
+          skipped: theme.input.border.disabled,
+          error: theme.text.error
         },
         border: {
           "default": theme.border['2'],
           complete: theme.support.accent.success,
           active: theme.border.accent,
           inactive: theme.input.border.disabled,
-          skipped: theme.input.border.disabled
+          skipped: theme.input.border.disabled,
+          error: theme.text.error
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.20.1",
+  "version": "2.20.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/NewForm/FormAutocompleteMultiselect.jsx

@@ -111,7 +111,7 @@ const inlineChipsContainerStyles = {
 	flexWrap: 'wrap',
 	alignItems: 'center',
 	p: 1,
-	pr: 0,
+	pr: 5,
 	position: 'relative',
 	'& .autocomplete__input': {
 		...defaultStyles[ '& .autocomplete__input' ],
@@ -125,13 +125,15 @@ const inlineChipsContainerStyles = {
 		lineHeight: '24px',
 		minHeight: '24px',
 		'& .autocomplete__dropdown-arrow-down': {
-			top: 'unset',
-			bottom: '6px',
+			top: '6px',
+			bottom: 'unset',
 		},
 	},
 };
 
-const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
+const DefaultArrow = config => (
+	<FormSelectArrow className={ config.className } separator={ false } />
+);
 
 const AddSelectionStatus = ( { status } ) => {
 	return (
@@ -446,7 +448,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 								unselectValue={ unselectValue }
 							/>
 						) ) }
-						<div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
+						<div sx={ { flex: '1 1 120px', minWidth: '120px', mr: -5 } }>
 							<Autocomplete
 								id={ forLabel }
 								aria-busy={ loading }

package/src/system/Wizard/Wizard.stories.tsx

@@ -47,6 +47,38 @@ export const Primary: Story = {
 	},
 };
 
+export const Error: Story = {
+	render: () => {
+		const steps: WizardStepProps[] = [
+			{
+				title: 'Step One',
+				titleVariant: 'h3',
+				children: (
+					<Box>
+						<Text sx={ { display: 'block', mb: 3, color: 'texts.secondary' } }>
+							Something went wrong. Please try again.
+						</Text>
+						<Button>Retry</Button>
+					</Box>
+				),
+			},
+			{
+				title: 'Step Two',
+				titleVariant: 'h3',
+			},
+			{
+				title: 'Step Three',
+				titleVariant: 'h3',
+			},
+		];
+		return (
+			<Box mt={ 4 }>
+				<Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } />
+			</Box>
+		);
+	},
+};
+
 export const Default: Story = {
 	render: () => {
 		const steps: WizardStepProps[] = [

package/src/system/Wizard/Wizard.test.tsx

@@ -0,0 +1,79 @@
+/** @jsxImportSource theme-ui */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeUIProvider } from 'theme-ui';
+
+import { Wizard } from './Wizard';
+import { theme } from '../';
+
+jest.mock( '@theme-ui/match-media' );
+
+const renderWithTheme = children =>
+	render( <ThemeUIProvider theme={ theme }>{ children }</ThemeUIProvider> );
+
+const steps = [
+	{ title: 'Salesforce Domain', children: <div>Domain content</div> },
+	{ title: 'Install Packages' },
+	{ title: 'Connect to Salesforce' },
+];
+
+describe( '<Wizard /> error state', () => {
+	it( 'marks an errored step with the error status class', () => {
+		const { container } = renderWithTheme(
+			<Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } />
+		);
+
+		expect( container.querySelector( '.wizard-step-error' ) ).toBeInTheDocument();
+	} );
+
+	it( 'still renders the active step content when it is in an error state', () => {
+		renderWithTheme( <Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } /> );
+
+		expect( screen.getByText( 'Domain content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'announces the error status to screen readers', () => {
+		renderWithTheme( <Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } /> );
+
+		expect( screen.getByText( /Step has an error/i ) ).toBeInTheDocument();
+	} );
+
+	it( 'does not apply the error status to steps that are not errored', () => {
+		const { container } = renderWithTheme(
+			<Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } />
+		);
+
+		// Only one step should carry the error status.
+		expect( container.querySelectorAll( '.wizard-step-error' ) ).toHaveLength( 1 );
+	} );
+
+	it( 'has no accessibility violations in the error state', async () => {
+		const { container } = renderWithTheme(
+			<Wizard activeStep={ 0 } steps={ steps } errored={ [ 0 ] } />
+		);
+
+		expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'hides the subtitle of an errored step, showing only its error content', () => {
+		const errorSteps = [
+			{ title: 'Step One', subTitle: 'Step instructions', children: <div>Error body</div> },
+		];
+		renderWithTheme( <Wizard activeStep={ 0 } steps={ errorSteps } errored={ [ 0 ] } /> );
+
+		expect( screen.queryByText( 'Step instructions' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Error body' ) ).toBeInTheDocument();
+	} );
+
+	it( 'shows the subtitle of an active step that is not errored', () => {
+		const okSteps = [
+			{ title: 'Step One', subTitle: 'Step instructions', children: <div>Body</div> },
+		];
+		renderWithTheme( <Wizard activeStep={ 0 } steps={ okSteps } /> );
+
+		expect( screen.getByText( 'Step instructions' ) ).toBeInTheDocument();
+	} );
+} );

package/src/system/Wizard/Wizard.tsx

@@ -27,6 +27,12 @@ export interface WizardProps {
 	 * @default []
 	 */
 	skipped?: number[];
+	/**
+	 * Array of zero-based indices for steps that are in an error state. An errored
+	 * step shows a red error icon, title, and left border (see WizardStep `error`).
+	 * @default []
+	 */
+	errored?: number[];
 	/** Additional CSS class name for the wizard container. */
 	className?: string;
 	/**
@@ -57,6 +63,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 			activeStep,
 			completed = [],
 			skipped = [],
+			errored = [],
 			className = null,
 			titleAutofocus = false,
 			showStepText = true,
@@ -95,6 +102,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 							active={ index === activeStep }
 							complete={ completed.includes( index ) }
 							skipped={ skipped.includes( index ) }
+							error={ errored.includes( index ) }
 							key={ index }
 							order={ index + 1 }
 							totalSteps={ steps.length }

package/src/system/Wizard/WizardStep.tsx

@@ -4,7 +4,7 @@
  * External dependencies
  */
 import React, { useLayoutEffect } from 'react';
-import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
+import { BsCircleFill, BsFillCheckCircleFill, BsXCircleFill } from 'react-icons/bs';
 
 /**
  * Internal dependencies
@@ -48,6 +48,14 @@ export interface WizardStepProps {
 	 * @default false
 	 */
 	skipped?: boolean;
+	/**
+	 * Whether this step is in an error state. Takes visual precedence over the
+	 * active/complete/skipped status: renders a red error icon, title, and left
+	 * border. The subtitle is hidden so the step shows only its error content
+	 * (children); children continue to render for the active step.
+	 * @default false
+	 */
+	error?: boolean;
 	/** Callback invoked when the user clicks the change action on a completed or skipped step. */
 	onChange?: () => void;
 	/** An array of label-value pairs displayed as a summary when the step is completed or skipped. */
@@ -91,6 +99,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 			subTitle,
 			skipped = false,
 			complete = false,
+			error = false,
 			children,
 			active,
 			order,
@@ -111,7 +120,11 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 		const titleRef = React.useRef< HTMLHeadingElement >( null );
 		let status = 'inactive';
 		let statusText = 'Step not completed';
-		if ( active && ! ( complete && totalSteps === 1 ) ) {
+		if ( error ) {
+			// Error takes visual precedence over every other status.
+			status = 'error';
+			statusText = 'Step has an error';
+		} else if ( active && ! ( complete && totalSteps === 1 ) ) {
 			// if the step is active but is an unique step, we don't want to show as active status
 			status = 'active';
 			statusText = ''; // not adding the status text for active step since it's announced by aria-current
@@ -127,6 +140,13 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 		}
 		const stepText = `STEP ${ order } OF ${ totalSteps }`;
 
+		let StatusIcon = BsCircleFill;
+		if ( error ) {
+			StatusIcon = BsXCircleFill;
+		} else if ( complete ) {
+			StatusIcon = BsFillCheckCircleFill;
+		}
+
 		const borderLeftColor = `wizard.step.border.${ status }`;
 		const statusIconColor = `wizard.step.icon.${ status }`;
 		const statusIconStyles = {
@@ -187,11 +207,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						) }
 
 						<Flex as="span" sx={ { alignItems: 'center' } } aria-hidden="true">
-							{ complete ? (
-								<BsFillCheckCircleFill sx={ statusIconStyles } />
-							) : (
-								<BsCircleFill sx={ statusIconStyles } />
-							) }
+							<StatusIcon sx={ statusIconStyles } />
 							{ title }
 						</Flex>
 
@@ -226,9 +242,13 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 					/>
 				) }
 
-				{ subTitle && active && <Text sx={ { my: 3 } }>{ subTitle }</Text> }
+				{ subTitle && active && ! error && <Text sx={ { my: 3 } }>{ subTitle }</Text> }
 
-				{ active && Boolean( children ) && <Box sx={ { pt: 2 } }>{ children }</Box> }
+				{ active && Boolean( children ) && (
+					// In the error state there's no subtitle, so the content sits directly
+					// under the heading and needs a bit more breathing room (12px vs 8px).
+					<Box sx={ { pt: error ? 3 : 2 } }>{ children }</Box>
+				) }
 			</Card>
 		);
 	}

package/src/system/theme/index.ts

@@ -130,17 +130,23 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 			number: {
 				color: theme.text.helper,
 			},
+			// The `error` status (heading/icon/border below) intentionally uses
+			// `theme.text.error` (#bf2a23) for all three, per the Figma error design —
+			// not the `support.*.error` palette used by other statuses, whose reds are
+			// different shades (icon #e74135, accent #ff745f) and would not match.
 			heading: {
 				complete: theme.text.success,
 				active: theme.heading,
 				inactive: theme.text.helper,
 				skipped: theme.text.helper,
+				error: theme.text.error,
 			},
 			icon: {
 				complete: theme.support.icon.success,
 				active: theme.link.default,
 				inactive: theme.input.border.disabled,
 				skipped: theme.input.border.disabled,
+				error: theme.text.error,
 			},
 			border: {
 				default: theme.border[ '2' ],
@@ -148,6 +154,7 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
 				active: theme.border.accent,
 				inactive: theme.input.border.disabled,
 				skipped: theme.input.border.disabled,
+				error: theme.text.error,
 			},
 		},
 	},