@hashicorp/design-system-components 5.0.0 → 5.1.0-rc-20251125151324

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

@@ -36,6 +36,7 @@
 @use "../components/disclosure-primitive";
 @use "../components/dismiss-button";
 @use "../components/dropdown";
+@use "../components/filter-bar";
 @use "../components/flyout";
 @use "../components/form"; // multiple components
 @use "../components/icon";

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

@@ -415,7 +415,8 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   }
 }
 
-.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon {
+.hds-advanced-table__th-context-menu .hds-dropdown-toggle-icon,
+.hds-advanced-table__th-filter-menu .hds-dropdown-toggle-icon {
   width: $hds-advanced-table-button-size;
   height: $hds-advanced-table-button-size;
   margin: -2px 0;
@@ -504,6 +505,25 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   align-self: flex-start;
 }
 
+.hds-advanced-table__th-filter-menu--active {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--token-color-foreground-action);
+    border-radius: 50%;
+    content: "";
+  }
+}
+
+.hds-advanced-table__clear-filters-button {
+  margin-bottom: 16px;
+}
+
 // ----------------------------------------------------------------
 
 // TABLE BODY
@@ -745,3 +765,49 @@ $hds-advanced-table-drag-preview-background-color: rgba(204, 227, 254, 30%);
   border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-elevation-mid-box-shadow);
 }
+
+// ----------------------------------------------------------------
+
+// FILTER BAR
+.hds-advanced-table__actions .hds-filter-bar {
+  border-bottom: none;
+  border-radius: $hds-advanced-table-border-radius $hds-advanced-table-border-radius 0 0;
+}
+
+.hds-advanced-table__actions + .hds-advanced-table__container {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+
+  .hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th {
+    &:first-child {
+      border-top-left-radius: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: 0;
+    }
+  }
+}
+
+/// ----------------------------------------------------------------
+
+// EMPTY STATE
+.hds-advanced-table__empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  background-color: var(--token-color-surface-primary);
+  border: 1px solid var(--token-color-border-primary);
+  border-bottom-right-radius: $hds-advanced-table-border-radius;
+  border-bottom-left-radius: $hds-advanced-table-border-radius;
+}
+
+.hds-advanced-table__empty-state__content {
+  max-width: 450px;
+}
+
+.hds-advanced-table:not(:has(+ .hds-advanced-table__empty-state)) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}

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

@@ -106,16 +106,13 @@
   }
 
   // Dropdown & Button color theming overrides
+  // Note: We need to apply dark theme styles to .hds-dropdown-toggle-button & .hds-dropdown-toggle-icon
+  // so we use a partial classname selector to cover both cases
+
   .hds-button,
