fix(Button): no longer shows hover or active style when disabled

Author: liamross

src/components/Button/_Button.scss

@@ -35,7 +35,7 @@
       color: $color-contrast-1;
       fill: $color-contrast-1;
 
-      &:active {
+      &:active:not(.ui__button--disabled) {
         border-color: $color-blue-gray-6;
         background-color: $color-blue-gray-6;
       }
@@ -47,7 +47,7 @@
       color: $color-blue-gray-5;
       fill: $color-blue-gray-5;
 
-      &:active {
+      &:active:not(.ui__button--disabled) {
         color: $color-blue-gray-6;
         fill: $color-blue-gray-6;
       }
@@ -61,13 +61,13 @@
       transition: background-color 75ms ease-in-out, color 75ms ease-in-out;
 
       &:focus.ui__button--tabbing,
-      &:hover {
+      &:hover:not(.ui__button--disabled) {
         background-color: $color-blue-gray-5;
         color: $color-contrast-1;
         fill: $color-contrast-1;
       }
 
-      &:active {
+      &:active:not(.ui__button--disabled) {
         border-color: $color-blue-gray-6;
         background-color: $color-blue-gray-6;
       }

src/components/ClickableDiv/ClickableDiv.tsx

@@ -26,7 +26,7 @@ export const ClickableDiv = forwardRef<HTMLDivElement, ClickableDivProps>(
 
     const handleOnClick = useOnClick(onClick, { disabled, stopPropagation: true });
 
-    const handleKeyUp = useKeyForClick(onKeyPress, clickableDivRef);
+    const handleKeyPress = useKeyForClick(onKeyPress, clickableDivRef);
 
     const isUserTabbing = useAccessibleFocus();
 
@@ -48,7 +48,7 @@ export const ClickableDiv = forwardRef<HTMLDivElement, ClickableDivProps>(
         tabIndex={disabled ? -1 : tabIndex ?? 0}
         className={clickableDivClass}
         onClick={handleOnClick}
-        onKeyPress={handleKeyUp}
+        onKeyPress={handleKeyPress}
         ref={clickableDivRef}
       >
         {children}