Lion Button

[jorenbroekema]

Disclaimer: Buttons are tough. Don't fall in the trap of "how hard can it be to build a custom button?". It's to be expected that this is gonna be a struggle one way or another.

Current situation

LionButton:

• A web component
• Click area is a div (a real DOM element)
• Has implicit form submission through temporarily spawning a native <button> on submit handlers (e.g. enter key). This is where most of the fuzzy logic exists
• Mimics the native button through its click and key handlers

This is easy to extend, especially for those who want to create a more complex button that requires it (or is more practical) to be a webcomponent.

The negative part is that it's a bit heavy, since it has a lot of logic for the implicit form submission, handlers to make it behave like a button, and a click area div.

The alternative is using a native <button> which is lighter. The click-area can be done through CSS only. See @jorgecasar PR: #1019 as well as a POC by @erikkroes (maybe he can link his codepen here). Since a button accepts HTML content inside, it should cover having rich content inside as well, although the styling of that content will not be encapsulated, as <button> does not have a shadow root.

Points to get an agreement on:

• ❌ We should make implicit form submission opt-in. Most of the heaviness and fuzziness in LionButton is this part, and most design systems do not require this. This means extracting it out of LionButton and making it an extension of it (LionButtonImplicitSubmit ?). Only 10 lines of code, so no point to extract
• We should refactor our usages of <lion-button> to <button> inside lion, wherever we can practically get away with it. Examples: lion-switch-button, lion-select-rich-invoker. POC ❌ Depends, only if it really makes it easier and not harder
• ❌ We should recommend using <button> as the defacto standard over <lion-button> and document in which cases using the webcomponent actually makes sense.
• We should make the click-area a CSS only solution inside LionButton as well as export it as a functional style component so it can be reused even for native <button>. POC ✅