n8design/htwoo

Not sure how to use hoo-progress

Opened this issue · 3 comments

gabbsmo commented

Describe the bug
I looked at the example in Pattern Lab and could not figure out how to make the progress bar dynamic. The animation seem to be hardcoded.

Expected behavior
What I ended up doing was replacing the animation with a transition on the width style property, like in Fluent React.

/*
 * Transistion from Fluent React
 * MIT license: https://github.com/microsoft/fluentui/blob/master/packages/react/LICENSE
 */
.hoo-progress-indicator {
    animation-name: none;
    transition: width 0.15s linear 0s;
}

<div class="hoo-progress-indicator" style="width: {{ progress }}%;"></div>
StfBauer commented

The way it is meant to be is that you simple has a base indicator that something is loading, while the CSS class name is progress. It's more like a loading animation, like your spinner.

Happy have a real progress stuff in there as well but then I would rather to it with css variables.

gabbsmo commented

I am not very familiar with CSS variables. I understand that you can make them local, per selector. But that would not work in the case that you have multiple progress bars, with different progress state. Is there a way to have CSS variables scoped per element?

juliemturner commented

Sure it would. CSS variables are scoped to the element (and children) they are applied to... https://julieturner.net/post/using-css-variables/

If Stefan builds this type of progress bar, then in the corresponding react component I'd probably build properties to take in progress and apply them to the root element with a css variable. Every instance of the component could/would have a different status based on whatever the parent tells each individual component.

  • 👍1