Created
June 11, 2026 18:55
-
-
Save ryanzec/2b756f28b9d1d6642d40f9d61c35e9a3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You are tasked to create the new progress bar component in @projects/shared-ui/src/lib/core/progress-bar/ the feature are: | |
| # Color | |
| the main / unfill background must be fixed to using the neutral colors but ther filled part will be controlled by a `color` input that can be any of the AllComponentsColors (defaulting to primary) | |
| # Shape | |
| there needs to be a `shape` input that can either be `pill` (default) or `rounded`. when `pill`, the entire component needs the pill border radius, when `rounded` is should use the xs radius. | |
| # Size | |
| While the width should always be 100% to let the parent control it, the height needs to be controlled by a `size` input that can be either `base` (default), `sm`, or `lg`. When `base`, the height should use the `--sizing-13xs`, when `sm` it should use the `--sizing-14xs`, and when `lg`, it should be `--sizing-12xs` | |
| # Fill | |
| the fill percentage it to be controlled by a `percentage` input that is a number between 0 and 100, you should clamp the effective value to that range. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment