Skip to content

feat: add label text-align property to field base styles - #12723

Draft
vursen wants to merge 4 commits into
mainfrom
feat/label-aside-text-align
Draft

feat: add label text-align property to field base styles#12723
vursen wants to merge 4 commits into
mainfrom
feat/label-aside-text-align

Conversation

@vursen

@vursen vursen commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Description

Follow-up to #12590

  • Added --vaadin-input-field-label-text-align to the shared field styles. It sets text-align on the label part and falls back to inherit, so the default look is unchanged.
    • In the label-aside variant it only has a visible effect when --vaadin-input-field-label-aside-width is wider than the label text, since the label column is sized to the label by default.
  • Reset text-align on checkbox, radio button and switch labels so the property does not move their label away from the control.
  • Listed the property in the JSDoc of every field component.
  • Added a custom label text align visual test to field-base.test.js for the label-aside variant with a wrapping label, in LTR and RTL.

Type of change

  • Feature

vursen and others added 3 commits September 10, 2026 16:25
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>
@vursen vursen changed the title feat: add label-aside text-align property to field base styles feat: add label text-align property to field base styles Sep 10, 2026
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

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