Make loading disabled buttons colorful (#4666)

toptal · Feb 12, 2025 · bb47d73 · bb47d73
1 parent 6a1957b
commit bb47d73
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/.changeset/nice-games-beg.md b/.changeset/nice-games-beg.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-button': patch
+---
+
+---
+
+### Button
+
+- use the button's variant color when displaying the loading indicator in a disabled button, instead of the default grey
diff --git a/packages/base/Button/src/Button/Button.tsx b/packages/base/Button/src/Button/Button.tsx
@@ -131,6 +131,7 @@ export const Button: OverridableComponent<Props> = forwardRef<
     focused,
     hovered,
     active,
+    loading,
   })
   const sizeClassNames = createSizeClassNames(size)
 

diff --git a/packages/base/Button/src/Button/styles.ts b/packages/base/Button/src/Button/styles.ts
@@ -24,11 +24,13 @@ export const createVariantClassNames = (
     focused,
     hovered,
     active,
+    loading,
   }: {
     disabled?: boolean
     focused?: boolean
     hovered?: boolean
     active?: boolean
+    loading?: boolean
   }
 ): string[] => {
   const variantClassNames = []
@@ -39,7 +41,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#4269D6]')
@@ -60,7 +62,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#DB466B]')
@@ -80,7 +82,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#27D496]')
@@ -98,7 +100,7 @@ export const createVariantClassNames = (
     case 'secondary':
       variantClassNames.push('border border-solid')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-gray-500')
         variantClassNames.push('visited:text-gray-500')
         variantClassNames.push('border-gray-500')
@@ -127,7 +129,7 @@ export const createVariantClassNames = (
       break
     case 'transparent':
       variantClassNames.push('border border-solid')
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-white/[0.32]')
         variantClassNames.push('border-white/[0.32]')
         variantClassNames.push('bg-transparent')

diff --git a/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx b/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx
@@ -57,6 +57,7 @@ export const ButtonCircular: OverridableComponent<Props> = forwardRef<
     focused,
     hovered,
     active,
+    loading,
   })
 
   const finalClassName = cx(

diff --git a/packages/base/Button/src/ButtonCircular/styles.ts b/packages/base/Button/src/ButtonCircular/styles.ts
@@ -28,11 +28,13 @@ export const createVariantClassNames = (
     focused,
     hovered,
     active,
+    loading,
   }: {
     disabled?: boolean
     focused?: boolean
     hovered?: boolean
     active?: boolean
+    loading?: boolean
   }
 ): string[] => {
   const variantClassNames = []
@@ -43,7 +45,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#4269D6]')
@@ -69,7 +71,7 @@ export const createVariantClassNames = (
       variantClassNames.push('border-none')
       variantClassNames.push('text-graphite-700')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-graphite-700')
         variantClassNames.push('opacity-[0.48]')
         variantClassNames.push('bg-transparent')
@@ -97,7 +99,7 @@ export const createVariantClassNames = (
       variantClassNames.push('border-none')
       variantClassNames.push('text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-white/[0.48]')
         variantClassNames.push('bg-transparent')
       } else {