feat(Button): add active-hover state to buttons (#2076)

mondaycom · Apr 30, 2024 · 9976fa0 · 9976fa0
1 parent 5485d6e
commit 9976fa0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/packages/core/src/components/Button/Button.module.scss b/packages/core/src/components/Button/Button.module.scss
@@ -265,12 +265,16 @@ $disabled-on-primary-color-opacity: 0.5;
   line-height: 22px;
 }
 
-.kindSecondary.colorPrimaryActive,
-.kindSecondary.colorPrimaryActive:hover {
+.kindSecondary.colorPrimaryActive {
   background-color: var(--primary-selected-color);
   border-color: var(--primary-color);
 }
 
+.kindSecondary.colorPrimaryActive:hover {
+  background-color: var(--primary-selected-hover-color);
+  border-color: var(--primary-color);
+}
+
 .kindSecondary.colorBrandActive {
   color: var(--text-color-on-brand);
 }
@@ -396,11 +400,14 @@ $disabled-on-primary-color-opacity: 0.5;
   background-color: transparent;
 }
 
-.kindTertiary.colorPrimaryActive,
-.kindTertiary.colorPrimaryActive:hover {
+.kindTertiary.colorPrimaryActive {
   background-color: var(--primary-selected-color);
 }
 
+.kindTertiary.colorPrimaryActive:hover {
+  background-color: var(--primary-selected-hover-color);
+}
+
 .kindTertiary.colorBrandActive {
   color: var(--text-color-on-brand);
 }

diff --git a/packages/core/src/components/SplitButton/SplitButton.module.scss b/packages/core/src/components/SplitButton/SplitButton.module.scss
@@ -31,10 +31,18 @@
   background-color: var(--primary-selected-color);
 }
 
+.kindTertiary.colorPrimary.mainActive .mainButton:hover {
+  background-color: var(--primary-selected-hover-color);
+}
+
 .kindTertiary.colorPrimary.mainActive .secondaryButton {
   background-color: var(--primary-selected-color);
 }
 
+.kindTertiary.colorPrimary.mainActive .secondaryButton:hover {
+  background-color: var(--primary-selected-hover-color);
+}
+
 .kindTertiary.colorPrimary.mainActive.splitContentOpen.splitContentOpen .secondaryButton,
 .kindTertiary.colorPrimary.mainActive.splitContentOpen.splitContentOpen .secondaryButton:hover,
 .kindTertiary.colorPrimary.mainActive.hovered.splitContentOpen .secondaryButton,
@@ -136,18 +144,25 @@
   background-color: var(--primary-selected-color);
 }
 
+.kindSecondary.colorPrimary.mainActive .mainButton:hover {
+  background-color: var(--primary-selected-hover-color);
+}
+
 .kindSecondary.colorPrimary.mainActive .secondaryButton {
   background-color: var(--primary-selected-color);
   border-color: var(--primary-color);
 }
 
-.kindSecondary.colorPrimary.splitContentOpen .secondaryButton,
-.kindSecondary.colorPrimary.splitContentOpen .secondaryButton:hover {
+.kindSecondary.colorPrimary.splitContentOpen .secondaryButton {
   color: var(--primary-color);
   border-color: var(--primary-color);
   background-color: var(--primary-selected-color);
 }
 
+.kindSecondary.colorPrimary.splitContentOpen .secondaryButton:hover {
+  background-color: var(--primary-selected-hover-color);
+}
+
 .kindSecondary.colorBrand.mainActive .mainButton {
   background-color: var(--brand-selected-color);
 }