@hashicorp/design-system-components 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hashicorp/design-system-components
 
+## 0.2.0
+
+### Minor Changes
+
+- [#76](https://github.com/hashicorp/design-system/pull/76) [`48a82d54`](https://github.com/hashicorp/design-system/commit/48a82d545817c280d022cf95b2f3a691dc3c46a3) Thanks [@didoo](https://github.com/didoo)! - Added the "tertiary" color variant to the "Button" component
+
+* [#77](https://github.com/hashicorp/design-system/pull/77) [`c08711e4`](https://github.com/hashicorp/design-system/commit/c08711e4fa3fac0cd3418b8afa1a0c4c254e8fac) Thanks [@didoo](https://github.com/didoo)! - Fixed the "elevation" treatment for the "Button" component
+
 ## 0.1.2
 
 ### Patch Changes

package/addon/components/hds/button/index.js

@@ -6,7 +6,7 @@ export const DEFAULT_COLOR = 'primary';
 export const DEFAULT_TYPE = 'button';
 export const DEFAULT_ICONPOSITION = 'leading';
 export const SIZES = ['small', 'medium', 'large'];
-export const COLORS = ['primary', 'secondary', 'critical'];
+export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
 export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
@@ -72,6 +72,11 @@ export default class HdsButtonIndexComponent extends Component {
    * @description The name of the icon to be used.
    */
   get icon() {
+    assert(
+      `when the "Hds::Button" @color is "tertiary" an @icon is required`,
+      !(this.color === 'tertiary' && !this.args.icon)
+    );
+
     return this.args.icon ?? null;
   }
 
@@ -180,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(' ');
   }
 }

package/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,
@@ -213,9 +217,59 @@ $size-props: (
   }
 }
 
+.hds-button--color-tertiary {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--token-color-foreground-action);
+
+  &:focus,
+  &.is-focus {
+    border-color: var(--token-color-focus-action-internal);
+    color: var(--token-color-foreground-action);
+    &::before {
+      border-color: var(--token-color-focus-action-external);
+    }
+  }
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-action-hover);
+    cursor: pointer;
+  }
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+    box-shadow: none;
+    color: var(--token-color-foreground-action-active);
+    &::before {
+      border-color: transparent;
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &.is-disabled,
+  &:disabled:focus,
+  &[disabled]:focus,
+  &.is-disabled:focus,
+  &:disabled:hover,
+  &[disabled]:hover,
+  &.is-disabled:hover {
+    background-color: transparent;
+    border-color: transparent;
+
+    &::before {
+      border-color: transparent;
+    }
+  }
+}
+
 .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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",