@hashicorp/design-system-components 2.14.2 → 3.0.0

package/app/modifiers/hds-clipboard.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/modifiers/hds-clipboard';

package/app/styles/components/button.scss

@@ -64,6 +64,8 @@
 
 .hds-button__text {
   flex: 1 0 0;
+  // <button> and <a> elements have different intrinsic text alignments, so we need to normalize it
+  text-align: center;
 }
 
 

package/app/styles/components/copy/snippet.scss

@@ -15,11 +15,8 @@
   gap: 8px;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: 6px 4px;
-  white-space: normal;
   text-align: left;
-  overflow-wrap: anywhere;
   border: 1px solid transparent;
   border-radius: 5px;
   cursor: pointer;
@@ -27,11 +24,12 @@
 
 .hds-copy-snippet--color-primary {
   color: var(--token-color-foreground-action);
-  background-color: var(--token-color-surface-interactive);
+  background-color: transparent;
 
   &:hover,
   &.mock-hover {
     color: var(--token-color-foreground-action-hover);
+    background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
   }
 
@@ -41,14 +39,19 @@
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
   }
+
+  &:focus {
+    background-color: transparent;
+  }
 }
 
 .hds-copy-snippet--color-secondary {
   color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-interactive);
+  background-color: transparent;
 
   &:hover,
   &.mock-hover {
+    background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
   }
 
