fix(components): update fill for pending button progress

launchdarkly · Nov 8, 2024 · 62a9369 · 62a9369
1 parent f809e2c
commit 62a9369
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/fair-emus-relax.md b/.changeset/fair-emus-relax.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Update fill for pending button progress
diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx
@@ -59,7 +59,9 @@ const _Button = (
 		>
 			{composeRenderProps(props.children, (children, { isPending }) => (
 				<Provider values={[[TextContext, { className: isPending ? styles.pending : undefined }]]}>
-					{isPending && <ProgressBar isIndeterminate aria-label="loading" />}
+					{isPending && (
+						<ProgressBar isIndeterminate aria-label="loading" className={styles.progress} />
+					)}
 					{children}
 				</Provider>
 			))}

diff --git a/packages/components/src/styles/Button.module.css b/packages/components/src/styles/Button.module.css
@@ -154,3 +154,7 @@
 .pending {
 	opacity: 50%;
 }
+
+.progress {
+	--fill: currentColor;
+}
diff --git a/packages/components/src/styles/ProgressBar.module.css b/packages/components/src/styles/ProgressBar.module.css
@@ -9,6 +9,7 @@
 }
 
 .progress {
+	--fill: var(--lp-color-gray-500);
 	display: inline-flex;
 }
 
@@ -17,7 +18,7 @@
 }
 
 .innerCircle {
-	stroke: var(--lp-color-gray-500);
+	stroke: var(--fill);
 }
 
 .base {