fix(button, tabs): _hover style prop not applied

hope-ui · Apr 28, 2022 · 6ca183a · 6ca183a
1 parent c9ac936
commit 6ca183a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 21 deletions.
diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
@@ -1,3 +1,9 @@
+## [0.4.4](https://github.com/fabien-ml/hope-ui/compare/v0.4.3...v0.4.4) (2022-04-28)
+
+### 🐛 Bug fixes
+
+- `_hover` style prop is not applied on `Button` and `Tabs`.
+
 ## [0.4.3](https://github.com/fabien-ml/hope-ui/compare/v0.4.2...v0.4.3) (2022-04-19)
 
 ### 🐛 Bug fixes

diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hope-ui/solid",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "The SolidJS component library you've hoped for.",
   "keywords": [

diff --git a/packages/solid/src/components/button/button.styles.ts b/packages/solid/src/components/button/button.styles.ts
@@ -106,7 +106,7 @@ function createSolidCompoundVariant(config: SolidCompoundVariantConfig): SystemS
     backgroundColor: config.bgColor,
     color: config.color,
 
-    "&:not(:disabled):hover": {
+    "&:hover": {
       backgroundColor: config.bgColorHover,
     },
   };
@@ -128,11 +128,11 @@ function createSubtleCompoundVariant(config: SubtleCompoundVariantConfig): Syste
     backgroundColor: config.bgColor,
     color: config.color,
 
-    "&:not(:disabled):hover": {
+    "&:hover": {
       backgroundColor: config.bgColorHover,
     },
 
-    "&:not(:disabled):active": {
+    "&:active": {
       backgroundColor: config.bgColorActive,
     },
   };
@@ -155,12 +155,12 @@ function createOutlineCompoundVariant(config: OutlineCompoundVariantConfig): Sys
     borderColor: config.borderColor,
     color: config.color,
 
-    "&:not(:disabled):hover": {
+    "&:hover": {
       borderColor: config.borderColorHover,
       backgroundColor: config.bgColorHover,
     },
 
-    "&:not(:disabled):active": {
+    "&:active": {
       backgroundColor: config.bgColorActive,
     },
   };
@@ -180,11 +180,11 @@ function createGhostCompoundVariant(config: GhostCompoundVariantConfig): SystemS
   return {
     color: config.color,
 
-    "&:not(:disabled):hover": {
+    "&:hover": {
       backgroundColor: config.bgColorHover,
     },
 
-    "&:not(:disabled):active": {
+    "&:active": {
       backgroundColor: config.bgColorActive,
     },
   };
@@ -225,7 +225,7 @@ export const buttonStyles = css({
     boxShadow: "$outline",
   },
 
-  "&:disabled": {
+  "&:disabled, &:hover:disabled": {
     color: "$neutral7",
     cursor: "not-allowed",
   },
@@ -235,14 +235,14 @@ export const buttonStyles = css({
       solid: {
         border: "1px solid transparent",
 
-        "&:disabled": {
+        "&:disabled, &:hover:disabled": {
           backgroundColor: "$neutral3",
         },
       },
       subtle: {
         border: "1px solid transparent",
 
-        "&:disabled": {
+        "&:disabled, &:hover:disabled": {
           backgroundColor: "$neutral3",
         },
       },
@@ -251,7 +251,7 @@ export const buttonStyles = css({
         borderWidth: "1px",
         backgroundColor: "transparent",
 
-        "&:disabled": {
+        "&:disabled, &:hover:disabled": {
           borderColor: "$neutral3",
         },
       },
@@ -260,7 +260,7 @@ export const buttonStyles = css({
         borderWidth: "1px",
         backgroundColor: "transparent",
 
-        "&:disabled": {
+        "&:disabled, &:hover:disabled": {
           borderColor: "$neutral3",
         },
       },

diff --git a/packages/solid/src/components/tabs/tabs.styles.ts b/packages/solid/src/components/tabs/tabs.styles.ts
@@ -237,9 +237,13 @@ export const tabStyles = css({
       pills: {
         borderRadius: "$sm",
 
-        "&:not(:disabled):hover": {
+        "&:hover": {
           backgroundColor: "$neutral3",
         },
+
+        "&:hover:disabled": {
+          backgroundColor: "transparent",
+        },
       },
     },
     colorScheme: {
@@ -399,37 +403,65 @@ export const tabStyles = css({
     {
       variant: "pills",
       colorScheme: "primary",
-      css: createPillsAndColorVariant({ color: "$primary11", bgColor: "$primary3", bgColorHover: "$primary4" }),
+      css: createPillsAndColorVariant({
+        color: "$primary11",
+        bgColor: "$primary3",
+        bgColorHover: "$primary4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "accent",
-      css: createPillsAndColorVariant({ color: "$accent11", bgColor: "$accent3", bgColorHover: "$accent4" }),
+      css: createPillsAndColorVariant({
+        color: "$accent11",
+        bgColor: "$accent3",
+        bgColorHover: "$accent4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "neutral",
-      css: createPillsAndColorVariant({ color: "$neutral12", bgColor: "$neutral3", bgColorHover: "$neutral4" }),
+      css: createPillsAndColorVariant({
+        color: "$neutral12",
+        bgColor: "$neutral3",
+        bgColorHover: "$neutral4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "success",
-      css: createPillsAndColorVariant({ color: "$success11", bgColor: "$success3", bgColorHover: "$success4" }),
+      css: createPillsAndColorVariant({
+        color: "$success11",
+        bgColor: "$success3",
+        bgColorHover: "$success4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "info",
-      css: createPillsAndColorVariant({ color: "$info11", bgColor: "$info3", bgColorHover: "$info4" }),
+      css: createPillsAndColorVariant({
+        color: "$info11",
+        bgColor: "$info3",
+        bgColorHover: "$info4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "warning",
-      css: createPillsAndColorVariant({ color: "$warning11", bgColor: "$warning3", bgColorHover: "$warning4" }),
+      css: createPillsAndColorVariant({
+        color: "$warning11",
+        bgColor: "$warning3",
+        bgColorHover: "$warning4",
+      }),
     },
     {
       variant: "pills",
       colorScheme: "danger",
-      css: createPillsAndColorVariant({ color: "$danger11", bgColor: "$danger3", bgColorHover: "$danger4" }),
+      css: createPillsAndColorVariant({
+        color: "$danger11",
+        bgColor: "$danger3",
+        bgColorHover: "$danger4",
+      }),
     },
 
     /* -------------------------------------------------------------------------------------------------