@@ -76,12 +79,16 @@
 }
 
 .hds-copy-snippet--status-success {
+  background-color: var(--token-color-surface-interactive);
+
   .hds-copy-snippet__icon {
     color: var(--token-color-foreground-success);
   }
 }
 
 .hds-copy-snippet--status-error {
+  background-color: var(--token-color-surface-interactive);
+
   .hds-copy-snippet__icon {
     color: var(--token-color-foreground-critical);
   }
@@ -89,7 +96,6 @@
 
 .hds-copy-snippet__text {
   flex: 1 0 0;
-  max-width: calc(100% - 24px);
 }
 
 .hds-copy-snippet__icon {
@@ -97,15 +103,17 @@
 }
 
 .hds-copy-snippet--width-full {
-  justify-content: center;
+  width: 100%;
+  max-width: 100%;
+}
+
+.hds-copy-snippet--is-truncated {
+  width: 100%;
+  max-width: 100%;
 
   .hds-copy-snippet__text {
-    flex: 0 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }
-
-.hds-copy-snippet__text--truncated {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

package/app/styles/components/dropdown.scss

@@ -75,14 +75,14 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 .hds-dropdown-toggle-icon--size-small {
   .hds-dropdown-toggle-icon__wrapper {
-    width: 20px;
-    height: 20px;
+    width: 24px; // same as the `button[small]` minus 2*2px becaus there are a 1px padding and 1px border to take into account
+    height: 24px;
   }
 }
 
 .hds-dropdown-toggle-icon--size-medium {
   .hds-dropdown-toggle-icon__wrapper {
-    width: 32px;
+    width: 32px; // same as the `button[medium]` minus 2*2px becaus there are a 1px padding and 1px border to take into account
     height: 32px;
   }
 }
@@ -190,16 +190,14 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   max-width: initial;
 }
 
-.hds-dropdown__content--position-bottom-right,
-.hds-dropdown__content--position-right {
+.hds-dropdown__content--position-bottom-right {
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
   z-index: 2;
 }
 
-.hds-dropdown__content--position-bottom-left,
-.hds-dropdown__content--position-left {
+.hds-dropdown__content--position-bottom-left {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
@@ -547,7 +545,6 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   .hds-dropdown-list-item__icon {
     margin-top: 2px;
     margin-right: 4px;
-    color: var(--token-color-foreground-primary);
   }
 }
 

package/app/styles/components/flyout.scss

@@ -70,7 +70,6 @@
 
 .hds-flyout__tagline {
   margin-bottom: 4px;
-  color: var(--token-color-foreground-faint);
 }
 
 .hds-flyout__dismiss {
@@ -79,7 +78,6 @@
 
 .hds-flyout__description {
   padding: 0 24px 16px;
-  color: var(--token-color-foreground-primary);
 }
 
 .hds-flyout__body {

package/app/styles/components/form/group.scss

@@ -29,6 +29,11 @@
 }
 
 .hds-form-group--layout-vertical {
+  .hds-form-group__control-fields-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
   .hds-form-group__control-field + .hds-form-group__control-field {
     margin-top: 12px;
   }

package/app/styles/components/form/index.scss

@@ -23,3 +23,4 @@
 @use "./text-input";
 @use "./textarea";
 @use "./toggle";
+@use "./visibility-toggle";

package/app/styles/components/form/masked-input.scss

@@ -34,20 +34,11 @@ $hds-form-masked-input-button-size: 24px;
   }
 }
 
-// notice: by design, for this button we don't apply a custom style for the focused state
-// but we rely on the standard outlined styling provided by the browser
 .hds-form-masked-input__toggle-button {
   position: absolute;
   top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
   right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
   grid-area: input;
-  width: $hds-form-masked-input-button-size;
-  height: $hds-form-masked-input-button-size;
-  padding: 2px;
-  color: var(--token-color-foreground-primary);
-  background-color: transparent;
-  border-color: transparent;
-  cursor: pointer;
 }
 
 .hds-form-masked-input__copy-button {

package/app/styles/components/form/radio-card.scss

@@ -23,13 +23,11 @@
     margin: calc(var(--token-form-radiocard-group-gap) / 2);
   }
 
-  // LAYOUT
-
-  .hds-form-radio-card--layout-fluid {
+  .hds-form-radio-card--has-fluid-width {
     flex: 1 0 0;
   }
 
-  .hds-form-radio-card--layout-fixed {
+  .hds-form-radio-card--has-fixed-width {
     flex: 1 0 100%;
   }
 }

package/app/styles/components/form/text-input.scss

@@ -83,6 +83,23 @@
 
 // "TYPE" CUSTOMIZATION
 
+.hds-form-text-input__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+// PASSWORD
+
+.hds-form-text-input--has-visibility-toggle {
+  padding-right: calc(var(--token-form-control-padding) + 24px);
+}
+
+.hds-form-text-input__visibility-toggle {
+  position: absolute;
+  top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
+  right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
+}
+
 .hds-form-text-input {
 
   // DATE/TIME

package/app/styles/components/form/visibility-toggle.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// VISIBILITY-TOGGLE
+//
+
+// notice: by design, for this button we don't apply a custom style for the focused state
+// but we rely on the standard outlined styling provided by the browser
+
+$hds-form-visibility-toggle-button-size: 24px;
+
+.hds-form-visibility-toggle {
+  width: $hds-form-visibility-toggle-button-size;
+  height: $hds-form-visibility-toggle-button-size;
+  padding: 2px;
+  color: var(--token-color-foreground-primary);
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
+}

package/app/styles/components/stepper/step-indicator.scss

@@ -42,9 +42,6 @@ $hds-stepper-indicator-step-size: 24px;
 .hds-stepper-indicator-step__text {
   width: 20px;
   overflow: hidden;
-  font-weight: var(--token-typography-font-weight-medium);
-  font-size: 0.8125rem;
-  font-family: var(--token-typography-font-stack-text);
   white-space: nowrap;
   text-align: center;
   user-select: none;

package/app/styles/components/tag.scss

@@ -15,11 +15,7 @@ $hds-tag-border-radius: 50px;
 .hds-tag {
   display: inline-flex;
   align-items: stretch;
-  color: var(--token-color-foreground-primary);
-  font-weight: var(--token-typography-font-weight-medium);
-  font-size: 0.8125rem; // 13px
-  font-family: var(--token-typography-font-stack-text);
-  line-height: 1rem; // 16px
+  line-height: 1rem; // 16px - override `body-100`
   vertical-align: middle;
   background-color: var(--token-color-surface-interactive);
   border: 1px solid var(--token-color-border-strong);

package/app/styles/mixins/_button.scss

@@ -14,21 +14,24 @@ $size-props: (
     "font-size": 0.8125rem, // 13px;
     "line-height": 0.875rem, // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
     "min-height": 1.75rem,  // 28px
-    "padding": 0.375rem 0.6875rem, // 6px 11px - here we're taking into account the 1px border
+    "padding-vertical": 0.375rem, // 6px - here we're taking into account the 1px border
+    "padding-horizontal": 0.6875rem, // 11px - here we're taking into account the 1px border
     "icon-size": 0.75rem, // 12px
   ),
   "medium": (
     "font-size": 0.875rem, // 14px
     "line-height": 1rem,// 16px
     "min-height": 2.25rem, // 36px
-    "padding": 0.5625rem 0.9375rem, // 9px 15px - here we're taking into account the 1px border
+    "padding-vertical": 0.5625rem, // 9px - here we're taking into account the 1px border
+    "padding-horizontal": 0.9375rem, // 15px - here we're taking into account the 1px border
     "icon-size": 1rem, // 16px
   ),
   "large": (
     "font-size": 1rem, // 16px
     "line-height": 1.5rem, // 24px
     "min-height": 3rem, // 48px
-    "padding": 0.6875rem 1.1875rem, // 11px 19px - here we're taking into account the 1px border
+    "padding-vertical": 0.6875rem, // 11px - here we're taking into account the 1px border
+    "padding-horizontal": 1.1875rem, // 19px - here we're taking into account the 1px border
     "icon-size": 1.5rem, // 24px
   )
 );
@@ -271,7 +274,7 @@ $size-props: (
   @each $size in $hds-button-sizes {
     .#{$blockName}--size-#{$size} {
       min-height: map-get($size-props, $size, "min-height");
-      padding: map-get($size-props, $size, "padding");
+      padding: map-get($size-props, $size, "padding-vertical") map-get($size-props, $size, "padding-horizontal");
 
       .#{$blockName}__icon {
         width: map-get($size-props, $size, "icon-size");
@@ -282,6 +285,13 @@ $size-props: (
         font-size: map-get($size-props, $size, "font-size");
         line-height: map-get($size-props, $size, "line-height");
       }
+
+      &.#{$blockName}--is-icon-only {
+        // overrides to have the icon-only button squared
+        min-width: map-get($size-props, $size, "min-height");
+        padding-right: map-get($size-props, $size, "padding-vertical");
+        padding-left: map-get($size-props, $size, "padding-vertical");
+      }
     }
   }
 }

package/index.js

@@ -25,5 +25,8 @@ module.exports = {
         'dialog-polyfill-css': 'dialog-polyfill/dist/dialog-polyfill.css',
       },
     },
+    'ember-cli-babel': {
+      enableTypeScriptTransform: true,
+    },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "2.14.2",
+  "version": "3.0.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -30,6 +30,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "tsc --noEmit",
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
@@ -42,13 +43,12 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/test-waiters": "^3.0.2",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^3.1.3",
+    "@hashicorp/ember-flight-icons": "^4.0.0",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",
     "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-clipboard": "^1.0.0",
     "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-sass": "^10.0.1",
     "ember-composable-helpers": "^4.5.0",
@@ -67,8 +67,35 @@
     "@embroider/test-setup": "^2.1.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "^1.1.0",
+    "@glint/environment-ember-loose": "^1.1.0",
+    "@glint/template": "^1.1.0",
     "@percy/cli": "^1.24.2",
     "@percy/ember": "^4.2.0",
+    "@tsconfig/ember": "latest",
+    "@types/ember": "latest",
+    "@types/ember-qunit": "latest",
+    "@types/ember-resolver": "latest",
+    "@types/ember__application": "latest",
+    "@types/ember__array": "latest",
+    "@types/ember__component": "latest",
+    "@types/ember__controller": "latest",
+    "@types/ember__debug": "latest",
+    "@types/ember__destroyable": "latest",
+    "@types/ember__engine": "latest",
+    "@types/ember__error": "latest",
+    "@types/ember__object": "latest",
+    "@types/ember__polyfills": "latest",
+    "@types/ember__routing": "latest",
+    "@types/ember__runloop": "latest",
+    "@types/ember__service": "latest",
+    "@types/ember__string": "latest",
+    "@types/ember__template": "latest",
+    "@types/ember__test": "latest",
+    "@types/ember__test-helpers": "latest",
+    "@types/ember__utils": "latest",
+    "@types/qunit": "latest",
+    "@types/rsvp": "latest",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-testing": "^5.2.1",
@@ -102,13 +129,15 @@
     "prettier": "^2.8.8",
     "qunit": "^2.19.4",
     "qunit-dom": "^2.0.0",
+    "sinon": "^15.2.0",
     "stylelint": "^15.10.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^5.0.0",
+    "typescript": "^5.1.6",
     "webpack": "^5.84.1"
   },
   "engines": {
-    "node": "14.* || 16.* || >= 18"
+    "node": "16.* || >= 18"
   },
   "ember": {
     "edition": "octane"

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    // The combination of `baseUrl` with `paths` allows Ember's classic package
+    // layout, which is not resolvable with the Node resolution algorithm, to
+    // work with TypeScript.
+    "baseUrl": ".",
+    "paths": {
+      "dummy/tests/*": [
+        "tests/*"
+      ],
+      "dummy/*": [
+        "tests/dummy/app/*",
+        "app/*"
+      ],
+      "@hashicorp/design-system-components": [
+        "addon"
+      ],
+      "@hashicorp/design-system-components/*": [
+        "addon/*"
+      ],
+      "@hashicorp/design-system-components/test-support": [
+        "addon-test-support"
+      ],
+      "@hashicorp/design-system-components/test-support/*": [
+        "addon-test-support/*"
+      ],
+      "*": [
+        "types/*"
+      ]
+    }
+  },
+  "include": [
+    "app/**/*",
+    "addon/**/*",
+    "tests/**/*",
+    "types/**/*",
+    "test-support/**/*",
+    "addon-test-support/**/*"
+  ],
+  "glint": {
+    "environment": "ember-loose"
+  }
+}

package/types/dummy/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import '@glint/environment-ember-loose';

package/types/global.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Types for compiled templates
+declare module '@hashicorp/design-system-components/templates/*' {
+  import { TemplateFactory } from 'ember-cli-htmlbars';
+
+  const tmpl: TemplateFactory;
+  export default tmpl;
+}