Skip to content

feat: update progress bar default fill to horizontal gradient #2143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
camsimony wants to merge 37 commits into
base: develop
Choose a base branch
from
+41 −23
Draft

feat: update progress bar default fill to horizontal gradient #2143

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
040bffd
feat: adds "...rest" to components (#2122)
anechol May 22, 2025
c39e768
feat: update dropdown shadow to match Pine's visual prominence (#2142)
camsimony Aug 12, 2025
5a00d27
feat: update progress bar default fill to horizontal gradient
devin-ai-integration[bot] Aug 14, 2025
c4805bc
fix: convert hex colors to lowercase for linting compliance
devin-ai-integration[bot] Aug 14, 2025
3115af5
chore: next version bump (#2125)
anechol Jun 6, 2025
fcc41e0
chore(ci): updating rails gem version [ci skip]
kajabi-bot Jun 6, 2025
6d27997
chore(release): publish [skip ci]
kajabi-bot Jun 6, 2025
e2ecda9
chore(deps): bump @pine-ds/icons from 9.4.3 to 9.5.0 (#2130) (#2131)
QuintonJason Jun 27, 2025
4e60d91
fix: adjust footer
pixelflips Jun 27, 2025
e690bff
chore(ci): updating rails gem version [ci skip]
kajabi-bot Jun 27, 2025
9abee1b
chore(release): publish [skip ci]
kajabi-bot Jun 27, 2025
7d2eecf
Next Version Bump (#2137)
pixelflips Jul 17, 2025
d869293
chore(ci): updating rails gem version [ci skip]
kajabi-bot Jul 17, 2025
a7d98a0
chore(release): publish [skip ci]
kajabi-bot Jul 17, 2025
988e7f4
fix(button): update comment for empty string handling in button compo…
pixelflips Jul 17, 2025
eed1fdb
chore(ci): updating rails gem version [ci skip]
kajabi-bot Jul 17, 2025
2e7d0af
chore(release): publish [skip ci]
kajabi-bot Jul 17, 2025
867280f
chore: next version bump
QuintonJason Aug 7, 2025
2579be9
feat: update dropdown shadow to match Pine's visual prominence (#2142)
camsimony Aug 12, 2025
d973cca
fix: update progress bar gradient implementation after rebase
devin-ai-integration[bot] Aug 14, 2025
6765e5b
feat: replace hex values with Pine design tokens for gradient
devin-ai-integration[bot] Aug 14, 2025
dfacdf7
feat: replace hex values with Pine design tokens for gradient
devin-ai-integration[bot] Aug 14, 2025
6b90f9f
fix: correct CSS selector logic for progress bar gradient override
devin-ai-integration[bot] Aug 14, 2025
cb75af8
fix: use CSS class approach to allow #ff3e15 as legitimate custom color
devin-ai-integration[bot] Aug 14, 2025
8b15481
fix: use CSS class approach to allow #ff3e15 as legitimate custom color
devin-ai-integration[bot] Aug 14, 2025
754fce2
fix: resolve merge conflict for progress bar gradient implementation
devin-ai-integration[bot] Aug 14, 2025
93c6846
fix: correct color prop detection logic to distinguish explicit vs de…
devin-ai-integration[bot] Aug 14, 2025
0015567
fix: use Object.prototype.hasOwnProperty.call to satisfy ESLint rule
devin-ai-integration[bot] Aug 14, 2025
e83b55e
fix: update gradient colors to red-300 → mercury-500
devin-ai-integration[bot] Aug 14, 2025
2a0feb2
fix: use var(--pine-color-brand) for gradient end color
devin-ai-integration[bot] Aug 14, 2025
9fab205
fix: correct React component logic to show gradient by default
devin-ai-integration[bot] Aug 14, 2025
577d7e6
fix: resolve React component gradient and CI lint issues
devin-ai-integration[bot] Aug 14, 2025
d132aa4
fix: use hasOwnProperty to detect explicit color props
devin-ai-integration[bot] Aug 14, 2025
57136ab
fix: resolve React component regression for gradient display
devin-ai-integration[bot] Aug 14, 2025
8b54760
fix: update ProgressBar component to handle color prop correctly
pixelflips Aug 14, 2025
4073a35
feat: implement system-wide gradient tokens for progress bar
devin-ai-integration[bot] Aug 15, 2025
6c53007
Revert "feat: implement system-wide gradient tokens for progress bar"
devin-ai-integration[bot] Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/sage-assets/lib/stylesheets/components/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
width: auto;
border-radius: sage-border(radius-medium);
background-color: sage-color(white);
box-shadow: sage-shadow(md);
box-shadow: sage-shadow(100);
transition: map-get($sage-transitions, default);
transition-property: transform, z-index;

Expand Down
8 changes: 7 additions & 1 deletion packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
////

$-progress-bar-height: var(--pine-dimension-xs);
$-progress-bar-gradient-start: var(--pine-color-red-300);
$-progress-bar-gradient-end: var(--pine-color-brand);

@keyframes sage-progress-bar--slide {
from {
Expand Down Expand Up @@ -44,7 +46,7 @@ $-progress-bar-height: var(--pine-dimension-xs);
.sage-progress-bar__value {
transform-origin: center left;
height: 100%;
background-color: var(--progress-bar-value-color, var(--pine-color-brand));
background: linear-gradient(to right, $-progress-bar-gradient-start, $-progress-bar-gradient-end);
border-radius: var(--pine-dimension-2xs);

[dir="rtl"] & {
Expand All @@ -54,6 +56,10 @@ $-progress-bar-height: var(--pine-dimension-xs);
.sage-modal__header & {
border-radius: 0;
}

&[style*="--progress-bar-value-color"]:not([style*="--progress-bar-value-color: #ff3e15"]) {
background: var(--progress-bar-value-color);
}
Copy link
Member

@pixelflips pixelflips Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This approach would prevent #ff3e15 from being used as a custom color.

}

.sage-progress-bar__animate {
Expand Down
Loading