refactor!: baseline alignment #10320

jouni · 2025-10-14T07:00:02Z

Change all field components to use CSS grid layout on the host.
Make the internal .vaadin-*-container elements irrelevant with display: contents.
Use a pseudo element to set the baseline alignment of fields, while keeping support for multiline labels.

This change removes the ability to globally set "helper-above-field" variant on all fields with the --vaadin-input-field-helper-order property. Might still be possible with the new custom properties, but might require two properties instead of one.

Before

After

knoobie · 2025-10-14T09:57:15Z

packages/field-base/src/styles/field-base-styles.js

+    --_has-helper: ;
+    --_no-error: initial;
+    --_has-error: ;
+    display: inline-grid;


General question: would this also help to get us common features like "help-icon" next to the label or field? It's a pretty common UX pattern seen where people want to place an (i) icon on the right side of the label or on the right side of the field which people could click or hover to get more informations.

I suppose it might, as the label isn't restricted to one line and truncated with an ellipsis, so it should be easier to render custom content in the label slot. But I don't know how feasible that is in general, regarding accessibility.

Yeah.. I'm also talking more about a slot next to the label.. ;) I don't think it would be a good fit within the label

Right. I don't see why that couldn't be a similar thing as the required indicator, sitting inside the part=label element.

packages/custom-field/src/styles/vaadin-custom-field-base-styles.js

packages/custom-field/test/visual/base/screenshots/custom-field/baseline/default.png

packages/date-time-picker/src/vaadin-date-time-picker.js

jouni · 2025-11-04T14:50:29Z

packages/field-base/src/styles/field-base-styles.js

+    grid-template-rows:
+      var(--_helper-below-field, var(--_has-label, auto 0) 1fr var(--_has-helper, auto) var(--_has-error, auto))
+      var(
+        --_helper-above-field,
+        var(--_has-label, auto) var(--_has-helper, auto) var(--_has-label, 0) 1fr var(--_has-error, auto)
+      );


As discussed in the daily, we might try to use grid-template-areas instead, see if that makes the code easier to understand.

Another thing we discussed is to use margins instead of gap for the space between the parts. Then we wouldn't need to worry about empty grid cells creating unnecessary gaps, and could reduce the "logic" with the internal custom properties.

Update to use both. I suppose the code is slightly more readable.

web-padawan · 2025-11-05T11:10:08Z

Rebased the PR after merging #10441 where input-fields part was added to date-time-picker.

jouni · 2025-11-07T07:32:40Z

Damn, I broke the alignment in Safari and Firefox when fields don't have a label.

web-padawan · 2025-11-10T09:58:39Z

packages/field-base/src/styles/field-base-styles.js

    color: var(--vaadin-input-field-error-color, var(--vaadin-text-color));
    display: flex;
-    gap: var(--vaadin-gap-s);
+    gap: var(--vaadin-gap-xs);


Extracted this into #10462 along with relevant screenshot updates, to make this PR focused on alignment.

The container element is no longer meaningful.

This reverts commit c66b4b8.

This reverts commit f9a56e6.

sonarqubecloud · 2025-11-10T11:21:09Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

jouni force-pushed the refactor/baseline-alignment branch from 8e954af to d0f6061 Compare October 14, 2025 07:40

knoobie reviewed Oct 14, 2025

View reviewed changes

jouni marked this pull request as ready for review October 15, 2025 08:41

This was referenced Nov 3, 2025

fix: move tooltip slot to field container #10410

Merged

Base styles fixes and enhancements #10417

Open

web-padawan reviewed Nov 4, 2025

View reviewed changes

jouni commented Nov 4, 2025

View reviewed changes

web-padawan mentioned this pull request Nov 5, 2025

feat: add input-fields stylable part to date-time-picker #10441

Merged

web-padawan force-pushed the refactor/baseline-alignment branch from 8103e1d to 5bebcad Compare November 5, 2025 11:09

jouni marked this pull request as draft November 7, 2025 07:32

jouni marked this pull request as ready for review November 7, 2025 07:47

web-padawan mentioned this pull request Nov 10, 2025

refactor: reduce error message gap in base styles #10462

Merged

web-padawan reviewed Nov 10, 2025

View reviewed changes

jouni added 15 commits November 10, 2025 12:43

refactor!: field baseline alignment

d545f9f

test: fix text-area unit tests

e42ee24

The container element is no longer meaningful.

fix: contain baseline alignment pseudo within the host

7496a42

fix: avoid announcing alignment pseudo text content

da77561

Revert "fix: contain baseline alignment pseudo within the host"

f34712e

This reverts commit c66b4b8.

fix: align button on baseline (default)

5104e8f

chore: add button and icons in baseline alignment dev page

be0ef82

rework grid-rows

1798973

more comprehensive test page

cc50e8b

test: update checkbox-group base screenshots

3d0e871

test: update custom-field base screenshots

b7cb998

test: update radio-group base screenshots

988ff3a

spicy up dev/test page

1957ea9

fix: align horizontal group fields with text inputs when label is used

ce155aa

chore: avoid sonarcloud warning

f67ccb4

jouni and others added 21 commits November 10, 2025 12:43

refactor: use grid-template-areas and margins

fedad72

update checkbox screenshots

6f43efd

update radio-group screenshots

5a6edd0

update combo-box screenshots

774c31b

update custom-field screenshots

641ccab

update date-picker screenshots

bb42f17

update date-time-picker screenshots

26ba59b

update number-field screenshots

00df4f4

update text-area screenshots

fa0a5e9

update text-field screenshots

630b70a

update time-picker screenshots

3a88094

remove empty custom-field style declaration

19c6b6e

chore: update stylelint config

447da9f

Revert "chore: update stylelint config"

e59c22f

This reverts commit f9a56e6.

fix alignment for fields without label

6955955

update select screenshots

e54b319

fix lint error

5e46c66

update custom-field screenshots

07d75f1

update checkbox-group screenshots

19201e6

update radio-group screenshots

40f9b80

chore: format dev page

3cc48fd

web-padawan force-pushed the refactor/baseline-alignment branch from 681bcca to 3cc48fd Compare November 10, 2025 10:43

refactor: remove not needed files for custom-field base styles

a72f317

web-padawan approved these changes Nov 10, 2025

View reviewed changes

web-padawan merged commit 128837a into main Nov 10, 2025
11 of 12 checks passed

web-padawan deleted the refactor/baseline-alignment branch November 10, 2025 11:52

refactor!: baseline alignment #10320

refactor!: baseline alignment #10320

Conversation

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

Uh oh!

Before

After

Uh oh!

knoobie Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

jouni Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

knoobie Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jouni Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

jouni Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

jouni Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

web-padawan commented Nov 5, 2025

Uh oh!

jouni commented Nov 7, 2025

Uh oh!

web-padawan Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Nov 10, 2025

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jouni commented Oct 14, 2025 •

edited

Loading

jouni Oct 14, 2025 •

edited

Loading