Implement stable OnyxFormElement layout

[JoCa96]

Why?

Currently, there is a layout shift happening when a FormElement switches from no message to any (error, info, normal) message.

There is a discussion ongoing if space for the message should be reserved for displaying a message (in particular an error message) or if additional whitespace should be avoided.

Reserving space:

• visual stability
• better accessibility
• consistent layout

Dynamic height:

• cleaner initial layout
• uses less space
• more UX freedom

As with the label and its hideLabel property, there should be an equivalent hideMessage property.
We can consider adding an extra property to toggle a slim/inline/no-label-and-message/only-textbox-mode.

Therefore, we will reserve the space by default. Only when explicitly hidden, the space is removed.

Design

Figma

Acceptance criteria

• FormElement

Implementation details

Reference implementations

Applicable ARIA Pattern

Definition of Done

• The following component requirements are implemented:

  • skeleton
  • density
  • example usage added to apps/demo-app/src/views/HomeView.vue

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval

Storybook Documentation - [ ] Checked and approved by designer - [ ] Checked and approved by dev