@hashicorp/design-system-components 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 0.4.0
+
+### Minor Changes
+
+- [#117](https://github.com/hashicorp/design-system/pull/117) [`e78f6df8`](https://github.com/hashicorp/design-system/commit/e78f6df8f7488f9f97e8de2a5dc3464b2a390725) Thanks [@didoo](https://github.com/didoo)! - added a stacking context for the “Button” component so that the focus z-index is isolated in the button
+
+## 0.3.2
+
+### Patch Changes
+
+- [#112](https://github.com/hashicorp/design-system/pull/112) [`2be08081`](https://github.com/hashicorp/design-system/commit/2be08081582dd7e9c092fdb35c94c063d5ee7f4e) Thanks [@didoo](https://github.com/didoo)! - added missing helpers for “color” and “typography” in “components” package
+
+## 0.3.1
+
+### Patch Changes
+
+- [#98](https://github.com/hashicorp/design-system/pull/98) [`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a) Thanks [@didoo](https://github.com/didoo)! - refactored the “focus-ring” mixins to support both “action” (default) and “critical“ colors
+
+- Updated dependencies [[`411cd9b9`](https://github.com/hashicorp/design-system/commit/411cd9b949e376d38eb1dc4d4af93ae17e6c686a)]:
+  - @hashicorp/design-system-tokens@0.7.0
+
 ## 0.3.0
 
 ### Minor Changes

package/addon/components/hds/breadcrumb/index.hbs

@@ -1,12 +1,4 @@
-<nav
-  class={{this.classNames}}
-  {{!
-    TODO: should this string be localized, like in Structure? https://github.com/hashicorp/structure/blob/dffbb0e0ae5246d3b832586ab25bcb981a052b30/packages/pds-ember/addon/components/pds/breadcrumbs/index.hbs#L3
-    (in which case, we need to expose a prop? or start to have localization in the HDS system?)
-  }}
-  aria-label="breadcrumbs"
-  ...attributes
->
+<nav class={{this.classNames}} aria-label="breadcrumbs" ...attributes>
   <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
     {{yield}}
   </ol>

package/app/styles/@hashicorp/design-system-components.scss

@@ -1,7 +1,9 @@
 // these are files coming from the 'design-system-tokens' package
 @use "tokens";
+@use "helpers/color";
 @use "helpers/elevation";
 @use "helpers/focus-ring";
+@use "helpers/typography";
 
 @use "../components/badge";
 @use "../components/badge-count";

package/app/styles/components/button.scss

@@ -21,6 +21,7 @@ $hds-button-focus-border-width: 3px;
   box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
   display: flex;
   font-family: var(--token-typography-font-stack-text);
+  isolation: isolate;
   justify-content: center;
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent; // We need this to be transparent for a11y

package/app/styles/mixins/_focus-ring.scss

@@ -2,14 +2,14 @@
 // - https://github.com/hashicorp/design-system-components/issues/161
 // - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 
-@mixin hds-focus-ring-basic() {
+@mixin hds-focus-ring-basic($color: action) {
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
   &.is-focus {
-    box-shadow: var(--token-focus-ring-box-shadow);
+    box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
   &:focus:not(:focus-visible) {
@@ -17,7 +17,7 @@
   }
   // set focus for browsers that support ":focus-visible"
   &:focus-visible {
-    box-shadow: var(--token-focus-ring-box-shadow);
+    box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
@@ -26,7 +26,7 @@
   }
 }
 
-@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px) {
+@mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
   isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
   outline-color: transparent;
@@ -48,7 +48,7 @@
   &:focus,
   &.is-focus {
     &::before {
-      box-shadow: var(--token-focus-ring-box-shadow);
+      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
   }
   // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -60,7 +60,7 @@
   // set focus for browsers that support ":focus-visible"
   &:focus-visible {
     &::before {
-      box-shadow: var(--token-focus-ring-box-shadow);
+      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
   }
   // remove the focus ring on "active + focused" state (by design)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,7 +34,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.6.0",
+    "@hashicorp/design-system-tokens": "^0.7.0",
     "@hashicorp/ember-flight-icons": "^2.0.1",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",