OcCheckbox: add support for showing default values and clear buttons

[dschmidt]

Description

This PR adds support for showing default values and a clear button to OcCheckbox.

It's not beautiful (visually) by any means and the same UX problems as for owncloud/owncloud-design-system#1634 apply here too.

Needs UX concept by @kulmann and @tbsbdr

Related Issue

• owncloud/owncloud-design-system#1634
• Fixes 3 :x: from owncloud/web#8857 (@change, clearButtonEnabled and defaultValue)

Motivation and Context

See owncloud/owncloud-design-system#1634

How Has This Been Tested?

Screenshots (if appropriate):

Nothing selected by user Clicked once to switch value: Clicked twice to explicitly set value:

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Technical debt
• [ ] Tests

Checklist:

• [x] Code changes
• [ ] Unit tests added
• [ ] Acceptance tests added
• [x] Documentation added/updated

Open tasks:

• [ ] ...

[update-docs[bot]]

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

[tbsbdr]

Hey, this is admittedly a hard one from a ux perspective, and I agree - the reset-x for a checkbox might feel odd.

Requirements as I understood them:

1. Reset Option: Provide an option to reset to the default
2. Show if Default: Show at a glance if the default is currently selected or not

I'm not aware of a common pattern, that meets both requirements for checkboxes. But maybe this ideas might help:

Use OcSelect

Just don't use checkboxes at all for this usecase. Utilise your OcSelect instead like this:

Use text-button

As it might not be 100% expectable what the reset-x will do, a textbutton might make the action more predictable.

But: Ideas 3-5 don't meet the 2nd requirement "Show if Default". In VSCode Settings, they tried to highlight changed options with the blue vertical line, which is okay but not the best understandable solution, as you need to learn what the color means.

Highlight changes with color: