Skip to content

docs: improve form layout documentation - #6112

Draft
vursen wants to merge 31 commits into
mainfrom
form-layout-labels-aside-fields
Draft

vursen wants to merge 31 commits into
mainfrom
form-layout-labels-aside-fields

Conversation

@vursen

@vursen vursen commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

Updates the Label Position section of auto-responsive mode for vaadin/web-components#12601: the examples now place fields directly in the layout instead of wrapping them into Form Items, and the text explains that Vaadin fields move their labels aside on their own while non-field components can still be wrapped in a Form Item for alignment.

Also applies the rest of the Form Layout doc changes for 25.4: replaces the feature flag notes with a recommendation to use auto-responsive mode ahead of Vaadin 26, adds a Form Rows illustration and a Column Span subsection to the auto-responsive section, reworks the Form Item Usage section, and renames the AI Form Filler heading.

Part of vaadin/platform#2631

@vursen
vursen force-pushed the form-layout-labels-aside-fields branch 8 times, most recently from 9b3dd19 to bb11c46 Compare September 21, 2026 15:45
@github-actions

github-actions Bot commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

Preview Deployment

This PR has been deployed for preview.

URL: https://docs-preview-pr-6112.fly.dev

Changed pages

Added content is highlighted in green; removed content is marked in red on each page.

Built from 2f8254b

Comment thread articles/components/form-layout/index.adoc Outdated
@vursen
vursen force-pushed the form-layout-labels-aside-fields branch from 39ba46f to 0e9ffef Compare September 23, 2026 12:08
@vursen
vursen changed the base branch from main to docs/form-layout-side-label-styling September 23, 2026 12:08
@vursen
vursen added this pull request to stack #6158 September 23, 2026 12:09
Base automatically changed from docs/form-layout-side-label-styling to main September 23, 2026 12:33
@vursen
vursen force-pushed the form-layout-labels-aside-fields branch 2 times, most recently from 854a876 to 1b74c9a Compare September 24, 2026 11:47
@vursen
vursen requested a review from rolfsmeds September 24, 2026 11:52
vursen and others added 10 commits September 25, 2026 10:45
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Replace the feature flag notes with a recommendation to use auto-responsive
mode ahead of Vaadin 26, add a Form Rows illustration, add a Column Span
subsection under auto-responsive mode, and rename the AI Form Filler heading.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@vursen
vursen force-pushed the form-layout-labels-aside-fields branch from 1b74c9a to 18148fd Compare September 25, 2026 06:45
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
vursen and others added 16 commits September 25, 2026 14:23
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
rolfsmeds
rolfsmeds previously approved these changes Sep 25, 2026

@rolfsmeds rolfsmeds left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved, assuming this was just the first part of changes, right?

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@vursen vursen changed the title docs: apply labels aside to fields placed directly in form layout docs: improve form layout article Sep 25, 2026
@vursen
vursen removed this pull request from stack #6158 September 25, 2026 11:49
@vursen
vursen dismissed rolfsmeds’s stale review September 25, 2026 11:50

PR was updated

@vursen

vursen commented Sep 25, 2026

Copy link
Copy Markdown
Contributor Author

@rolfsmeds I've just updated the PR to include all the changes instead.

@vursen vursen changed the title docs: improve form layout article docs: improve form layout documentation Sep 25, 2026
…eft-aligned

The docs site centers every block image with flex on its content wrapper
and ignores the align attribute, so a standalone inline image is used instead.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

@rolfsmeds rolfsmeds left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the 2nd Column Span section level is wrong, otherwise LGTM

Comment thread articles/components/form-layout/index.adoc Outdated
Co-authored-by: Rolf Smeds <rolf@vaadin.com>
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