@hashicorp/design-system-components 2.7.0 → 2.8.0

package/app/styles/components/accordion.scss

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// ACCORDION
+//
+
+@use "../mixins/button" as *;
+@use "../mixins/focus-ring" as *;
+
+$accordion-item-padding: 16px;
+$accordion-item-border-radius: 6px;
+
+// ACCORDION COMPONENT (wrapper)
+
+.hds-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+// ACCORDION ITEM COMPONENT (nested child)
+
+.hds-accordion-item {
+  background: var(--token-color-surface-primary);
+  border-radius: $accordion-item-border-radius;
+
+  &.hds-accordion-item--does-not-contain-interactive {
+    box-shadow: var(--token-surface-mid-box-shadow);
+
+    &:hover,
+    &.mock-hover {
+      box-shadow: var(--token-surface-high-box-shadow);
+    }
+  }
+
+  &.hds-accordion-item--contains-interactive {
+    box-shadow: var(--token-surface-base-box-shadow);
+  }
+}
+
+// TOGGLE BLOCK
+
+.hds-accordion-item__toggle {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding:
+    $accordion-item-padding
+    $accordion-item-padding
+    $accordion-item-padding
+    12px; // by design
+}
+
+.hds-accordion-item__button {
+  padding: 0;
+
+  &:hover { cursor: pointer; }
+
+  // entire toggle area is interactive
+  &.hds-accordion-item__button--parent-does-not-contain-interactive {
+    @include hds-focus-ring-with-pseudo-element();
+    position: static;
+    margin: -1px 0;
+    color: var(--token-color-foreground-primary);
+    background: transparent;
+    border: 1px solid transparent;
+
+    // expand button target to cover entire AccordionItem Toggle block (depending on the `@containsInteractive/@parentContainsInteractive` argument)
+    &::after {
+      position: absolute;
+      display: block;
+      border-radius: $accordion-item-border-radius;
+      content: "";
+      inset: 0;
+    }
+  }
+
+  // only chevron button area is interactive
+  &.hds-accordion-item__button--parent-contains-interactive {
+    @include hds-button();
+    width: 24px;
+    height: 24px;
+
+    &:focus,
+    &.mock-focus {
+      @include hds-button-state-focus();
+    }
+
+    // `hds-button-color-secondary` determines the focus color and needs to be placed after `hds-button-state-focus`
+    @include hds-button-color-secondary();
+  }
+
+  // animate chevron icon
+  &.hds-accordion-item__button--is-open {
+    .flight-icon-chevron-down {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .flight-icon-chevron-down {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 0.3s;
+    }
+  }
+}
+
+// Consumer added content that appears next to the chevron button:
+.hds-accordion-item__toggle-content {
+  flex: 1;
+}
+
+// CONTENT BLOCK
+
+.hds-accordion-item__content {
+  padding: 4px $accordion-item-padding $accordion-item-padding $accordion-item-padding;
+}

package/app/styles/components/alert.scss

@@ -37,32 +37,14 @@
 .hds-alert__text {
   display: flex;
   flex-direction: column;
+  gap: 4px;
   justify-content: center;
   color: var(--token-color-foreground-warning-on-surface);
-  font-size: var(--token-typography-body-200-font-size);
-  font-family: var(--token-typography-body-200-font-family);
-  line-height: var(--token-typography-body-200-line-height);
-
-  .hds-alert--type-compact & {
-    font-size: var(--token-typography-body-100-font-size);
-    font-family: var(--token-typography-body-100-font-family);
-    line-height: var(--token-typography-body-100-line-height);
-  }
-}
-
-.hds-alert__title {
-  font-weight: var(--token-typography-font-weight-semibold);
 }
 
 .hds-alert__description {
-  color: var(--token-color-foreground-primary);
-  font-weight: var(--token-typography-font-weight-regular);
   word-break: break-word;
 
-  .hds-alert__title + & {
-    margin-top: 4px;
-  }
-
   // we add very basic styling for elements that may be injected via the "description" string
 
   strong {
@@ -106,15 +88,12 @@
 
 .hds-alert__actions {
   display: flex;
+  gap: 16px;
   align-items: center;
 
   > * {
     margin-top: 16px;
   }
-
-  > * + * {
-    margin-left: 8px;
-  }
 }
 
 // DISMISS

package/app/styles/components/application-state.scss

@@ -33,23 +33,17 @@ $hds-application-state-padding: 12px 0;
 }
 
 .hds-application-state__body {
-  display: flex;
   padding: $hds-application-state-padding;
   color: var(--token-color-foreground-faint);
 }
 
 .hds-application-state__footer {
   display: flex;
+  gap: 8px;
   justify-content: space-between;
 
   &.hds-application-state__footer--has-divider {
     padding: $hds-application-state-padding;
     border-top: 1px solid var(--token-color-border-strong);
   }
-
-  // in case users do something outside design guidelines
-  .hds-link-standalone + .hds-link-standalone {
-    margin-left: 8px;
-  }
 }
-

package/app/styles/components/badge.scss

@@ -69,6 +69,7 @@ $size-props: (
 
 @each $size in $hds-badge-sizes {
   .hds-badge--size-#{$size} {
+    gap: map-get($size-props, $size, "gap");
     min-height: map-get($size-props, $size, "height");
     padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
@@ -81,10 +82,6 @@ $size-props: (
       font-size: map-get($size-props, $size, "font-size");
       line-height: map-get($size-props, $size, "line-height");
     }
-
-    .hds-badge__icon + .hds-badge__text {
-      margin-inline-start: map-get($size-props, $size, "gap");
-    }
   }
 }
 

package/app/styles/components/button-set.scss

@@ -9,8 +9,5 @@
 
 .hds-button-set {
   display: flex;
-
-  > * + * {
-    margin-left: 16px;
-  }
+  gap: 16px;
 }

package/app/styles/components/button.scss

@@ -64,14 +64,6 @@
 
 .hds-button__text {
   flex: 1 0 0;
-
-  .hds-button__icon + & {
-    margin-left: 0.375rem;
-  }
-
-  & + .hds-button__icon {
-    margin-left: 0.375rem;
-  }
 }
 
 

package/app/styles/components/disclosure-primitive.scss

@@ -9,5 +9,4 @@
 
 .hds-disclosure-primitive {
   position: relative;
-  width: fit-content;
 }

package/app/styles/components/dropdown.scss

@@ -29,6 +29,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 .hds-dropdown-toggle-icon {
   display: flex;
+  gap: 2px;
   align-items: center;
   justify-content: center;
   padding: 1px;
@@ -56,10 +57,6 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   &.mock-disabled {
     @include hds-button-state-disabled();
   }
-
-  .hds-dropdown-toggle-chevron {
-    padding-left: 4px;
-  }
 }
 
 .hds-dropdown-toggle-icon__wrapper {
@@ -146,19 +143,18 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 .hds-dropdown-toggle-button__icon {
   flex: none;
-  margin-right: 0.375rem;
 }
 
 .hds-dropdown-toggle-button__badge,
 .hds-dropdown-toggle-button__count {
-  margin: -3px 0 -3px 6px;
+  margin: -3px 0 -3px 0;
 }
 
 // TOGGLE / CHEVRON
 
 .hds-dropdown-toggle-chevron {
   margin-left: auto;
-  padding-left: 8px;
+  padding-left: 2px;
 
   .flight-icon-chevron-down {
     @media (prefers-reduced-motion: no-preference) {
@@ -258,11 +254,8 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   }
 
   > .hds-button-set {
+    gap: 8px;
     margin: 8px 0;
-
-    > * + * {
-      margin-left: 8px;
-    }
   }
 }
 

package/app/styles/components/flyout.scss

@@ -53,6 +53,7 @@
 .hds-flyout__header {
   display: flex;
   flex: none;
+  gap: 16px;
   align-items: flex-start;
   padding: 16px 24px;
   color: var(--token-color-foreground-strong);
@@ -61,7 +62,6 @@
 .hds-flyout__icon {
   flex: none;
   align-self: center;
-  margin-right: 16px;
 }
 
 .hds-flyout__title {
@@ -75,7 +75,6 @@
 
 .hds-flyout__dismiss {
   align-self: center;
-  margin-left: 16px;
 }
 
 .hds-flyout__description {

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

@@ -9,6 +9,7 @@
 
 .hds-form-error {
   display: flex;
+  gap: 8px;
   align-items: flex-start;
   color: var(--token-form-error-color);
 }
@@ -17,7 +18,7 @@
   flex: none;
   width: var(--token-form-error-icon-size);
   height: var(--token-form-error-icon-size);
-  margin: 2px 8px 2px 0;
+  margin: 2px 0 2px 0;
 }
 
 .hds-form-error__content {

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

@@ -15,6 +15,7 @@
 @use "./group";
 @use "./indicator";
 @use "./checkbox";
+@use "./masked-input";
 @use "./radio";
 @use "./radio-card";
 @use "./select";

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// MASKED-INPUT
+//
+
+$hds-form-masked-input-button-size: 24px;
+
+.hds-form-masked-input {
+  position: relative;
+  width: 100%;
+
+  .hds-form-masked-input__control {
+    padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
+  }
+}
+
+.hds-form-masked-input--is-masked {
+  .hds-form-masked-input__control {
+    -webkit-text-security: disc;
+  }
+}
+
+.hds-form-masked-input--is-not-masked {
+  .hds-form-masked-input__control {
+    -webkit-text-security: none;
+  }
+}
+
+// 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));
+  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;
+}

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

@@ -141,5 +141,10 @@
       // stylelint-disable-next-line property-no-vendor-prefix
       -webkit-appearance: none;
     }
+
+    // IS LOADING
+    &.hds-form-text-input--is-loading {
+      background-image: var(--token-form-text-input-background-image-data-url-search-loading);
+    }
   }
 }

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

@@ -48,9 +48,9 @@
   // READONLY
 
   &:read-only {
-    color: var(--token-form-control-disabled-foreground-color);
+    color: var(--token-form-control-readonly-foreground-color);
     background-color: var(--token-form-control-readonly-surface-color);
-    border-color: var(--token-form-control-disabled-border-color);
+    border-color: var(--token-form-control-readonly-border-color);
     box-shadow: none;
   }
 

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

@@ -17,6 +17,7 @@ $hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone {
   display: flex;
+  gap: 0.375rem;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -33,14 +34,6 @@ $hds-link-standalone-border-width: 1px;
   text-decoration: underline;
   text-decoration-color: transparent;
   transition: text-decoration-color 0.25s ease-in;
-
-  .hds-link-standalone__icon + & {
-    margin-left: 0.375rem;
-  }
-
-  & + .hds-link-standalone__icon {
-    margin-left: 0.375rem;
-  }
 }
 
 // SIZE
@@ -49,7 +42,7 @@ $hds-link-standalone-border-width: 1px;
 $size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
-    "icon-size": 1rem, // 16px
+    "icon-size": 0.75rem, // 12px
     "line-height": 1.231, // ~16px
   ),
   "medium": (

package/app/styles/components/modal.scss

@@ -42,6 +42,7 @@
 .hds-modal__header {
   display: flex;
   flex: none;
+  gap: 16px;
   align-items: flex-start;
   padding: 16px 24px;
   border-top-left-radius: inherit;
@@ -51,7 +52,6 @@
 .hds-modal__icon {
   flex: none;
   align-self: center;
-  margin-right: 16px;
 }
 
 .hds-modal__title {
@@ -64,7 +64,6 @@
 
 .hds-modal__dismiss {
   align-self: center;
-  margin-left: 16px;
 }
 
 .hds-modal__body {

package/app/styles/components/page-header.scss

@@ -8,6 +8,9 @@
 //
 
 .hds-page-header {
+  // `container-type: inline-size` creates a new stacking context; to control the position of Page Header content on the z-axis
+  // we set this element to `relative` to allow consumers to define the `z-index` value that works in their context
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 16px;

package/app/styles/components/pagination.scss

@@ -120,8 +120,9 @@ $pagination-layout-breakpoint: 1000px;
   }
 }
 
-// only the "Previous" & "Next" (`Arrow`) controls can be disabled
 .hds-pagination-nav__arrow {
+  gap: var(--token-pagination-nav-control-icon-spacing);
+  // only the "Previous" & "Next" (`Arrow`) controls can be disabled
   // notice: when `@disabled={{true}}` is applied, the code always renders a `<button>` element
   // so no need to add the [disabled] selector here (elsewhere it's done to cover the `a[disabled]` case)
   &:disabled,
@@ -134,19 +135,11 @@ $pagination-layout-breakpoint: 1000px;
 .hds-pagination-nav__arrow--direction-prev {
   flex-direction: row;
   justify-content: flex-start;
-
-  .hds-pagination-nav__arrow-label {
-    margin-left: var(--token-pagination-nav-control-icon-spacing);
-  }
 }
 
 .hds-pagination-nav__arrow--direction-next {
   flex-direction: row-reverse;
   justify-content: flex-end;
-
-  .hds-pagination-nav__arrow-label {
-    margin-right: 6px;
-  }
 }
 
 .hds-pagination-nav__number--is-selected {

package/app/styles/components/reveal.scss

@@ -7,6 +7,8 @@
 // REVEAL COMPONENT
 //
 
+.hds-reveal { width: fit-content; }
+
 .hds-reveal__toggle-button {
   // overriding some styles of the tertiary button, per design specs
   min-height: 1.75rem; // 28px, Override default so padding difference will be visible

package/app/styles/components/side-nav/content.scss

@@ -67,6 +67,7 @@
 
 .hds-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
   display: flex;
+  gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
   align-items: center;
   width: 100%;
   min-height: var(--token-side-nav-body-list-item-height);
@@ -118,11 +119,6 @@
       background: var(--token-color-surface-strong);
     }
   }
-
-  .hds-badge,
-  .hds-badge-count {
-    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-  }
 }
 
 // special override for the "back-link" element (no visible active state, by design)
@@ -149,11 +145,9 @@
 
 .hds-side-nav__list-item-icon-leading {
   flex: none;
-  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
 }
 
 .hds-side-nav__list-item-icon-trailing {
   flex: none;
   margin-left: auto;
-  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
 }

package/app/styles/components/side-nav/header.scss

@@ -77,8 +77,7 @@
 
 .hds-side-nav-header__actions-container {
   display: flex;
-
-  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
+  gap: var(--token-side-nav-header-actions-spacing);
 }
 
 // dropdown overrides

package/app/styles/components/table.scss

@@ -15,9 +15,9 @@ $hds-table-border-width: 1px;
 $hds-table-inner-border-radius: $hds-table-border-radius - $hds-table-border-width;
 $hds-table-border-color: var(--token-color-border-primary);
 $hds-table-header-height: 48px;
-$hds-table-cell-padding-medium: 12px 16px;
-$hds-table-cell-padding-short: 4px 16px;
-$hds-table-cell-padding-tall: 20px 16px;
+$hds-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
+$hds-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
+$hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
 
 .hds-table {
   width: 100%;
@@ -51,7 +51,7 @@ $hds-table-cell-padding-tall: 20px 16px;
 
   .hds-table__th,
   .hds-table__th-sort {
-    height: $hds-table-header-height;
+    min-height: $hds-table-header-height;
   }
 }
 

package/app/styles/components/tabs.scss

@@ -73,6 +73,7 @@
   );
   position: static;
   display: flex;
+  gap: var(--token-tabs-tab-gutter);
   align-items: center;
   padding: 0;
   color: inherit;
@@ -89,14 +90,6 @@
   }
 }
 
-.hds-tabs__tab-icon {
-  margin-right: var(--token-tabs-tab-gutter);
-}
-
-.hds-tabs__tab-count {
-  margin-left: var(--token-tabs-tab-gutter);
-}
-
 .hds-tabs__tab-indicator {
   position: absolute;
   right: 0;

package/app/styles/components/tooltip.scss

@@ -32,6 +32,7 @@
   padding: 0;
   color: inherit;
   font: inherit;
+  text-align: inherit;
   background-color: inherit;
   border: none;
 }

package/app/styles/mixins/_button.scss

@@ -36,9 +36,16 @@ $size-props: (
 @mixin hds-button() {
   position: relative;
   display: flex;
+  gap: 0.375rem;
   align-items: center;
   justify-content: center;
   width: auto;
+  // notice: we set the font-weight of the button text to "regular" (on purpose)
+  // because of the antialising of the browser that renders the text quite different
+  // from what it looks like in Figma, so we prefer to have them visually similar
+  // even if they differ in their internal implementation (in Figma the font-weight is medium/500)
+  // for more context about this decision: https://hashicorp.atlassian.net/browse/HDS-2099
+  font-weight: var(--token-typography-font-weight-regular);
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y