Skip to content

feat(form-action-bar): add FormActionBar pattern#1404

Open
ByronDWall wants to merge 2 commits intomainfrom
FEC-430-form-action-bar
Open

feat(form-action-bar): add FormActionBar pattern#1404
ByronDWall wants to merge 2 commits intomainfrom
FEC-430-form-action-bar

Conversation

@ByronDWall
Copy link
Copy Markdown
Contributor

@ByronDWall ByronDWall commented Apr 21, 2026

Summary

  • Introduces a flat-props FormActionBar pattern at packages/nimbus/src/patterns/actions/form-action-bar/ — composes save, cancel, and optional delete buttons for form footers
  • Works inside DefaultPage.Footer, ModalPage.Footer, Drawer.Footer, and Dialog.Footer; cancelSlot="close" forwards the React Aria close slot for dialog dismissal
  • Extends i18n compile/generate scripts to recurse into pattern directories so pattern messages ship with component messages
  • Updates DefaultPage and ModalPage dev docs/stories to demonstrate the new pattern and point away from manual button composition

Jira: FEC-430

Test plan

  • Story tests for form-action-bar.stories.tsx pass (9 tests)
  • Story tests for modal-page.stories.tsx and default-page.stories.tsx pass (22 tests)
  • pnpm --filter @commercetools/nimbus typecheck clean
  • pnpm --filter @commercetools/nimbus build succeeds; dist types include cancelSlot and buttonSize
  • Verify docs site renders the new pattern page and cross-links from DefaultPage/ModalPage resolve
  • Confirm non-English locale strings get real translations via Transifex before release

Notes

Non-English locale files currently ship English placeholders; final translations will land via Transifex (noted in the changeset).

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nimbus-documentation Ready Ready Preview, Comment Apr 21, 2026 8:58pm
nimbus-storybook Ready Ready Preview, Comment Apr 21, 2026 8:58pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 21, 2026

🦋 Changeset detected

Latest commit: d11163a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@commercetools/nimbus Major
@commercetools/nimbus-mcp Major
@commercetools/nimbus-tokens Major
@commercetools/nimbus-icons Major
@commercetools/nimbus-design-token-ts-plugin Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ByronDWall and others added 2 commits April 21, 2026 15:50
Introduces a flat-props FormActionBar that composes save, cancel, and
optional delete buttons for form footers. Works inside DefaultPage.Footer,
ModalPage.Footer, Drawer.Footer, and Dialog.Footer. Includes i18n support
for button labels and group aria-label, React Aria slot passthrough for
dialog close wiring, and uniform button sizing.

Extends the i18n compile/generate scripts to recurse into pattern
directories so pattern messages ship alongside component messages.
@valoriecarli valoriecarli force-pushed the FEC-430-form-action-bar branch from ea101a4 to d11163a Compare April 21, 2026 20:55
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2026

Localization reminder: This PR adds or modifies `.i18n.ts` files.

Please create a Jira ticket for the localization manager to initiate translation of any new or updated strings in Transifex. See LOC-1766 as an example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants