Merge pull request #77 from hashicorp/fix-button-elevation-treatment

"Button" component - Fix "elevation" treatment
hashicorp · Mar 17, 2022 · ae60e60 · ae60e60 · vercel · Mar 17, 2022
2 parents e6d9be7 + c08711e
commit ae60e60
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/lazy-gifts-serve.md b/.changeset/lazy-gifts-serve.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+Fixed the "elevation" treatment for the "Button" component
diff --git a/packages/components/addon/components/hds/button/index.js b/packages/components/addon/components/hds/button/index.js
@@ -185,9 +185,6 @@ export default class HdsButtonIndexComponent extends Component {
       classes.push('hds-button--width-full');
     }
 
-    // the button has a "low" elevation effect applied to it
-    classes.push('hds-elevation-low');
-
     return classes.join(' ');
   }
 }
diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss
@@ -59,6 +59,8 @@ $hds-button-focus-border-width: 3px;
 
   &:focus,
   &.is-focus {
+    box-shadow: none;
+
     &::before {
       // the position absolute of an element is computed from the inside of the border of the container
       // so we have to take in account the border width of the pseudo-element container itself
@@ -141,6 +143,7 @@ $size-props: (
 .hds-button--color-primary {
   background-color: var(--token-color-palette-blue-200);
   border-color: var(--token-color-palette-blue-300);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-high-contrast);
 
   &:focus,
@@ -183,6 +186,7 @@ $size-props: (
 .hds-button--color-secondary {
   background-color: var(--token-color-surface-faint);
   border-color: var(--token-color-border-strong);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-primary);
 
   &:focus,
@@ -217,8 +221,6 @@ $size-props: (
   background-color: transparent;
   border-color: transparent;
   color: var(--token-color-foreground-action);
-  // TODO! fix the shadows for the button (this will be done in a follow-up PR)
-  box-shadow: none;
 
   &:focus,
   &.is-focus {
@@ -267,6 +269,7 @@ $size-props: (
 .hds-button--color-critical {
   background-color: var(--token-color-surface-critical);
   border-color: var(--token-color-foreground-critical-on-surface);
+  box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-critical-on-surface);
 
   &:focus,