Update FEEL toggle

[pinussilvestrus]

Closes #240
Closes #194

Demo (with form-js): https://demo-updated-feel-toggle--camunda-form-playground.netlify.app/

Notes for the reviewer

• I added an inline option to the toggle switch to be able to align non feel and feel toggle switches
• I added some missing focus styles for the toggle switch
• The different variants are testable via following properties
  • FEEL required: Condition => Hide if
  • FEEL optional: Image => Source
  • FEEL checkbox: Disabled
  • FEEL toggle switch: Readonly
• This is only a visual demo, the FEEL expressions won't work for disabled and readonly, yet. Also, disabled will be a toggle switch in the future.
• In comparison to the styles, the properties panel core uses their color palette. In the demo/form-js, I already adjusted to the themable styles.

Let me know what you think 💌

[christian-konrad]

Awesome!

The shade of blue is a little hard to differentiate from the non-active state, however, it is clearly indicated by the "=" in the field below, so i don't know if is requires a higher contrast to be easy to understand + accessible. @pinussilvestrus @RomanKostka wdyt?

[RomanKostka]

Awesome!

The shade of blue is a little hard to differentiate from the non-active state, however, it is clearly indicated by the "=" in the field below, so i don't know if is requires a higher contrast to be easy to understand + accessible. @pinussilvestrus @RomanKostka wdyt?

i reworked the icons a bit.

https://www.figma.com/file/CiTSN1vNETjIAy6W9jUIFp/Form-Editor?node-id=1087%3A150456&t=2UvcfDjfFfoNEIVl-1

[pinussilvestrus]

This is ready for review now. I added reviewers from both teams ⚔️

[RomanKostka]

first impression looks great - although the mandatory state and the standard (not enabled) state looks pretty similar.

@pinussilvestrus one thing i am wondering: is it possible to have larger tooltips which open much faster than the system tooltips?

current ones:
show up after 3s

optimal ones:
show up after 0.5s

[pinussilvestrus]

one thing i am wondering: is it possible to have larger tooltips which open much faster than the system tooltips?

This is part of #202. We would have to handle this separately, but without, I think there is no other way than using the browser defaults.

[christian-konrad]

@RomanKostka on your reworked design, on gray background the toggleable fx's (non-mandatory) are not separable from those on white background.
When users start with BPMN, they will be used to the button-ish look of toggleable fx's on the BPMN properties panel, and probably they will not identify those in the form editor as toggleable. Not sure if this is really an issue.

[christian-konrad]

@RomanKostka @pinussilvestrus since we discussed tooltips so often, I think it's time to move this epic into the PDP

• https://github.com/camunda/product-hub/issues/893

[nikku]

@christian-konrad If you want to link camunda/camunda-modeler#3611 discussing tooltips, that would be great :).

Update: You already did! 🎉

[RomanKostka]

@christian-konrad

@RomanKostka on your reworked design, on gray background the toggleable fx's (non-mandatory) are not separable from those on white background.
When users start with BPMN, they will be used to the button-ish look of toggleable fx's on the BPMN properties panel, and probably they will not identify those in the form editor as toggleable. Not sure if this is really an issue.

This is indeed not perfect but from my point of view not an issue.
I explored several solutions to solve this issue but each of it came with different trade-offs.
I would propose to go with this one and check if it is a problem via tracking after some time (if noone clicks the fx-toggle it would be an indicator that it is not identified as an interactive element).

When we head into the carbonization of the modeler we anyhow need to revisit the properties panel and decide if the background-colors of modelers & form-editors properties panel should have the same color or not.

[vsgoulart]

Code-wise everything looks good 👍

[pinussilvestrus]

@bpmn-io/modeling-dev so far I received no feedback from you regarding this PR. Feel free to give it a try until tomorrow evening, I'd merge this one otherwise as it's blocking other topics on our side (bpmn-io/form-js#658, bpmn-io/form-js#656, and others which are WIP).

Thank you ❤️

[nikku]

I like it a lot, UX wise. Implementation looks solid, too. Thank you! :)

[nikku]

@pinussilvestrus You want to go ahead and release this?

[pinussilvestrus]

Released via 2.1.0. Thanks a lot for the review :)