@hashicorp/design-system-components 4.22.0 → 4.22.1

package/dist/components/hds/advanced-table/th.js

@@ -12,7 +12,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { g, i, n } from 'decorator-transforms/runtime';
 import { setComponentTemplate } from '@ember/component';
 
-var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div\n  class={{this.classNames}}\n  role={{this.role}}\n  aria-rowspan={{@rowspan}}\n  aria-colspan={{@colspan}}\n  aria-describedby={{@parentId}}\n  {{style grid-row=this.rowspan grid-column=this.colspan padding-left=this.paddingLeft}}\n  {{hds-advanced-table-cell\n    handleEnableFocusTrap=this.enableFocusTrap\n    shouldTrapFocus=this._shouldTrapFocus\n    setCellElement=this.setElement\n  }}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap\n    isActive=this._shouldTrapFocus\n    focusTrapOptions=(hash\n      onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true\n    )\n  }}\n  ...attributes\n>\n  <Hds::Layout::Flex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    {{#if @column.isVisuallyHidden}}\n      <span class=\"sr-only\">{{yield}}</span>\n    {{else}}\n      {{#if @tooltip}}\n        <div class=\"hds-advanced-table__th-content\">\n          {{#if @isExpandable}}\n            <Hds::AdvancedTable::ThButtonExpand\n              @labelId={{this._labelId}}\n              @onToggle={{@onClickToggle}}\n              @isExpanded={{@isExpanded}}\n              @isExpandAll={{@hasExpandAllButton}}\n              {{this._manageExpandButton}}\n            />\n          {{/if}}\n          <span\n            id={{this._labelId}}\n            class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n          >\n            {{yield}}\n          </span>\n          <Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n        </div>\n      {{else}}\n        <div class=\"hds-advanced-table__th-content\">\n          {{#if @isExpandable}}\n            <Hds::AdvancedTable::ThButtonExpand\n              @labelId={{this._labelId}}\n              @onToggle={{@onClickToggle}}\n              @isExpanded={{@isExpanded}}\n              @isExpandAll={{@hasExpandAllButton}}\n              {{this._manageExpandButton}}\n            />\n          {{/if}}\n          <span\n            class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n            id={{this._labelId}}\n          >{{yield}}</span>\n        </div>\n      {{/if}}\n    {{/if}}\n\n    {{#if @column}}\n      {{#if this.showContextMenu}}\n        <Hds::AdvancedTable::ThContextMenu\n          @column={{@column}}\n          @hasResizableColumns={{@hasResizableColumns}}\n          @resizeHandleElement={{this._resizeHandleElement}}\n          @onColumnResize={{@onColumnResize}}\n        />\n      {{/if}}\n\n      {{#if (and @hasResizableColumns (not @column.isLast))}}\n        <Hds::AdvancedTable::ThResizeHandle\n          @column={{@column}}\n          @hasResizableColumns={{@hasResizableColumns}}\n          @tableHeight={{@tableHeight}}\n          @onColumnResize={{@onColumnResize}}\n          {{this._registerResizeHandleElement}}\n        />\n      {{/if}}\n    {{/if}}\n  </Hds::Layout::Flex>\n</div>");
+var TEMPLATE = precompileTemplate("{{!\n  Copyright (c) HashiCorp, Inc.\n  SPDX-License-Identifier: MPL-2.0\n}}\n<div\n  class={{this.classNames}}\n  role={{this.role}}\n  aria-rowspan={{@rowspan}}\n  aria-colspan={{@colspan}}\n  aria-describedby={{@parentId}}\n  {{style grid-row=this.rowspan grid-column=this.colspan padding-left=this.paddingLeft}}\n  {{hds-advanced-table-cell\n    handleEnableFocusTrap=this.enableFocusTrap\n    shouldTrapFocus=this._shouldTrapFocus\n    setCellElement=this.setElement\n  }}\n  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}\n  {{focus-trap\n    isActive=this._shouldTrapFocus\n    focusTrapOptions=(hash\n      onDeactivate=this.onFocusTrapDeactivate initialFocus=this.getInitialFocus clickOutsideDeactivates=true\n    )\n  }}\n  ...attributes\n>\n  <Hds::Layout::Flex @justify=\"space-between\" @align=\"center\" @gap=\"8\">\n    {{#if @column.isVisuallyHidden}}\n      <span class=\"sr-only\">{{yield}}</span>\n    {{else}}\n      {{#if @tooltip}}\n        {{#if @isExpandable}}\n          <Hds::AdvancedTable::ThButtonExpand\n            @labelId={{this._labelId}}\n            @onToggle={{@onClickToggle}}\n            @isExpanded={{@isExpanded}}\n            @isExpandAll={{@hasExpandAllButton}}\n            {{this._manageExpandButton}}\n          />\n        {{/if}}\n        <div class=\"hds-advanced-table__th-content\">\n          <span\n            id={{this._labelId}}\n            class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n          >\n            {{yield}}\n          </span>\n          <Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />\n        </div>\n      {{else}}\n        {{#if @isExpandable}}\n          <Hds::AdvancedTable::ThButtonExpand\n            @labelId={{this._labelId}}\n            @onToggle={{@onClickToggle}}\n            @isExpanded={{@isExpanded}}\n            @isExpandAll={{@hasExpandAllButton}}\n            {{this._manageExpandButton}}\n          />\n        {{/if}}\n        <div class=\"hds-advanced-table__th-content\">\n          <span\n            class=\"hds-advanced-table__th-content-text hds-typography-body-200 hds-font-weight-semibold\"\n            id={{this._labelId}}\n          >{{yield}}</span>\n        </div>\n      {{/if}}\n    {{/if}}\n\n    {{#if @column}}\n      {{#if this.showContextMenu}}\n        <Hds::AdvancedTable::ThContextMenu\n          @column={{@column}}\n          @hasResizableColumns={{@hasResizableColumns}}\n          @resizeHandleElement={{this._resizeHandleElement}}\n          @onColumnResize={{@onColumnResize}}\n        />\n      {{/if}}\n\n      {{#if (and @hasResizableColumns (not @column.isLast))}}\n        <Hds::AdvancedTable::ThResizeHandle\n          @column={{@column}}\n          @hasResizableColumns={{@hasResizableColumns}}\n          @tableHeight={{@tableHeight}}\n          @onColumnResize={{@onColumnResize}}\n          {{this._registerResizeHandleElement}}\n        />\n      {{/if}}\n    {{/if}}\n  </Hds::Layout::Flex>\n</div>");
 
 /**
  * Copyright (c) HashiCorp, Inc.

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

@@ -1126,14 +1126,14 @@
   z-index: 2;
   content: "";
 }
-.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:hover::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-hover::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.hds-advanced-table__th-resize-handle--resizing::after {
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:hover::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-hover::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.hds-advanced-table__th-resize-handle--resizing::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-active::after {
   width: 3px;
   transform: translateX(-10.5px);
 }
 .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:hover::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-hover::after {
   background-color: #b1b1b5;
 }
-.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.hds-advanced-table__th-resize-handle--resizing::after {
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle:focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-focus::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.hds-advanced-table__th-resize-handle--resizing::after, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th-resize-handle.mock-active::after {
   background-color: var(--token-color-palette-blue-300);
 }
 .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-center,
@@ -1175,7 +1175,6 @@
 }
 .hds-advanced-table__thead.hds-advanced-table__thead--has-resizable-columns .hds-advanced-table__th .hds-advanced-table__th-content-text {
   display: block;
-  width: 100%;
   min-width: 30px;
   overflow: hidden;
   white-space: nowrap;
@@ -1202,6 +1201,7 @@
 
 .hds-advanced-table__th-content {
   display: flex;
+  flex-grow: 1;
   flex-shrink: 1;
   gap: 8px;
   align-items: center;
@@ -1329,13 +1329,15 @@
 .hds-advanced-table__tbody .hds-advanced-table__tr--last-row .hds-advanced-table__td:last-child {
   border-bottom-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
-.hds-advanced-table__tbody .hds-advanced-table__th,
 .hds-advanced-table__tbody .hds-advanced-table__td {
   display: flex;
   gap: 8px;
   align-content: center;
   align-items: flex-start;
   justify-content: flex-start;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table__tbody .hds-advanced-table__td {
   height: 100%;
   font-weight: var(--token-typography-font-weight-regular);
   font-size: var(--token-typography-body-200-font-size);
@@ -1417,20 +1419,24 @@
   left: var(--hds-advanced-table-sticky-column-offset, 0);
   border-left-width: 1px;
 }
-.hds-advanced-table__tbody .hds-advanced-table__th--align-center,
 .hds-advanced-table__tbody .hds-advanced-table__td--align-center {
+  justify-content: center;
+  text-align: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center {
   text-align: center;
 }
-.hds-advanced-table__tbody .hds-advanced-table__th--align-center .hds-advanced-table__th-content,
-.hds-advanced-table__tbody .hds-advanced-table__td--align-center .hds-advanced-table__th-content {
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center .hds-advanced-table__th-content {
   justify-content: center;
 }
-.hds-advanced-table__tbody .hds-advanced-table__th--align-right,
 .hds-advanced-table__tbody .hds-advanced-table__td--align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right {
   text-align: right;
 }
-.hds-advanced-table__tbody .hds-advanced-table__th--align-right .hds-advanced-table__th-content,
-.hds-advanced-table__tbody .hds-advanced-table__td--align-right .hds-advanced-table__th-content {
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right .hds-advanced-table__th-content {
   justify-content: flex-end;
 }
 .hds-advanced-table--valign-top .hds-advanced-table__tbody .hds-advanced-table__th,
@@ -1814,7 +1820,7 @@
   z-index: 21;
   grid-area: header;
 }
-@media (height >= 480px) {
+@media (min-height: 480px) {
   .hds-app-frame__header {
     position: sticky;
     top: 0;
@@ -1831,7 +1837,7 @@
   height: 100vh;
   min-height: 100vh;
 }
-@media (height >= 480px) {
+@media (min-height: 480px) {
   .hds-app-frame--has-header-with-sidebar .hds-app-frame__sidebar {
     top: var(--token-app-header-height);
     height: calc(100vh - var(--token-app-header-height));

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

@@ -139,7 +139,8 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
       &.mock-focus::after,
       &:hover::after,
       &.mock-hover::after,
-      &.hds-advanced-table__th-resize-handle--resizing::after {
+      &.hds-advanced-table__th-resize-handle--resizing::after,
+      &.mock-active::after {
         width: 3px;
         transform: translateX(-10.5px); // (width of the handle (24px) - width of the visual handle (3px)) / 2 == 10.5px
       }
@@ -151,7 +152,8 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
 
       &:focus::after,
       &.mock-focus::after,
-      &.hds-advanced-table__th-resize-handle--resizing::after {
+      &.hds-advanced-table__th-resize-handle--resizing::after,
+      &.mock-active::after {
         background-color: var(--token-color-palette-blue-300);
       }
     }
@@ -220,7 +222,6 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
   &.hds-advanced-table__thead--has-resizable-columns {
     .hds-advanced-table__th .hds-advanced-table__th-content-text {
       display: block;
-      width: 100%;
       min-width: 30px;
       overflow: hidden;
       white-space: nowrap;
@@ -261,6 +262,7 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
 // multi-select (isSelectable=true)
 .hds-advanced-table__th-content {
   display: flex;
+  flex-grow: 1;
   flex-shrink: 1;
   gap: 8px;
   align-items: center;
@@ -394,13 +396,16 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
     }
   }
 
-  .hds-advanced-table__th,
   .hds-advanced-table__td {
     display: flex;
     gap: 8px;
     align-content: center;
     align-items: flex-start;
     justify-content: flex-start;
+  }
+
+  .hds-advanced-table__th,
+  .hds-advanced-table__td {
     height: 100%;
     font-weight: var(--token-typography-font-weight-regular);
     font-size: var(--token-typography-body-200-font-size);
@@ -468,8 +473,12 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
 
   // horizontal alignment
 
-  .hds-advanced-table__th--align-center,
   .hds-advanced-table__td--align-center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .hds-advanced-table__th--align-center {
     text-align: center;
 
     .hds-advanced-table__th-content {
@@ -477,8 +486,12 @@ $hds-advanced-table-button-size: 24px; // the size of the buttons and dropdown t
     }
   }
 
-  .hds-advanced-table__th--align-right,
   .hds-advanced-table__td--align-right {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .hds-advanced-table__th--align-right {
     text-align: right;
 
     .hds-advanced-table__th-content {

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

@@ -25,7 +25,9 @@
   grid-area: header;
 
   // Make header position sticky/fixed if the viewport height is greater than 480px
-  @media (height >= 480px) {
+  // Note: HCP in prod doesn't support newer media queries, so we use the old syntax
+  // stylelint-disable-next-line media-feature-range-notation
+  @media (min-height: 480px) {
     position: sticky;
     top: 0;
     right: 0;
@@ -42,7 +44,9 @@
   min-height: 100vh;
 
   // Modify sidenav layout when used together with fixed app-header
-  @media (height >= 480px) {
+  // Note: HCP in prod doesn't support newer media queries, so we use the old syntax
+  // stylelint-disable-next-line media-feature-range-notation
+  @media (min-height: 480px) {
     .hds-app-frame--has-header-with-sidebar & {
       top: var(--token-app-header-height);
       height: calc(100vh - var(--token-app-header-height));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",