@hashicorp/design-system-components 0.0.16 → 0.0.20

package/.github/pull_request_template.md.

@@ -0,0 +1,26 @@
+## :pushpin: Summary
+
+<!-- TLDR that includes the purpose of the PR e.g. "If merged, this PR..." -->
+
+## :busts_in_silhouette: How to review this PR
+
+<!-- Check one box -->
+
+- [ ] Review commit-by-commit (please copy commit info to "Summary" for clarity)
+- [ ] Review by "Files changed"
+
+## :camera_flash: Screenshots
+
+<!-- A picture is a thousand words -->
+
+## :link: External links
+
+<!-- Asana issues, RFCs, etc. -->
+
+## :memo: Is it documented? 
+
+- [ ] Please confirm that this change is documented on the website!
+
+***
+
+:speech_balloon: Please consider using [conventional comments](https://conventionalcomments.org/) when reviewing this PR.

package/README.md

@@ -27,6 +27,12 @@ Then add this line to the top of your app's style file (`app.scss` or similar):
 @import '@hashicorp/design-system-components';
 ```
 
+Usage
+------------------------------------------------------------------------------
+
+See the dedicated components website: https://design-system-components-hashicorp.vercel.app/
+
+
 Contributing
 ------------------------------------------------------------------------------
 

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

@@ -1,6 +1,7 @@
 // these are files coming from the 'design-system-tokens' package
 @use "tokens";
 @use "helpers/elevation";
+@use "helpers/focus-ring";
 
 @use "../mixins/generic-focus-state";
 

package/app/styles/components/button.scss

@@ -22,6 +22,7 @@ $hds-button-focus-border-width: 3px;
   display: flex;
   font-family: var(--token-typography-font-stack-text);
   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
   max-width: fit-content;
   position: relative;
@@ -34,9 +35,6 @@ $hds-button-focus-border-width: 3px;
   &:disabled:focus,
   &[disabled]:focus,
   &.is-disabled:focus,
-  &:disabled:focus-visible,
-  &[disabled]:focus-visible,
-  &.is-disabled:focus-visible,
   &:disabled:hover,
   &[disabled]:hover,
   &.is-disabled:hover {
@@ -45,7 +43,6 @@ $hds-button-focus-border-width: 3px;
     box-shadow: none;
     color: var(--token-color-palette-neutral-400);
     cursor: not-allowed;
-    outline-color: var(--token-color-palette-alpha-200);
 
     &::before {
       border-color: transparent;
@@ -62,7 +59,6 @@ $hds-button-focus-border-width: 3px;
   }
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     &::before {
       // the position absolute of an element is computed from the inside of the border of the container
@@ -149,7 +145,6 @@ $size-props: (
   color: var(--token-color-palette-neutral-0);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-action-background-primary);
     border-color: var(--token-color-action-border-on-primary);
@@ -192,12 +187,10 @@ $size-props: (
   color: var(--token-color-palette-neutral-600);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-palette-neutral-50);
     border-color: var(--token-color-action-border-on-primary);
     color: var(--token-color-palette-neutral-600);
-    outline-color: var(--token-color-action-border-on-primary);
     &::before {
       border-color: #5990FF;
     }
@@ -227,12 +220,10 @@ $size-props: (
   color: var(--token-color-critical-foreground-on-faint);
 
   &:focus,
-  &:focus-visible,
   &.is-focus {
     background-color: var(--token-color-palette-neutral-50);
     border-color: var(--token-color-critical-border-on-primary);
     color: var(--token-color-critical-foreground-on-faint);
-    outline-color: var(--token-color-critical-border-on-primary);
     &::before {
       border-color: #DD7578;
     }

package/app/styles/components/link/standalone.scss

@@ -18,13 +18,14 @@ $hds-link-standalone-border-width: 1px;
   align-items: center;
   background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
-  color: var(--token-color-action-foreground-on-faint);
   display: flex;
   font-family: var(--token-typography-font-stack-text);
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
   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;
   position: relative;
-  text-decoration: underline;
+  // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;
   width: fit-content;
 
@@ -61,6 +62,9 @@ $hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone__text {
   flex: 1 0 0;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.25s ease-in;
 
   .hds-link-standalone__icon + & {
     margin-left: 0.375rem;
@@ -111,44 +115,63 @@ $size-props: (
 // COLORS & STATES
 // The "primary" and "secondary" variants share a lot of styles for the interactive states
 // Note: the order of the pseuo-selectors need to stay the way they are
+//
+// For an explanation of the ":focus/:focus-visible" states see:
+// - https://github.com/hashicorp/design-system-components/issues/161
+// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 
 .hds-link-standalone {
+  // default focus for browsers that still rely on ":focus"
   &:focus,
-  &:focus-visible,
   &.is-focus {
     &::before {
       @include hds-generic-focus-state();
     }
   }
-  &:hover,
-  &.is-hover {
-    text-decoration: underline;
-    transition: text-decoration-color 0.25s ease-in;
-    // TODO!
-    // discuss with Heather if she wants that we add calculation for text-decoration offset
+  // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+  &:focus:not(:focus-visible) {
+    &::before {
+      @include hds-remove-focus-state();
+    }
   }
-  &:active,
-  &.is-active {
-    text-decoration: underline;
-
-    // remove the focus ring on "active + focused" state (by design)
+  // set focus for browsers that support ":focus-visible"
+  &:focus-visible {
+    &::before {
+      @include hds-generic-focus-state();
+    }
+  }
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &.is-focus.is-active {
     &::before {
-      content: none;
+      @include hds-remove-focus-state();
     }
   }
 }
 
 .hds-link-standalone--color-primary {
-  color: var(--token-color-action-foreground-on-faint);
+  color: var(--token-color-action-foreground-primary);
 
   &:hover,
   &.is-hover {
-    text-decoration-color: #4E81E8; // custom color by design
+    color: var(--token-color-action-background-hover);
+
+    .hds-link-standalone__text {
+      text-decoration-color: #4E81E8; // custom color by design
+    }
   }
+
   &:active,
   &.is-active {
-    color: var(--token-color-action-foreground-high-contrast);
-    text-decoration-color: #596987; // custom color by design
+    color: var(--token-color-action-background-active);
+
+    .hds-link-standalone__text {
+      text-decoration-color: #396ED6; // custom color by design
+    }
+
+    &::before {
+      background-color: var(--token-color-action-background-faint);
+    }
   }
 }
 
@@ -157,11 +180,21 @@ $size-props: (
 
   &:hover,
   &.is-hover {
-    text-decoration-color: #4D4D4F; // custom color by design
+    .hds-link-standalone__text {
+      text-decoration-color: #4D4D4F; // custom color by design
+    }
   }
+
   &:active,
   &.is-active {
     color: var(--token-color-neutral-foreground-secondary);
-    text-decoration-color: #6E7075; // custom color by design
+
+    .hds-link-standalone__text {
+      text-decoration-color: #6E7075; // custom color by design
+    }
+
+    &::before {
+      background-color: var(--token-color-palette-neutral-200);
+    }
   }
 }

package/app/styles/mixins/_generic-focus-state.scss

@@ -1,4 +1,7 @@
 @mixin hds-generic-focus-state() {
-  box-shadow: inset 0px 0px 0px 1px var(--token-color-action-border-on-primary),
-    0px 0px 0px 3px #5990ff; // this is a special color used only for the focus style, to pass color contrast for a11y purpose
+  box-shadow: var(--token-focus-ring-box-shadow);
+}
+
+@mixin hds-remove-focus-state() {
+  box-shadow: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -61,8 +61,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.4.3",
-    "@hashicorp/ember-flight-icons": "^2.0.0",
+    "@hashicorp/design-system-tokens": "^0.4.7",
+    "@hashicorp/ember-flight-icons": "^2.0.1",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-sass": "^10.0.1",
@@ -81,12 +81,14 @@
     "ember-a11y-refocus": "^2.1.0",
     "ember-auto-import": "^2.2.3",
     "ember-cli": "~3.28.4",
+    "ember-cli-clipboard": "^0.15.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-markdown-it-templates": "^0.0.3",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-terser": "^4.0.2",
+    "ember-concurrency": "^2.2.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",

package/.node_modules.ember-try/source-map-url/.jshintrc

@@ -1,43 +0,0 @@
-{
-  "bitwise": true,
-  "camelcase": true,
-  "curly": false,
-  "eqeqeq": true,
-  "es3": true,
-  "forin": true,
-  "immed": false,
-  "indent": false,
-  "latedef": "nofunc",
-  "newcap": false,
-  "noarg": true,
-  "noempty": true,
-  "nonew": false,
-  "plusplus": false,
-  "quotmark": false,
-  "undef": true,
-  "unused": "vars",
-  "strict": false,
-  "trailing": true,
-  "maxparams": 5,
-  "maxdepth": false,
-  "maxstatements": false,
-  "maxcomplexity": false,
-  "maxlen": 100,
-
-  "asi": true,
-  "expr": true,
-  "globalstrict": true,
-  "smarttabs": true,
-  "sub": true,
-
-  "node": true,
-  "globals": {
-    "describe": false,
-    "it": false,
-    "before": false,
-    "beforeEach": false,
-    "after": false,
-    "afterEach": false,
-    "define": false
-  }
-}