@hashicorp/design-system-components 4.23.1 → 4.24.0-rc-20250923215537

package/dist/styles/components/advanced-table.scss

@@ -23,6 +23,7 @@ $hds-advanced-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px differe
 $hds-advanced-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
 $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
 $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown triggers in the header cell
+$hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
 
 // ADVANCED TABLE
 
@@ -111,6 +112,76 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
         z-index: 1;
         isolation: isolate;
       }
+
+      &:hover,
+      &.mock-hover,
+      &:focus-within {
+        .hds-advanced-table__th-reorder-handle {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+
+      &.hds-advanced-table__th--is-being-dragged .hds-advanced-table__th-reorder-handle {
+        opacity: 0;
+      }
+    }
+
+    .hds-advanced-table__th-reorder-drop-target {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    // is being dragged
+    .hds-advanced-table__th-reorder-drop-target--is-being-dragged {
+      background-color: var(--token-color-surface-primary);
+      opacity: 0.5;
+    }
+
+    // is dragging over
+    .hds-advanced-table__th-reorder-drop-target--is-dragging-over {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 1;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background-color: var(--token-color-palette-blue-300);
+        content: "";
+        pointer-events: none;
+      }
+    }
+
+    // dragging over left
+    .hds-advanced-table__th-reorder-drop-target--is-dragging-over--left::after {
+      left: 0;
+      transform: translateX(-3px);
+    }
+
+    // dragging over left and is first
+    .hds-advanced-table__th-reorder-drop-target--is-dragging-over--left.hds-advanced-table__th-reorder-drop-target--is-first::after {
+      border-radius: $hds-advanced-table-inner-border-radius 0 0 $hds-advanced-table-inner-border-radius;
+      transform: translateX(0);
+    }
+
+    // dragging over right
+    .hds-advanced-table__th-reorder-drop-target--is-dragging-over--right::after {
+      right: 0;
+      transform: translateX(3px);
+    }
+
+    // dragging over right and is last
+    .hds-advanced-table__th-reorder-drop-target--is-dragging-over--right.hds-advanced-table__th-reorder-drop-target--is-last::after {
+      border-radius: 0 $hds-advanced-table-inner-border-radius $hds-advanced-table-inner-border-radius 0;
+      transform: translateX(0);
     }
 
     .hds-advanced-table__th-resize-handle {
@@ -218,6 +289,14 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
     }
   }
 
+  .hds-advanced-table__scroll-indicator-top {
+    top: 0;
+    width: 100%;
+    height: 8px;
+    // the rgb value is equivalent to neutral/600, need to use rgba for the right opacity
+    background: linear-gradient(to top, rgba(59, 61, 69, 0%) 0%, rgba(59, 61, 69, 8%) 100%);
+  }
+
   // Resizable columns
   &.hds-advanced-table__thead--has-resizable-columns {
     .hds-advanced-table__th .hds-advanced-table__th-content-text {
@@ -237,6 +316,11 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
     background-color: var(--token-color-surface-strong);
     // need to subtract width of cell top border for default state, otherwise border of header+cell is 3.5px
     border-bottom: calc(3px - #{$hds-advanced-table-border-width} / 2) solid $hds-advanced-table-border-color;
+
+    .hds-advanced-table__scroll-indicator-top {
+      top: unset;
+      bottom: -11px;
+    }
   }
 
   &.hds-advanced-table__thead--is-pinned {
@@ -270,6 +354,67 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
   min-width: 0;
 }
 
+.hds-advanced-table__th-reorder-handle {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transform: translateX(-50%) translateY(50%);
+  visibility: hidden;
+  opacity: 0;
+
+  .hds-advanced-table__th-reorder-handle__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 16px;
+    color: var(--token-color-foreground-faint);
+    background-color: var(--token-color-surface-interactive);
+    border: 1px solid var(--token-color-border-primary);
+    border-radius: var(--token-border-radius-small);
+    box-shadow: var(--token-elevation-low-box-shadow);
+  }
+
+  .hds-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  &:hover,
+  &.mock-hover {
+    cursor: grab;
+
+    .hds-advanced-table__th-reorder-handle__inner {
+      background-color: var(--token-color-surface-interactive-hover);
+    }
+  }
+
+  &:active,
+  &.mock-active {
+    cursor: grabbing;
+
+    .hds-advanced-table__th-reorder-handle__inner {
+      background-color: var(--token-color-surface-interactive-hover);
+    }
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element-focus-always-visible($position: absolute, $top: 3px, $bottom: 3px);
+
+    .hds-advanced-table__th-reorder-handle__inner {
+      background-color: var(--token-color-surface-interactive);
+    }
+  }
+}
+
 .hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon {
   width: $hds-advanced-table-button-size;
   height: $hds-advanced-table-button-size;
@@ -585,14 +730,18 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
   background: linear-gradient(to right, rgba(59, 61, 69, 0%) 0%, rgba(59, 61, 69, 8%) 100%);
 }
 
-.hds-advanced-table__scroll-indicator-top {
-  height: 8px;
-  // the rgb value is equivalent to neutral/600, need to use rgba for the right opacity
-  background: linear-gradient(to top, rgba(59, 61, 69, 0%) 0%, rgba(59, 61, 69, 8%) 100%);
-}
-
 .hds-advanced-table__scroll-indicator-bottom {
   height: 8px;
   // the rgb value is equivalent to neutral/600, need to use rgba for the right opacity
   background: linear-gradient(to bottom, rgba(59, 61, 69, 0%) 0%, rgba(59, 61, 69, 8%) 100%);
 }
+
+.hds-advanced-table__th-reorder-drag-preview {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  background-color: $hds-advanced-table-drag-preview-background-color;
+  border: 5px solid var(--token-color-focus-action-external);
+  border-radius: var(--token-border-radius-medium);
+  box-shadow: var(--token-elevation-mid-box-shadow);
+}

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

@@ -83,3 +83,46 @@
     }
   }
 }
+
+// This mixin is used for the _rare_ cases where we want the focus ring to be visible when the user clicks the element (not just if they focus it with a keyboard).
+@mixin hds-focus-ring-with-pseudo-element-focus-always-visible(
+  $top: 0,
+  $right: 0,
+  $bottom: 0,
+  $left: 0,
+  $radius: 5px,
+  $color: action,
+  $position: relative
+) {
+  position: $position;
+  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;
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+
+  &::before {
+    position: absolute;
+    top: $top;
+    right: $right;
+    bottom: $bottom;
+    left: $left;
+    z-index: -1;
+    border-radius: $radius;
+    content: "";
+  }
+
+  // default focus for browsers that still rely on ":focus"
+  &:focus,
+  &.mock-focus {
+    &::before {
+      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
+    }
+  }
+
+  // remove the focus ring on "active + focused" state (by design)
+  &:focus:active,
+  &.mock-focus.mock-active {
+    &::before {
+      box-shadow: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.23.1",
+  "version": "4.24.0-rc-20250923215537",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/util": "^1.13.4",
     "@floating-ui/dom": "^1.6.12",
-    "@hashicorp/design-system-tokens": "^2.3.1",
+    "@hashicorp/design-system-tokens": "3.0.0-rc-20250923215537",
     "@hashicorp/flight-icons": "^3.13.0",
     "@lezer/highlight": "^1.2.1",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
@@ -138,11 +138,14 @@
       "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
       "./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
       "./components/hds/advanced-table/th-context-menu.js": "./dist/_app_/components/hds/advanced-table/th-context-menu.js",
+      "./components/hds/advanced-table/th-reorder-drop-target.js": "./dist/_app_/components/hds/advanced-table/th-reorder-drop-target.js",
+      "./components/hds/advanced-table/th-reorder-handle.js": "./dist/_app_/components/hds/advanced-table/th-reorder-handle.js",
       "./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
       "./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
       "./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
       "./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
       "./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
+      "./components/hds/advanced-table/utils.js": "./dist/_app_/components/hds/advanced-table/utils.js",
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert.js": "./dist/_app_/components/hds/alert.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",

package/translations/hds/components/advanced-table/en-us.yaml

@@ -0,0 +1 @@
+reordered-message: Moved {columnLabel} column to position {newPosition}

package/translations/hds/components/advanced-table/th-context-menu/en-us.yaml

@@ -1,3 +1,6 @@
+move-column: Move column
+move-column-to-start: Move column to start
+move-column-to-end: Move column to end
 resize: Resize column
 reset-width: Reset column width
 pin: Pin column

package/translations/hds/components/advanced-table/th-reorder-handle/en-us.yaml

@@ -0,0 +1,2 @@
+aria-description: Use left and right arrow keys while focused on this button to move the column to a new position.
+aria-label: "Reorder {columnLabel} column"