States and behaviour for progress bars embedded in tables
These days it is not uncommon for data tables to contain more complex UI elements (i.e. not just data), with things like pills (or tags), call-to-action buttons, icons, and even graphs & charts (e.g. sparklines) to be embedded.
However, I haven't actually seen the specific behaviour for these embedded UI elements specified in the context of an child element in a table cell.
So the question is, what happens to a progress bar (and other UI elements) when the table row cycles through different states (e.g. hover-over, active, selected, etc.) and how does the styling and behaviour change compared to when they are outside of a table? I believe that this can be problematic due to the fact that progress bars require a contrast in the colours used to express the completed and incomplete sections, which is exacerbated by the fact that many tables also implement zebra striping and mouse interaction behaviours (e.g. hover-over).
A specific example of this is to consider what happens to a table cell containing a progress bar (which is actually not an uncommon thing to see) if it is selected. Should it be:
- Unchanged (even though there might be some contrast issues with the table cell's selected state).
- Modified by making changes to the colour or styling
- A custom rule to the behaviour of the table to accommodate the interaction
If you can include any screenshots of actual examples of applications (rather than CodePen or design concepts) that would be very useful for illustrating the answer.