[fix](@svelteui/core): fix Button with href disabled state

svelteuidev · Jun 2, 2023 · b4c8f0d · b4c8f0d
1 parent 1991a5f
commit b4c8f0d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 31 deletions.
diff --git a/packages/svelteui-core/src/components/Button/Button.stories.svelte b/packages/svelteui-core/src/components/Button/Button.stories.svelte
@@ -53,4 +53,4 @@
 
 <Story name="Loading" id="buttonLoadingStory" template="variants" args={{ loading: true }} />
 
-<Story name="With href" id="buttonHrefStory" args={{ href: 'https://www.svelteui.org', external: true, disabled: false }} />
+<Story name="With href" id="buttonHrefStory" template="variants" args={{ href: 'https://www.svelteui.org', external: true, disabled: false, loading: false }} />
diff --git a/packages/svelteui-core/src/components/Button/Button.styles.ts b/packages/svelteui-core/src/components/Button/Button.styles.ts
@@ -94,37 +94,39 @@ export default createStyles(
 				fontSize: `$${size}`,
 				lineHeight: 1,
 				flexGrow: 0,
-				width: fullSize ? '100%' : 'auto',
+				width: fullSize ? '100%' : 'fit-content',
 				'&:hover': {
 					backgroundColor: variant === 'gradient' ? null : theme.fn.themeColor(color, 7),
 					backgroundSize: variant === 'gradient' ? '200%' : null
 				},
 				'&:active': {
 					transform: 'translateY(1px)'
 				},
-        '&:disabled': {
-          pointerEvents: 'none',
-          borderColor: 'transparent',
-          backgroundColor: theme.fn.themeColor('gray', 2),
-          color: theme.fn.themeColor('gray', 5),
-          cursor: 'not-allowed',
-          darkMode: {
-            backgroundColor: theme.fn.themeColor('dark', 4),
-            color: theme.fn.themeColor('dark', 6)
-          }
-        }
+				'&:disabled': {
+					pointerEvents: 'none',
+					borderColor: 'transparent',
+					background: theme.fn.themeColor('gray', 2),
+					backgroundColor: theme.fn.themeColor('gray', 2),
+					color: theme.fn.themeColor('gray', 5),
+					cursor: 'not-allowed',
+					darkMode: {
+						backgroundColor: theme.fn.themeColor('dark', 4),
+						color: theme.fn.themeColor('dark', 6)
+					}
+				}
+			},
+			disabled: {
+				pointerEvents: 'none',
+				borderColor: 'transparent',
+				background: theme.fn.themeColor('gray', 2),
+				backgroundColor: theme.fn.themeColor('gray', 2),
+				color: theme.fn.themeColor('gray', 5),
+				cursor: 'not-allowed',
+				darkMode: {
+					backgroundColor: theme.fn.themeColor('dark', 4),
+					color: theme.fn.themeColor('dark', 6)
+				}
 			},
-      disabled: {
-        pointerEvents: 'none',
-        borderColor: 'transparent',
-        backgroundColor: theme.fn.themeColor('gray', 2),
-        color: theme.fn.themeColor('gray', 5),
-        cursor: 'not-allowed',
-        darkMode: {
-          backgroundColor: theme.fn.themeColor('dark', 4),
-          color: theme.fn.themeColor('dark', 6)
-        }
-      },
 			loading: {
 				pointerEvents: 'none',
 				'&::before': {
@@ -136,9 +138,25 @@ export default createStyles(
 					cursor: 'not-allowed'
 				}
 			},
-      variants: {
-				variation: vFunc(color, gradient)
-			},
+			variants: {
+				variation: vFunc(color, gradient),
+
+				// Used to override the disable style when using anchor HTML element
+				disabled: {
+					true: {
+						pointerEvents: 'none',
+						borderColor: 'transparent',
+						background: theme.fn.themeColor('gray', 2),
+						backgroundColor: theme.fn.themeColor('gray', 2),
+						color: theme.fn.themeColor('gray', 5),
+						cursor: 'not-allowed',
+						darkMode: {
+							backgroundColor: theme.fn.themeColor('dark', 4),
+							color: theme.fn.themeColor('dark', 6)
+						}
+					}
+				}
+			}
 		};
 	}
 );
diff --git a/packages/svelteui-core/src/components/Button/Button.svelte b/packages/svelteui-core/src/components/Button/Button.svelte
@@ -79,17 +79,17 @@ A user can perform an immediate action by pressing a button. It's frequently use
     ```
 -->
 
-{#if href && !disabled}
+{#if href}
 	<a
 		{href}
 		bind:this={element}
 		use:useActions={use}
 		use:forwardEvents
 		class:compact
 		class:uppercase
-		class={cx(className, classes.root, getStyles({ css: override, variation: variant }), {
-			disabled,
-			loading
+		class={cx(className, classes.root, getStyles({ css: override, variation: variant, disabled }), {
+			[classes.disabled]: disabled,
+			[classes.loading]: loading
 		})}
 		role="button"
 		rel="noreferrer noopener"