Skip to content

Comments

feat: improve forms examples with bento grid, column layouts, and wizard styling#667

Closed
mmcintosh wants to merge 1 commit intoSonicJs-Org:mainfrom
mmcintosh:feat/forms-examples-polish
Closed

feat: improve forms examples with bento grid, column layouts, and wizard styling#667
mmcintosh wants to merge 1 commit intoSonicJs-Org:mainfrom
mmcintosh:feat/forms-examples-polish

Conversation

@mmcintosh
Copy link
Contributor

Description

Overhaul the Forms Examples page (/admin/forms/examples) with a modern bento card grid layout, proper column-based form layouts, and full wizard step navigation styling.

This is a companion to PR #623 (Forms as Collections) — #623 adds the backend feature, this PR polishes the visual showcase.

Changes

Bento Card Grid Landing

  • Replace sidebar navigation with responsive 3-column bento card grid
  • Cards grouped by category (Getting Started, Advanced, Components)
  • Featured cards span 2 columns; responsive breakpoints at 1024px and 640px
  • Click-to-expand detail view with back navigation and hash routing

Form.io CSS Fixes

  • Add formio.full.min.css stylesheet (was missing on examples page)
  • Restore Bootstrap grid CSS (.row, .col-* flex rules) scoped to .example-demo
  • Restore Bootstrap pagination for wizard step tabs (.pagination, .page-item, .page-link)
  • Comprehensive Form.io input/label/button styling matching builder page patterns
  • Wizard button styling: next = blue, submit = green
  • Mobile responsive: columns stack to single below 640px

Column Layouts (Form.io columns component)

  • Kitchen Sink: firstName+lastName, email+phone, appointmentDateTime+birthDate, country+interests, checkbox+terms
  • Contact: name+email side-by-side, message full-width
  • Thank You: firstName+lastName, email+phone side-by-side
  • Address: city+state side-by-side, street and zip full-width
  • File Upload: name+email side-by-side

New Multi-Page Wizard Example

  • Classic 3-step registration wizard (Personal Info → Contact → Preferences)
  • Column layouts in each step
  • Dedicated bento card and JSON code block

Updated JSON Code Blocks

  • Kitchen Sink, Contact, Thank You snippets updated to show column-based schemas

Testing

Unit Tests

  • All unit tests passing (1266 tests)

E2E Tests

  • All E2E tests passing (template-only change, no new E2E needed)
  • Deployed to preview and manually verified:
    • Column layouts render side-by-side on all forms
    • Wizard step tabs styled with proper pagination
    • Mobile responsive stacking works
    • All forms still function (inputs, validation, submit)

Screenshots/Videos

Checklist

  • Code follows project conventions
  • Tests added/updated and passing
  • Type checking passes
  • No console errors or warnings
  • Documentation updated (if needed)

…ard styling

Replace sidebar navigation with a bento card grid landing page. Add Form.io
CSS and Bootstrap grid restoration so column layouts render side-by-side.
Add wizard step tab styling (pagination) for proper multi-step navigation.
Include a classic multi-page registration wizard alongside the venue booking
wizard. Update Kitchen Sink, Contact, Thank You, Address, and File Upload
forms with column-based field layouts.
@mmcintosh mmcintosh closed this Feb 24, 2026
@mmcintosh mmcintosh deleted the feat/forms-examples-polish branch February 24, 2026 05:54
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.

1 participant