feat(progress-bar): add styling for the ionic theme

[OS-pedrolourenco]

Issue number: internal

---

What is the current behavior?

ion-progress-bar does not currently have any custom styling for the ionic theme.

What is the new behavior?

According to the design, the following styling changes were made:

• Added a new shape prop which controls the shape of the progress bar
• Changed the color of the unfilled part of the progress bar and the bar height to design token values
• Adding a new testing page and screenshot tests

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2025 1:20pm

[thetaPC]

As mentioned in other PRs, code needs to be reviewed after being copying and pasting and updated appropriately.

[thetaPC]

Also we need to have a snapshot for basic. Make sure to update progress-bar/test/basic/progress-bar.e2e.ts to include ionic-md

- configs().forEach(({ title, screenshot, config }) => {
+ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {

[thetaPC]

Delete the shape snapshots and re-generate them. Playwright isn't able to detect the background change to buffer. That's why we need to force a re-generation. Background shouldn't be white, but neutral 100.

[OS-pedrolourenco]

I have regenerated the screenshots but no changes were made in the regeneration. I think the bar background looks white in comparison with #ccc7c7 colour we set to the container background, which is more gray-ish, but in reality it's not white.

[thetaPC]

LGTM

[thetaPC]

LGTM