Skip to content

Fix SwirlProgressIndicator (variant=bar) size heights to and add a new l size for both variants - #1756

Merged
fabio-carvalho88 merged 2 commits into
mainfrom
rnd-2844-fix-progress-bar-component
Sep 1, 2026
Merged

Fix SwirlProgressIndicator (variant=bar) size heights to and add a new l size for both variants #1756
fabio-carvalho88 merged 2 commits into
mainfrom
rnd-2844-fix-progress-bar-component

Conversation

@marcomFlip

@marcomFlip marcomFlip commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

Summary

swirl-progress-indicator's bar variant rendered xs and s at the same height (2px) and had no l size. This updates the CSS to match the desired size mapping and adds the missing l size.

Before → after (bar height)

size before after
xs 2px 1px
s 2px 2px (unchanged)
m 4px 4px (unchanged, still default)
l n/a 8px (new)

Since size is shared with the circle variant, and circleSizeConfig is a Record<SwirlProgressIndicatorSize, ...> requiring every key, I added a proportional l entry for circle too (radius: 40, strokeWidth: 8 — double the m config, matching the existing sm stroke/diameter ratio). No spec called out circle geometry for l, so flagging this choice for review.

What a reviewer should know

  • custom-elements.manifest.json and vscode-data.json are regenerated build artifacts (via stencil build) reflecting the new l size in the type union — not hand-edited.
  • Added spec coverage for the new l size on both bar and circle variants.
  • Added a changeset (patch).

Test plan

  • stencil test --spec — all 508 tests pass (including new l-size cases)
  • eslint on changed files — clean
  • Verified in a local Storybook build: xs/s/m/l bar heights measured via computed style match 1px/2px/4px/8px; unset size still resolves to the m default (4px)

…dd l size

RND-2844: the bar variant's xs and s sizes both rendered at 2px instead of
1px/2px, and there was no l size. Split the xs/s CSS rule, added xs=1px and
l=8px, and extended SwirlProgressIndicatorSize with a proportional circle
config entry for l so the type stays exhaustive.
@linear-code

linear-code Bot commented Jul 28, 2026

Copy link
Copy Markdown

RND-2844

@vercel

vercel Bot commented Jul 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Actions Updated
getflipdev Ignored Ignored Preview Sep 1, 2026 2:44pm UTC
staginggetflipdev Ignored Ignored Preview Sep 1, 2026 2:44pm UTC

Request Review

@github-actions

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://icy-water-049ec4003-1756.westeurope.3.azurestaticapps.net

Comment thread .changeset/fix-progress-bar-sizes.md
@marcomFlip marcomFlip changed the title fix(swirl-progress-indicator): correct bar variant size heights and add l size Fix SwirlProgressIndicator (variant=bar) size heights to and add a new l size for both variants Aug 27, 2026
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://icy-water-049ec4003-1756.westeurope.3.azurestaticapps.net

@fabio-carvalho88
fabio-carvalho88 merged commit a7a24fe into main Sep 1, 2026
10 checks passed
@fabio-carvalho88
fabio-carvalho88 deleted the rnd-2844-fix-progress-bar-component branch September 1, 2026 16:43
@github-actions github-actions Bot mentioned this pull request Sep 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants