Progress Bar - use width instead of scaleX to allow rounded progress bar

Open Beginner friendly
#29,607 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start in core/src/components/progress-bar/progress-bar.tsx at the linked line around 102 and inspect how the progress element is rendered. Verify that changing the progress sizing to width preserves rounded tips without distorting the border radius, and confirm the component still displays the expected progress range.

Written by the indexing model from the issue text.

Description

package: core type: feature request

https://github.com/ionic-team/ionic-framework/blob/e1c0f457966ab79c7a8774ec9bd0b34458067305/core/src/components/progress-bar/progress-bar.tsx#L102

The scaleX() also scales border-radius. If you use border radius on the top-left and bottom-right to make a round tip to the progress bar, it distorts across the width of the progress bar.

Changing to:

<div part="progress" class="progress" style={{ width: `calc(100% * ${finalValue})` }}></div>,

would scale it similarly without scaling the border-radius

Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
2d 20h
Merged PRs (30d)
35

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ionic-team/ionic-framework

All issues in ionic-team/ionic-framework

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.