Merge pull request #445 from nextui-org/fix/mobile-ghost-button

fix: ghost button fixed on mobile
nextui-org · May 1, 2022 · a4049d8 · a4049d8
2 parents 4723bc6 + 418afc8
commit a4049d8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/react/src/button/button.styles.ts b/packages/react/src/button/button.styles.ts
@@ -52,11 +52,7 @@ export const StyledButton = styled(
         }
       },
       ghost: {
-        true: {
-          '&:hover': {
-            color: '$white'
-          }
-        }
+        true: {}
       },
       color: {
         default: {
@@ -501,55 +497,62 @@ export const StyledButton = styled(
         isHovered: true,
         color: 'default',
         css: {
-          bg: '$primary'
+          bg: '$primary',
+          color: '$primarySolidContrast'
         }
       },
       {
         ghost: true,
         isHovered: true,
         color: 'primary',
         css: {
-          bg: '$primary'
+          bg: '$primary',
+          color: '$primarySolidContrast'
         }
       },
       {
         ghost: true,
         isHovered: true,
         color: 'secondary',
         css: {
-          bg: '$secondary'
+          bg: '$secondary',
+          color: '$secondarySolidContrast'
         }
       },
       {
         ghost: true,
         isHovered: true,
         color: 'success',
         css: {
-          bg: '$success'
+          bg: '$success',
+          color: '$successSolidContrast'
         }
       },
       {
         ghost: true,
         isHovered: true,
         color: 'warning',
         css: {
-          bg: '$warning'
+          bg: '$warning',
+          color: '$warningSolidContrast'
         }
       },
       {
         ghost: true,
         isHovered: true,
         color: 'error',
         css: {
-          bg: '$error'
+          bg: '$error',
+          color: '$errorSolidContrast'
         }
       },
       {
         ghost: true,
         color: 'gradient',
         isHovered: true,
         css: {
-          bg: '$gradient'
+          bg: '$gradient',
+          color: '$white'
         }
       },
       // flat / color

diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
@@ -118,9 +118,11 @@ const Button = React.forwardRef(
 
     const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
     const {
+      isFocused,
       isFocusVisible,
       focusProps
     }: {
+      isFocused: boolean;
       isFocusVisible: boolean;
       focusProps: Omit<
         React.HTMLAttributes<HTMLButtonElement>,
@@ -164,7 +166,7 @@ const Button = React.forwardRef(
         data-state={getState}
         animated={animated}
         isPressed={isPressed}
-        isHovered={isHovered}
+        isHovered={isHovered || (ghost && isFocused)}
         isFocusVisible={isFocusVisible && !disabled}
         className={clsx(
           'nextui-button',