Describo tabs should show indicator when required fields not filled in

[marcolarosa]

From @beepsoft

On each tab, there may be required fields that do not have metadata. The tab heading should show an indicator to the user that that tab needs the user to add metadata.

The indicator should be a red dot similar to what is shown on the field when it's not filled in.

[marcolarosa]

This comment also pertains to #64.

@beepsoft What do you think?

1. Required data is missing - red X next to tab name

2. All required data provided and the tab has some data on it - green tick. Notice the other tabs have neither an X nor a tick?

3. Second tab doesn't have required fields but at least one field has data - green tick.

[marcolarosa]

@beepsoft checkout branch https://github.com/describo/crate-builder-component/tree/issue-63_64 to see these changes.

Also note that you can override the styles of the tab labels as well. Have a look at https://github.com/describo/crate-builder-component/blob/issue-63_64/src/app/main.js and uncomment line 5. The override styles are in there. I've just added this because i noticed your comment in the react comment about css customisation. We can add more hooks throughout the component to make it more themable.

[beepsoft]

Regarding the red and green icons, perhaps something more subtle would be preferable, so it's less obtrusive. I liked the little dot in the required fields. Could we use similar icons (filled circles) in red and green maybe?

Thanks for the CSS override tip! I was also thinking that it might be worthwhile to add semantic class names to each field so they can be more easily targeted with CSS.

Something like this:

<!-- render the entity properties in this tab definition -->
<div v-for="input of tab.inputs" :class="'describo-property '+'describo-property-'+input.name">
...
<div/>

It would result in a HTML like this:

There maybe other places where we could add such semantic classes for future CSS customizations.

[marcolarosa]

Regarding the red and green icons, perhaps something more subtle would be preferable, so it's less obtrusive. I liked the little dot in the required fields. Could we use similar icons (filled circles) in red and green maybe?

I used el-badge initially the as I did with required properties (https://github.com/describo/crate-builder-component/blob/master/src/crate-builder/RenderEntity/RenderEntityProperty.component.vue#L11) but it's visually difficult to see the difference when it changes because it's so small from red to green. On the required property it's less of a problem because the property name is red or it goes to black.

And then there's the issue for color blind users. Red/green are bad colours. Having an icon mitigates that. Hence why I chose it.

Thanks for the CSS override tip! I was also thinking that it might be worthwhile to add semantic class names to each field so they can be more easily targeted with CSS.

Something like this:

<!-- render the entity properties in this tab definition -->
<div v-for="input of tab.inputs" :class="'describo-property '+'describo-property-'+input.name">
...
<div/>

It would result in a HTML like this:

There maybe other places where we could add such semantic classes for future CSS customizations.

Absolutely. I have to ask - do you have a need to have property level classes or is this a "wouldn't it be good if idea?". If you need it, then let's add it now. If it's the latter, then I would prefer a direct use case first.

[marcolarosa]

a1caf1d4cc57aeff0b6e68e3c23448a1bd5a731e

This does not include the CSS discussed above so keeping this ticket open for now.

[marcolarosa]

Done - and extra styling added via other work by @beepsoft