Repository navigation
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #5188 +/- ##
=======================================
Coverage 97.73% 97.73%
=======================================
Files 996 998 +2
Lines 32222 32297 +75
Branches 11909 11945 +36
=======================================
+ Hits 31493 31567 +74
- Misses 723 724 +1
Partials 6 6 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
56db88d to
4353e95
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Filled slider ticks use the track color in several states instead of matching the customized value range.
1 open issue
What changed in this PR
Adds Style API v2 support to Slider and ProgressBar, enabling slot-based customization while retaining legacy styling fallbacks.
Changes:
- Adds styling tokens and class-name slots for both components.
- Makes progress percentage text directly styleable.
- Adds slot-wiring unit tests and styled demo pages.
| File | Description |
|---|---|
src/slider/styles.scss |
Adds track, value, and handle styling integration. |
src/slider/mixins.scss |
Adds handle fill, halo, and radius tokens. |
src/slider/internal.tsx |
Applies root and handle slot classes. |
src/slider/index.tsx |
Forwards implicit styling classes. |
src/slider/__tests__/style-api.test.tsx |
Tests slot classes and DOM prop filtering. |
src/progress-bar/styles.scss |
Adds bar tokens and percentage typography styles. |
src/progress-bar/internal.tsx |
Replaces percentage Box with a styleable element. |
src/progress-bar/index.tsx |
Applies and forwards styling classes. |
src/progress-bar/__tests__/style-api.test.tsx |
Tests styling slots across variants. |
pages/slider/style-api-v2.scss |
Demonstrates custom colors and handle states. |
pages/slider/style-api-v2.page.tsx |
Adds interactive, disabled, and read-only examples. |
pages/progress-bar/style-api-v2.scss |
Defines custom bar and percentage styles. |
pages/progress-bar/style-api-v2.page.tsx |
Adds styled progress bar examples. |
Review effort: Balanced
| @include progress-bar.root( | ||
| $track-color: palette.$subtle, | ||
| $value-color: palette.$accent, | ||
| $bar-border-radius: 2px, |
There was a problem hiding this comment.
Can we prefix this with awsui- like $awsui-bar-border-radius, so it's clear it only accepts a single value? For example, 4px 8px wouldn't work here. According to the doc: UM9CHZ8CCdFl
There was a problem hiding this comment.
We will add this change to the component toolkit part that generates css vars, docs, and mixins: every token that we pass to the style-api.docs() util will be automatically prefixed with awsui-.
| SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| /* stylelint-disable selector-combinator-disallowed-list */ |
| tickMarks={tickMarks} | ||
| hideFillLine={hideFillLine} | ||
| style={style} | ||
| styleClassNames={(props as { styleClassNames?: StyleClassNames }).styleClassNames} |
There was a problem hiding this comment.
nit: why do we need this? {...props} on the next line already passes it to the component
Description
New APIs are reflected in the tracker: P3d34KdbCd6o.
How has this been tested?
Unit tests and test pages
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.