Merge pull request #828 from securityscorecard/ajkl2533@UDX-1254

feat(Button): add active animation
securityscorecard · Oct 3, 2023 · cd269b7 · cd269b7
2 parents 85ee496 + 45fcf8c
commit cd269b7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 24 deletions.
diff --git a/.storybook/image-snapshots/expected/components_Button_Outline Buttons.png b/.storybook/image-snapshots/expected/components_Button_Outline Buttons.png
diff --git a/.storybook/image-snapshots/expected/components_Button_Solid Buttons.png b/.storybook/image-snapshots/expected/components_Button_Solid Buttons.png
diff --git a/.storybook/image-snapshots/expected/components_Button_Text Buttons.png b/.storybook/image-snapshots/expected/components_Button_Text Buttons.png
diff --git a/src/components/_internal/BaseButton/BaseStyledButton.tsx b/src/components/_internal/BaseButton/BaseStyledButton.tsx
@@ -34,11 +34,6 @@ const ButtonSolid = css<BaseStyledButtonProps>`
     outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
   }
 
-  &:active,
-  &.active {
-    background-color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
-  }
-
   &:disabled,
   &.disabled {
     background-color: ${getToken(`color-action-background-disabled`)};
@@ -53,6 +48,8 @@ const ButtonOutline = css<BaseStyledButtonProps>`
 
   &:hover,
   &.hover {
+    background-color: ${(p) =>
+      getToken(`color-action-background-${p.$color}-active`, p)};
     color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
     border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
   }
@@ -62,13 +59,6 @@ const ButtonOutline = css<BaseStyledButtonProps>`
     border-color: ${(p) => getToken(`color-action-${p.$color}-hover`, p)};
     outline: 4px solid ${(p) => getToken(`color-action-${p.$color}-focus`, p)};
   }
-  &:active,
-  &.active {
-    background-color: ${(p) =>
-      getToken(`color-action-background-${p.$color}-active`, p)};
-    border-color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
-    color: ${(p) => getToken(`color-action-${p.$color}-active`, p)};
-  }
 
   &:disabled,
   &.disabled {
@@ -107,17 +97,6 @@ const ButtonText = css<BaseStyledButtonProps>`
     outline: none;
   }
 
-  &:active,
-  &&&.active {
-    color: ${(p) =>
-      getToken(
-        `color-action-${
-          p.$color === 'primary' || p.$color === 'secondary' ? 'link-' : ''
-        }${p.$color}-active`,
-        p,
-      )};
-  }
-
   &:disabled,
   &.disabled {
     color: ${getToken(`color-action-text-disabled`)};
@@ -144,6 +123,8 @@ const BaseStyledButton = styled(Padbox).withConfig({
   cursor: pointer;
   text-align: center;
   white-space: nowrap;
+  transition: all 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
+    transform 50ms cubic-bezier(0.55, 0.085, 0.68, 0.53), outline 0ms;
 
   ${({ $margin }) => createMarginSpacing($margin)};
   ${({ $isExpanded }) => $isExpanded && 'width: 100%;'};
@@ -169,6 +150,18 @@ const BaseStyledButton = styled(Padbox).withConfig({
   &:active {
     text-decoration: none;
   }
+
+  &:active,
+  &&&.active {
+    transform: scale(0.98);
+  }
+
+  @media (prefers-reduced-motion) {
+    &:active,
+    &&&.active {
+      transform: scale(1);
+    }
+  }
 `;
 
 export default BaseStyledButton;
diff --git a/src/theme/tokens.ts b/src/theme/tokens.ts
@@ -23,7 +23,7 @@ export const createTokens = (
   'color-action-secondary': colors.neutral[700],
   'color-action-success': colors.success[700],
   'color-action-danger': colors.error[500],
-  'color-action-primary-hover': colors.primary[700],
+  'color-action-primary-hover': colors.primary[800],
   'color-action-secondary-hover': colors.neutral[900],
   'color-action-success-hover': colors.success[800],
   'color-action-danger-hover': colors.error[600],