feat: add custom primary actions for wizard component #3994

SpyZzey · 2025-10-30T17:24:55Z

Description

Adds functionality to overwrite the content of the primary actions for wizards (e.g. Next, Previous, Cancel, ...).
Currently, the Wizard only allows the default primary actions (Next, Previous, Cancel, Finish, Skip to ...). To allow further flexibility, a customPrimaryActions-property was introduced to allow custom actions.

Related links, issue #, if available: n/a

How has this been tested?

Unit Testing

Added unit test to check if custom primary actions are rendered instead of default buttons
Added unit test to check if custom primary actions work on all steps
Added unit test to check if custom primary actions overwrite skip-to button
Added unit test to check if default buttons are used if custom primary actions are null or undefined

Manual Testing

Confirmed custom primary actions are being rendered
Confirmed custom primary actions can be used to navigate steps
Confirmed custom primary actions can be customized per step

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

just-boris

There is a failing build. Let's fix this first and then I will review the rest

codecov · 2025-10-31T14:32:00Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.18%. Comparing base (05d1e35) to head (bdd2365).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3994   +/-   ##
=======================================
  Coverage   97.18%   97.18%           
=======================================
  Files         858      858           
  Lines       25345    25348    +3     
  Branches     9004     9007    +3     
=======================================
+ Hits        24632    24635    +3     
  Misses        664      664           
  Partials       49       49

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

just-boris · 2025-10-31T14:57:37Z

pages/wizard/custom-primary-actions.page.tsx

+  };
+
+  const customPrimaryActions = (
+    <SpaceBetween size="m" direction="horizontal">


We should be using xs spacing size between buttons. There is a mention of this in our docs: https://cloudscape.design/components/button/?tabId=api

just-boris · 2025-10-31T14:58:20Z

pages/wizard/custom-primary-actions.page.tsx

+      id="wizard"
+      steps={steps}
+      i18nStrings={i18nStrings}
+      allowSkipTo={true}


What does this prop do in this case? if we render a fully custom actions, this property has no effect, right?

Correct. The property won't have an effect in this case. It's in the dev demo pages and I used it for manual testing.

src/wizard/__tests__/wizard.test.tsx

just-boris · 2025-10-31T15:00:36Z

src/wizard/__tests__/wizard.test.tsx

+    DEFAULT_STEPS.forEach((_, index) => {
+      const customActionButtonWrapper = wrapper.findActions()!.findButton('[data-testid="custom-action"]');
+      expect(customActionButtonWrapper).not.toBeNull();
+      customActionButtonWrapper?.click();


This should be a strict non-null assertion, !. Because otherwise the test silently skips this line

The customActionButtonWrapper is asserted the line before, so it would throw an error before. But I'll fix it to be clearer.

just-boris · 2025-10-31T15:06:26Z

src/wizard/__tests__/wizard.test.tsx

+    expect(wrapper.findActions()!.findButton('[data-testid="custom-next"]')).not.toBeNull();
+  });
+
+  test('custom primary actions work on all steps', () => {


Is it really needed to check on all steps? I think it would be better to check 3 corner-cases specifically 1) first step 2) any middle step 3) last step

The DEFAULT_STEPS contains 3 steps, so it'll check the first, middle and last step or would you suggest separating the test into three separate ones?

yes, 3 separate ones would be easier to read and understand why they exist

just-boris · 2025-10-31T15:07:07Z

src/wizard/interfaces.ts

  allowSkipTo?: boolean;

+  /**
+   * Specifies right-aligned custom primary actions for the wizard. Overwrites existing buttons (e.g. Cancel, Next, Finish, ...).


This ...). punctuation in the end looks strange, you will need to check with a designer if there is a better way

- Change SpaceBetween size from 'm' to 'xs' in custom primary actions - Remove unnecessary allowSkipTo prop - Replace original chaining with non-null assertion in tests - Remove debug.console.log statement

SpyZzey marked this pull request as ready for review October 31, 2025 13:15

SpyZzey requested a review from a team as a code owner October 31, 2025 13:15

SpyZzey requested review from a team, NathanZlion and just-boris and removed request for a team and NathanZlion October 31, 2025 13:15

just-boris marked this pull request as draft October 31, 2025 13:28

just-boris marked this pull request as ready for review October 31, 2025 13:28

just-boris reviewed Oct 31, 2025

View reviewed changes

SpyZzey marked this pull request as draft October 31, 2025 14:00

SpyZzey added 4 commits October 31, 2025 15:22

feat: add custom primary actions for wizard component

d5c5cf7

fix: restrict wizard custom primary actions to core-only

4ef11ff

fix: update test snapshots

ccba078

fix: update test snapshots

08633b0

SpyZzey force-pushed the feat/wizard-custom-primary-actions branch from 914124c to 08633b0 Compare October 31, 2025 14:22

SpyZzey deployed to dev-pages-react18 October 31, 2025 14:31 — with GitHub Actions View deployment

SpyZzey deployed to dev-pages-react16 October 31, 2025 14:31 — with GitHub Actions View deployment

SpyZzey marked this pull request as ready for review October 31, 2025 14:44

SpyZzey requested a review from just-boris October 31, 2025 15:04

just-boris reviewed Oct 31, 2025

View reviewed changes

SpyZzey added 4 commits October 31, 2025 16:49

fix: address PR feedback on wizard component

274f528

- Change SpaceBetween size from 'm' to 'xs' in custom primary actions - Remove unnecessary allowSkipTo prop - Replace original chaining with non-null assertion in tests - Remove debug.console.log statement

chore: change property description (remove '...')

77cb7fc

test: split custom primary actions validation into 3 different steps

6e40eac

fix: update test snapshots

bdd2365

SpyZzey deployed to dev-pages-react18 October 31, 2025 16:24 — with GitHub Actions View deployment

SpyZzey deployed to dev-pages-react16 October 31, 2025 16:24 — with GitHub Actions View deployment

just-boris approved these changes Oct 31, 2025

View reviewed changes

SpyZzey added this pull request to the merge queue Nov 3, 2025

Merged via the queue into main with commit 67a26ae Nov 3, 2025
49 checks passed

SpyZzey deleted the feat/wizard-custom-primary-actions branch November 3, 2025 09:19

feat: add custom primary actions for wizard component #3994

feat: add custom primary actions for wizard component #3994

Uh oh!

Conversation

SpyZzey commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

just-boris left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SpyZzey commented Oct 30, 2025 •

edited

Loading

codecov bot commented Oct 31, 2025 •

edited

Loading