Implement OnyxListbox

[mj-hof]

Why?

The flyout is a fundamental element utilized across various components such as dropdowns, navigation bars, paginations, tables, etc. It provides the users with the ability to open a small modal window, facilitating single or multisselection based on the context in which it is employed.

Design

Figma link

Acceptance criteria

• [x] single select flyout can be shown
• [x] keyboard interaction is supported as described in the ARIA pattern
• [x] an optional label can be shown at the bottom
• [x] at max. 8 options are shown without scrolling (can be changed with a property)

Out of scope

• 732

• 733

• 734

• 742

• 743

• 745

Definition of Done

• [x] example usage added to alpha-test-app
• [x] covered by component tests
• [x] screenshot tests are updated
• [x] follow-up tickets were created if necessary
• [x] updated version + documentation is deployed
• [x] Storybook can show the feature
• [x] Set task to In Approval

Review

• Storybook link
• [x] approved by designer @jannick-ux
• [x] approved by dev @JoCa96

Applicable ARIA Pattern

Listbox pattern

[larsrickert]

FYI, I removed multiselect, truncation and grouping in follow up tickets so I can close this before my vacation and another dev can continue working on it

[jannick-ux]

By default, the label should be hidden. Rest looks fine.

[larsrickert]

By default, the label should be hidden.

To be unify with the other components like input, checkbox, radio button and switch I would prefer to show it by default with a property to hide it. The label is required anyways for screen readers

[jannick-ux]

This label, that is used here, is not that kind of label, that has an important role to describe the purpose of the whole component. In the end this label here is just ment to give the possibility to write something like "items only referr to the date xx.xx.xxxx". So it is just a flexible hinttext/labeltext without any dependecy or importance to the whole component.

That's the reason why I would like to hide it in first place.

Was the description of the purpose understandable?