-  .hds-dropdown-toggle-button,
-  .hds-dropdown-toggle-icon {
-    // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(
-      .hds-dropdown * *,
-      .ember-basic-dropdown-trigger * *,
-      .ember-basic-dropdown-content * *,
-      .hds-dialog-primitive__wrapper *
-    ) {
+  button[class*="hds-dropdown-toggle"] {
+    // Apply dark theme to child interactive components not within a nested content container
+    &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
       @include hds-interactive-dark-theme();
 
       // disabled state:

package/dist/styles/components/filter-bar.scss

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// FILTER BAR
+//
+
+.hds-filter-bar {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  background-color: var(--token-color-surface-faint);
+  border: 1px solid var(--token-color-border-primary);
+  border-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: end;
+  padding-top: 8px;
+  border-top: 1px solid var(--token-color-border-primary);
+}
+
+.hds-filter-bar__actions__right {
+  margin-left: auto;
+}
+
+.hds-filter-bar__search {
+  --token-form-control-padding: 3px;
+}
+
+// FILTER BAR > DROPDOWN
+
+.hds-filter-bar__dropdown .hds-dropdown__list,
+.hds-filter-bar__dropdown .hds-dropdown-list-item {
+  padding: 0;
+}
+
+// FILTER BAR > TABS
+
+.hds-filter-bar__tabs {
+  display: flex;
+}
+
+.hds-filter-bar__tabs__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 50%;
+  padding: 8px;
+  list-style: none;
+  background-color: var(--token-color-surface-faint);
+  border-right: 1px solid var(--token-color-border-primary);
+  border-top-left-radius: var(--token-border-radius-medium);
+}
+
+.hds-filter-bar__tabs__tab__button {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+  color: var(--token-color-foreground-primary);
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--token-border-radius-small);
+
+  &.mock-hover,
+  &:hover {
+    background-color: var(--token-color-surface-interactive-hover);
+    cursor: pointer;
+  }
+
+  &.mock-active,
+  &:active {
+    background-color: var(--token-color-surface-interactive-active);
+  }
+}
+
+.hds-filter-bar__tabs__tab__text {
+  width: 100%;
+}
+
+.hds-filter-bar__tabs__tab--is-selected .hds-filter-bar__tabs__tab__button {
+  color: var(--token-color-foreground-action);
+  background-color: var(--token-color-surface-strong);
+
+  &.mock-hover,
+  &:hover {
+    background-color: var(--token-color-palette-neutral-200);
+  }
+
+  &.mock-active,
+  &:active {
+    background-color: var(--token-color-palette-neutral-300);
+  }
+}
+
+.hds-filter-bar__tabs__panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 50%;
+  padding: 16px 0;
+  background-color: var(--token-color-surface-primary);
+  border-top-right-radius: var(--token-border-radius-medium);
+}
+
+// FILTER BAR > FILTER GROUP
+
+.hds-filter-bar__filter-group .hds-form-field--layout-flag {
+  padding: 8px 12px;
+}
+
+.hds-filter-bar__filter-group__search {
+  padding: 0 16px 16px 16px;
+  border-bottom: 1px solid var(--token-color-border-primary);
+}
+
+.hds-filter-bar__filter-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  overscroll-behavior: contain;
+}
+
+.hds-filter-bar__filter-group__fields {
+  padding: 0 16px;
+
+  .hds-filter-bar__filter-group__field,
+  .hds-filter-bar__filter-group__field[type="date"],
+  .hds-filter-bar__filter-group__field[type="time"] {
+    width: 100%;
+  }
+}
+
+.hds-filter-bar__filter-group__numerical,
+.hds-filter-bar__filter-group__date {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hds-filter-bar__filter-group__selection-option {
+  display: block;
+  padding: 8px 16px;
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.hds-filter-bar__filter-group__clear {
+  padding: 4px;
+}

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

@@ -69,21 +69,13 @@
 }
 
 // Dropdown & Button color theming overrides
-.hds-side-nav__dropdown, // deprecated classname
-.hds-side-nav,
-.hds-side-nav-header {
+
+.hds-side-nav {
   .hds-button,
-  .hds-dropdown-toggle-button,
-  .hds-dropdown-toggle-icon {
+  button[class*="hds-dropdown-toggle"] {
     // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(
-      .hds-dropdown * *,
-      .ember-basic-dropdown-trigger * *,
-      .ember-basic-dropdown-content * *,
-      .hds-dialog-primitive__wrapper *
-    ) {
+    &:not(.hds-dropdown__content *, .ember-basic-dropdown-content *, .hds-dialog-primitive__wrapper *) {
       @include hds-interactive-dark-theme();
-
       // disabled state:
       &:disabled,
       &[disabled],

package/dist/styles/mixins/_interactive-dark-theme.scss

@@ -61,11 +61,14 @@ $hds-interactive-dark-theme-focus-ring-action-box-shadow:
   &.mock-focus {
     @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
 
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-neutral-700);
+    // See: https://sass-lang.com/d/mixed-decls
+    & {
+      color: var(--token-color-foreground-high-contrast);
+      background-color: var(--token-color-palette-neutral-700);
 
-    @if ($add-visible-border) {
-      border-color: $hds-interactive-dark-theme-color-focus-action-internal;
+      @if ($add-visible-border) {
+        border-color: $hds-interactive-dark-theme-color-focus-action-internal;
+      }
     }
 
     // focus ring:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "5.0.0",
+  "version": "5.1.0-rc-20251125151324",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -219,6 +219,17 @@
       "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
       "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
       "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
+      "./components/hds/filter-bar/dropdown.js": "./dist/_app_/components/hds/filter-bar/dropdown.js",
+      "./components/hds/filter-bar/filter-group/checkbox.js": "./dist/_app_/components/hds/filter-bar/filter-group/checkbox.js",
+      "./components/hds/filter-bar/filter-group/date.js": "./dist/_app_/components/hds/filter-bar/filter-group/date.js",
+      "./components/hds/filter-bar/filter-group/generic.js": "./dist/_app_/components/hds/filter-bar/filter-group/generic.js",
+      "./components/hds/filter-bar/filter-group.js": "./dist/_app_/components/hds/filter-bar/filter-group.js",
+      "./components/hds/filter-bar/filter-group/numerical.js": "./dist/_app_/components/hds/filter-bar/filter-group/numerical.js",
+      "./components/hds/filter-bar/filter-group/radio.js": "./dist/_app_/components/hds/filter-bar/filter-group/radio.js",
+      "./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
+      "./components/hds/filter-bar/tabs.js": "./dist/_app_/components/hds/filter-bar/tabs.js",
+      "./components/hds/filter-bar/tabs/panel.js": "./dist/_app_/components/hds/filter-bar/tabs/panel.js",
+      "./components/hds/filter-bar/tabs/tab.js": "./dist/_app_/components/hds/filter-bar/tabs/tab.js",
       "./components/hds/flyout.js": "./dist/_app_/components/hds/flyout.js",
       "./components/hds/form/character-count.js": "./dist/_app_/components/hds/form/character-count.js",
       "./components/hds/form/checkbox/base.js": "./dist/_app_/components/hds/form/checkbox/base.js",

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

@@ -1 +1,4 @@
 reordered-message: Moved {columnLabel} column to position {newPosition}
+empty-state:
+  title: No data available
+  description: There is currently no data to display in the table.

package/translations/hds/components/filter-bar/date/en-us.yaml

@@ -0,0 +1,18 @@
+date:
+  label: Date is
+datetime:
+  label: Datetime is
+time:
+  label: Time is
+selector-input:
+  default-value: Pick a selector
+  before: Before
+  exactly: Exactly
+  after: After
+  between: Between
+value-input:
+  placeholder: Enter a date
+between-value-inputs:
+  start-placeholder: Start
+  end-placeholder: End
+clear: Clear filter

package/translations/hds/components/filter-bar/en-us.yaml

@@ -0,0 +1,9 @@
+search:
+  aria-label: Search filters
+  placeholder: Search
+filter-text:
+  numerical-filter:
+    separator: and
+  date-filter:
+    separator: and
+no-filters-applied: No filters applied

package/translations/hds/components/filter-bar/filter-group/en-us.yaml

@@ -0,0 +1 @@
+clear: Clear selection

package/translations/hds/components/filter-bar/filter-group/numerical/en-us.yaml

@@ -0,0 +1,15 @@
+label: Number is
+selector-input:
+  default-value: Pick a selector
+  less-than: Less than (<)
+  less-than-or-equal-to: Less than or equal to (≤)
+  equal-to: Equal to (=)
+  greater-than-or-equal-to: Greater than or equal to (≥)
+  greater-than: Greater than (>)
+  between: Between
+value-input:
+  placeholder: Enter a value
+between-value-inputs:
+  start-placeholder: Start
+  end-placeholder: End
+clear: Clear filter

package/translations/hds/components/filter-bar/filter-options/en-us.yaml

@@ -0,0 +1 @@
+search-input-placeholder: "Search"

package/translations/hds/components/filter-bar/filters-dropdown/en-us.yaml

@@ -0,0 +1,7 @@
+apply: Apply filters
+clear: Clear all filters
+expand-collapse-button:
+  expand: Expand filters
+  collapse: Collapse filters
+selected-filters: Filters selected
+toggle-button: Filters