Prepare vaadin-progress alpha for ux/dx

[tomivirkki]

• [x] Align with skeleton
• [x] Drop theming demo
• [x] Drop Circle and demo from the alpha
  • This will be revisited in https://github.com/vaadin/vaadin-progress-bar/issues/7
• [x] Add Themable mixin and parts
• [x] Document parts and state attributes (if any)
• [x] Drop css custom properties
• [x] Separate default styles and -theme
  • The default look is very opinionated with animations and all, default theme should be minimalistic
• [x] The properties shouldn’t reflect to attributes
• [x] Accessibility
• [x] Test coverage ok?
• [x] IE11 support
• [x] Set the --vaadin-progress-value
• [x] See that the MVP requirements are met
• [x] Allow min/max to be set in any order (don't throw errors)
  • No need to sanitize min/max values, value should be normalized to 1 if max <= min

Other notes:

• Shouldn’t the foreground element be inside background element (to make theming easier)?
  • Further, is the background element needed at all (isn’t host enough)
• Indeterminate could be implemented as a theme variant?

[jouni]

Indeterminate could be implemented as a theme variant?

Yes, I think so.

Shouldn’t the foreground element be inside background element (to make theming easier)?

I don’t see a reason not to have them nested. Can’t remember the reason why I chose otherwise in my prototype.

Further, is the background element needed at all (isn’t host enough)

I would keep the background element as an explicit part as well. It gives us more freedom in the future to adjust the internal DOM, when we add new features (such as custom text content inside the bar or circle).

[jouni]

One more good feature to add (easy to add): set the --vaadin-progress-value custom property whenever the value changes (using this.updateStyles(...) to make it work with the shim). The normalized value should be used for this as well.

The theme should use that, instead of the element setting the inline transform explicitly: https://github.com/vaadin/vaadin-progress-bar/blob/master/vaadin-progress-bar.html#L59

[tonygoldcrest]

@tomivirkki, need clarification of 1) Align with skeleton 2) Accessibility 3) Test coverage ok? 4) IE11 support (visual tests seems to be passing)

Please, give more information of what exactly should I do to resolve these items

[jouni]

Looking nice already. I’m now thinking about the themable parts, and foreground and background don’t seem like the best names. Maybe value for the foreground and bar for the background, similarly to what Chrome uses for the native <progress> element?

[tonygoldcrest]

I've tried the element in different screen readers. For Windows narrator it needs tabindex. Without it I can't select element on the page. Once it has tabindex then the announcement is very good.