Skip to content

Progressbar in Svelte version does not show progress value #4183

@space-nuko

Description

@space-nuko

Describe the bug

The Progressbar component in the Svelte version doesn't update correctly. This is because the style applied to the element has an incorrect syntax

$: transformStyle = {
transform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : '',
WebkitTransform: progress ? `translate3d(${-100 + progress}%, 0, 0)` : '',
};

<span style={transformStyle} />

The style prop passed to the span has to be a string, not a JavaScript object

To Reproduce

Steps to reproduce the behavior:

  1. Instantiate Progressbar
  2. Set progress to a number

Expected behavior

Bar should display progress value

Actual Behavior

There is no progress update. In the devtools the style has become [object Object]

<span class="progressbar" data-progress="20"><span style="[object Object]"></span></span>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions