@hashicorp/design-system-components 0.12.0 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 0.12.3
+
+### Patch Changes
+
+- Updated dependencies [[`a46fc035`](https://github.com/hashicorp/design-system/commit/a46fc03570f51e8375b15571ddcb10e62ba446fb)]:
+  - @hashicorp/design-system-tokens@0.8.1
+
+## 0.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.7
+
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.6
+
 ## 0.12.0
 
 ### Minor Changes

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

@@ -10,7 +10,7 @@
     </div>
   {{else}}
     <LinkTo
-      class="hds-breadcrumb__link {{if @hover 'is-hover'}} {{if @active 'is-active'}} {{if @focus 'is-focus'}}"
+      class="hds-breadcrumb__link"
       @models={{hds-link-to-models @model @models}}
       @query={{hds-link-to-query @query}}
       @route={{@route}}

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

@@ -3,10 +3,7 @@
     <:toggle as |t|>
       <button
         type="button"
-        class="hds-breadcrumb__truncation-toggle
-          {{if @hover 'is-hover'}}
-          {{if @active 'is-active'}}
-          {{if @focus 'is-focus'}}"
+        class="hds-breadcrumb__truncation-toggle"
         aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >

package/app/styles/components/alert.scss

@@ -84,7 +84,6 @@
     color: var(--token-color-foreground-action);
 
     &:focus,
-    &.is-focus,
     &:focus-visible {
       outline: 2px solid var(--token-color-focus-action-internal);
       outline-offset: 1px;
@@ -132,8 +131,7 @@
     margin-top: 1px;
   }
 
-  &:hover,
-  &.is-hover {
+  &:hover {
     &::before { // we re-use the pseudo-element created by the "focus-ring" mixin
       background-color: rgba(#dedfe3, 0.4);
     }
@@ -142,8 +140,7 @@
   // notice: this is used not only for the focus, but also to increase the clickable area
   @include hds-focus-ring-with-pseudo-element($top: -4px, $right: -4px, $bottom: -4px, $left: -4px);
 
-  &:active,
-  &.is-active {
+  &:active {
     color: var(--token-color-foreground-secondary);
     &::before {
       background-color: rgba(#dedfe3, 0.4);

package/app/styles/components/breadcrumb.scss

@@ -77,7 +77,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     text-decoration-color: transparent;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
         color: var(--token-color-palette-neutral-600);
 
         > .hds-breadcrumb__text {
@@ -89,7 +89,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     @include hds-focus-ring-basic();
 
     &:active,
-    &.is-active {
+    &.mock-active {
         color: var(--token-color-foreground-secondary);
 
         > .hds-breadcrumb__text {
@@ -155,7 +155,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     width: $hds-breadcrumb-item-height;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-faint);
     }
@@ -164,13 +164,13 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     @include hds-focus-ring-basic();
 
     &:focus,
-    &.is-focus {
+    &.mock-focus {
         background-color: transparent;
         border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
         background-color: var(--token-color-surface-interactive-active);
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-primary);

package/app/styles/components/dropdown.scss

@@ -185,7 +185,7 @@ $hds-dropdown-toggle-border-radius: 5px;
       background-color: var(--token-color-surface-interactive-active);
     }
 
-    &.mock-success {
+    &.is-success {
       background-color: var(--token-color-surface-success);
       border-color: var(--token-color-border-success);
 

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

@@ -8,7 +8,6 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus,
   &.mock-focus {
     box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
@@ -22,8 +21,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active,
-  &.mock-focus.is-active {
+  &.mock-focus.mock-active {
     box-shadow: none;
   }
 }
@@ -47,7 +45,6 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus,
   &.mock-focus {
     &::before {
       box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
@@ -67,8 +64,7 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active,
-  &.mock-focus.is-active {
+  &.mock-focus.mock-active {
     &::before {
       box-shadow: none;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.0",
+  "version": "0.12.3",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,8 +34,8 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.8.0",
-    "@hashicorp/ember-flight-icons": "^2.0.5",
+    "@hashicorp/design-system-tokens": "^0.8.1",
+    "@hashicorp/ember-flight-icons": "^2.0.7",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",