Implement scalable component library

[pinussilvestrus]

What should we do?

• [ ] As a form designer, I expect the most commonly used components to appear at the top, so I don't need to scroll to use them.
• [ ] I want to search for components by name.
• [ ] I want to browse all available components.
• [ ] I expect components to be categorized by use case (such as "Basic Input", "Selection", "Presentation", "Action"...).
• [ ] (Stretch) I want to browse and add components to the end of the form using my keyboard.
• [ ] (Stretch) I want to have different UI break points (screen size, playground mode)
• [ ] Integrate into form-playground

Why should we do it?

We want to help form designers build forms in less time by providing component library that allows to easily discover, browse, and use form components, as well as to understand what these components are used for.

• Check out the product hub epic to gather more rationale.
• Competitor analysis
• Mockups
• Kick off Miro board

Related to https://github.com/camunda/product-hub/issues/728

[pinussilvestrus]

(small) Kickoff is scheduled for Thursday (19th Jan).

[pinussilvestrus]

Kickoff results - 19th January

Link to the board: https://miro.com/app/board/uXjVPx8pfPU=/

Decisions

• We label the header as "Components"
• Order and groups: we start under assumptions and gather feedback
• We experiment with breaking points for the layout (screen width and mode in playground)
• We start simple by only search for name
• We collect open research questions in the epic and gather feedback
• We do not have a "Advanced" group for now
• We move button under "Action"

Action items

• @pinussilvestrus to collect open research questions in the product hub epic
• @pinussilvestrus to take the keyboard support topic and experiment with that on top
• @RomanKostka to deliver latest mockups => https://www.figma.com/file/CiTSN1vNETjIAy6W9jUIFp/Form-Editor?node-id=723%3A43296&t=T4tVSiG5XZRNoZJa-0

[pinussilvestrus]

Early feedback

I created a first demo of the updated palette integrated in form-playground. I did not include any breakpoints, yet. I also updated the titles to not use uppercase and match the design as proposed by @RomanKostka (cf. https://github.com/camunda/product-hub/issues/728#issuecomment-1396579623).

https://49-updated-palette--camunda-form-playground.netlify.app/

Feel free to have an early look and give feedback 👍

[pinussilvestrus]

One thing I search for feedback on, in particular, is the drag interaction of the field options. I left the hover effect, which feels like a button, which is misleading, especially as long we do not support click-to-create in forms.

Adding a cursor would be something, but we do not use different cursors in other places so far.

[pinussilvestrus]

Feedback from @christian-konrad via Slack

Some notes:

• The search input looks different from the inputs in the properties panel (e.g. border color is darker)
• The search icon is not vertically centered and potentially too dark/flashy
• No empty state yet
• A clear button on the search field would be cool
• The dark hover animation feels odd. What about a “float” animation (shadow/zoom?)
• With this size, we limit component names to 10 chars (don’t know if that will be an issue)
• The chevrons are not vertically centered anymore

[pinussilvestrus]

Found another quirk: The panel header is not sticky anymore.

[pinussilvestrus]

[fyi] I played a bit with keyboard support for the new component library. Although I like the look&feel already a lot, I believe we need to invest in the overall editor keyboard story (cf. https://github.com/bpmn-io/form-js/issues/173), so everything plays nicely together. Only fixing it for the sidebar won't do the trick.