owncloud
Streamline props and events for all form components
It would be nice to have a consistent api for showing label and description-message for all form related components:
| Component | label | description-message | defaultValue | clearable | @change | Notes |
|---|---|---|---|---|---|---|
| OcTextInput | ✔️ | ✔️ | ❌ (#1636) / ✔️ (placeholder) |
❌ / ✔️(clearButtonEnabled) |
✔️ | placeholder is discouraged |
| OcCheckbox | ✔️ | ❌ | ❌ (#1635) | ❌ (#1635) | ❌ (#1635) | |
| OcSelect | ✔️ (#1570, owncloud/owncloud-design-system#1633) | ❌ | ❌ (#1634) | ✔️ (❌ for multiple:true) | ❌ (#1634) | 💥 vue-select already has a prop called label possibly related https://github.com/owncloud/owncloud-design-system/issues/1289 -> https://github.com/owncloud/owncloud-design-system/pull/1301 |
| OcTextArea | ✔️ | ✔️ | ❌ / ✔️ (placeholder) | ❌ | ✔️ (https://github.com/owncloud/owncloud-design-system/issues/1544) | placeholder is discouraged |
| ~OcAutocomplete~ | ✔️ | ✔️ | ❌ | ❌ | ❓ | deprecated component |
| OcDatepicker | ✔️ | ✔️ | ❌ | ❌ | ❌ | |
| OcSwitch | ✔️/ ❌ | ❌ | ❌ | ❌ | ✔️ | label is only used for aria-label but not visible |
| OcRadio | ✔️ | ❌ | ❌ | ❌ | ❌ | does a description message make sense here? maybe not because OcRadio is only one option and not a whole form element |
While at it, it could be nice to have a common css class for all labels/description so it's easier to style all at the same time. Maybe labels could be a component that can be used for attaching them to other form elements, e.g. file input elements that have no component in ODS.
edit:
I've added the change event and clearable prop (the latter is only supported by oc-select). It could be nice to have a way to clear values, that way we could even differentiate between empty strings and null for strings e.g.
When no value is set, displaying a default value (placeholder for text-input and text-area) could also be great. It needs to be visually obvious that something is not defined by a user but a not-overridden default value.
Personally I would consider label, description-message and @change to be comparatively high-priority, clearable and placeholder could be nice but certainly have a set of problems with them, so they should be discussed by people with more ux knowledge than me ;-)
edit:
I've added defaultValue now that placeholder usage is apparently discouraged. placeholder being a bad solution, doesn't invalidate the problem it tries to solve: show a default value. As a consumer of ODS, I should not care about how things are displayed, I just need a consistent API and rely on ODS to display it in a consistent way using up to date usability standards.
Additionally I would argue it would make sense to make the clear action emit input and change events with null values.
That way clearing can be differentiated from entering empty values.
The clear button on OcTextInput currently emits an empty string via input and doesn't emit change at all.