fix: button spinner color

leather-io · Nov 26, 2024 · 3d1d6f8 · 3d1d6f8
1 parent a3afd53
commit 3d1d6f8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/panda-preset/src/recipes/button-recipe.ts b/packages/panda-preset/src/recipes/button-recipe.ts
@@ -5,7 +5,7 @@ const loadingStyles = {
     _after: {
       animation: 'spin',
       border: '2px solid',
-      borderColor: 'ink.action-primary-default',
+      borderColor: 'currentColor',
       borderBottomColor: 'transparent',
       boxSizing: 'border-box',
       content: '""',
@@ -17,7 +17,6 @@ const loadingStyles = {
       top: 'calc(50% - 10px)',
       width: '20px',
     },
-    color: 'transparent !important',
   },
 };
 
@@ -48,6 +47,7 @@ export const buttonRecipe = defineRecipe({
         },
         _disabled: {
           _hover: { bg: 'ink.background-secondary' },
+          _loading: { bg: 'ink.action-primary-default' },
           bg: 'ink.background-secondary',
           color: 'ink.text-non-interactive',
           cursor: 'not-allowed',

diff --git a/packages/ui/src/components/button/button.web.stories.tsx b/packages/ui/src/components/button/button.web.stories.tsx
@@ -26,6 +26,18 @@ export const Button: Story = {
   },
 };
 
+export const Loading: Story = {
+  parameters: {
+    controls: { include: ['size', 'variant'] },
+  },
+  args: {
+    'aria-busy': true,
+    children: 'Button',
+    size: 'md',
+    variant: 'solid',
+  },
+};
+
 export const Disabled: Story = {
   parameters: {
     controls: { include: ['size', 'variant'] },

diff --git a/packages/ui/src/components/button/button.web.tsx b/packages/ui/src/components/button/button.web.tsx
@@ -12,15 +12,29 @@ export type ButtonProps = Omit<
   ButtonVariantProps;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { children, fullWidth, size, trigger, invert, type = 'button', variant, ...rest } = props;
+  const {
+    children,
+    fullWidth,
+    size,
+    trigger,
+    invert,
+    type = 'button',
+    variant,
+    disabled: disabledProp,
+    ...rest
+  } = props;
+  const isLoading = rest['aria-busy'] === true || rest['aria-busy'] === 'true';
+  const disabled = isLoading || disabledProp;
+
   return (
     <StyledButton
       ref={ref}
       className={buttonRecipe({ fullWidth, size, invert, trigger, variant })}
       type={type}
+      disabled={disabled}
       {...rest}
     >
-      {children}
+      <styled.span opacity={isLoading ? 0 : 1}>{children}</styled.span>
     </StyledButton>
   );
 });