@hashicorp/design-system-components 2.14.1 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @hashicorp/design-system-components
 
+## 2.15.0
+
+### Minor Changes
+
+- [#1690](https://github.com/hashicorp/design-system/pull/1690) [`33df4e25e`](https://github.com/hashicorp/design-system/commit/33df4e25e7bff4dabbba3744128449e2b99d4911) Thanks [@didoo](https://github.com/didoo)! - `Button` - updated horizontal padding of icon-only variant
+  `Dropdown::ToggleIcon` - updated sizing of the "small" variant to match the height of the "small" variant `Button`
+
+### Patch Changes
+
+- [#1736](https://github.com/hashicorp/design-system/pull/1736) [`541d22442`](https://github.com/hashicorp/design-system/commit/541d22442396d33850a68a61e2781094df1b121a) Thanks [@didoo](https://github.com/didoo)! - `Pagination` - Removed handling of query parameters from `onPageSizeChange` function.
+
+  _Notice: while technically this is a breaking change, we consider this a fast-follow fix for the previous release._
+
+## 2.14.2
+
+### Patch Changes
+
+- [#1724](https://github.com/hashicorp/design-system/pull/1724) [`65ebe6dde`](https://github.com/hashicorp/design-system/commit/65ebe6ddeb477ebc74ad6db353aaf19e1dfb06b1) Thanks [@didoo](https://github.com/didoo)! - `Pagination` - updated the logic for “Compact” variant to expose `@currentPageSize` and handle controlled/uncontrolled changes
+
+- [#1716](https://github.com/hashicorp/design-system/pull/1716) [`cde67bc7f`](https://github.com/hashicorp/design-system/commit/cde67bc7fc32c1025ddd22de6d0f9baeabf43961) Thanks [@didoo](https://github.com/didoo)! - `Tabs` - replace `assert` with `warn` in `setIndicator` function
+
 ## 2.14.1
 
 ### Patch Changes

package/addon/components/hds/button/index.js

@@ -158,6 +158,11 @@ export default class HdsButtonIndexComponent extends Component {
       classes.push('hds-button--width-full');
     }
 
+    // add a class if it's icon-only
+    if (this.isIconOnly) {
+      classes.push('hds-button--is-icon-only');
+    }
+
     return classes.join(' ');
   }
 }

package/addon/components/hds/pagination/compact/index.js

@@ -4,17 +4,27 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { inject as service } from '@ember/service';
 
 // for context about the decision to use these values, see:
 // https://hashicorp.slack.com/archives/C03A0N1QK8S/p1673546329082759
 export const DEFAULT_PAGE_SIZES = [10, 30, 50];
 
 export default class HdsPaginationCompactIndexComponent extends Component {
-  @service router;
-
+  // This private variable is used to differentiate between
+  // "uncontrolled" component (where the state is handled internally) and
+  // "controlled" component (where the state is handled externally, by the consumer's code).
+  // In the first case, the variable stores the internal state of the component at any moment,
+  // and its value is updated internally according to the user's interaction with the component.
+  // In the second case, the variable stores *only* the initial state of the component (coming from the arguments)
+  // at rendering time, but from that moment on it's not updated anymore, no matter what interaction the user
+  // has with the component (the state is controlled externally, eg. via query parameters)
+  @tracked _currentPageSize = this.args.currentPageSize ?? this.pageSizes[0];
+  @tracked isControlled;
+
+  showLabels = this.args.showLabels ?? true; // if the labels for the "prev/next" controls are visible
   showSizeSelector = this.args.showSizeSelector ?? false; // if the "size selector" block is visible
 
   constructor() {
@@ -31,28 +41,16 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     // initialized and updated using the arguments passed to it.
 
     if (queryFunction === undefined) {
-      this.hasRouting = false;
+      this.isControlled = false;
     } else {
       assert(
         '@queryFunction for "Hds::Pagination::Numbered" must be a function',
         typeof queryFunction === 'function'
       );
-      this.hasRouting = true;
+      this.isControlled = true;
     }
   }
 
-  /**
-   * @param showLabels
-   * @type {boolean}
-   * @default true
-   * @description Show the labels for the "prev/next" controls
-   */
-  get showLabels() {
-    let { showLabels = true } = this.args;
-
-    return showLabels;
-  }
-
   /**
    * @param ariaLabel
    * @type {string}
@@ -62,6 +60,35 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return this.args.ariaLabel ?? 'Pagination';
   }
 
+  // This very specific `get/set` pattern is used to handle the two different use cases of the component
+  // being "controlled" (when it has routing, meaning it needs to support pagination controls as links/`LinkTo`)
+  // vs being "uncontrolled" (see comments above for details).
+  //
+  // If it has routing (and so it's "controlled"), than the value ("state") of the `currentPageSize` variable
+  // is *always* determined by the controller via arguments (most of the times, connected to query parameters in the URL).
+  // For this reason the "get" method always returns the value from the `args`,
+  // while the "set" method never updates the private internal state (_variable).
+  //
+  // If instead it doesn't have routing (and so it's "uncontrolled") than the value ("state") of the `currentPageSize` variables
+  // is *always* determined by the component's internal logic (and updated according to the user interaction with it).
+  // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
+
+  get currentPageSize() {
+    if (this.isControlled) {
+      return this.args.currentPageSize;
+    } else {
+      return this._currentPageSize;
+    }
+  }
+
+  set currentPageSize(value) {
+    if (this.isControlled) {
+      // noop
+    } else {
+      this._currentPageSize = value;
+    }
+  }
+
   /**
    * @param pageSizes
    * @type {array of numbers}
@@ -79,13 +106,9 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return pageSizes;
   }
 
-  get routeQueryParams() {
-    return this.router.currentRoute?.queryParams || {};
-  }
-
-  buildQueryParamsObject(page) {
-    if (this.hasRouting) {
-      return this.args.queryFunction(page, this.currentPage);
+  buildQueryParamsObject(page, pageSize) {
+    if (this.isControlled) {
+      return this.args.queryFunction(page, pageSize);
     } else {
       return {};
     }
@@ -100,9 +123,15 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     };
 
     // the "query" is dynamic and needs to be calculated
-    if (this.hasRouting) {
-      routing.queryPrev = this.buildQueryParamsObject('prev');
-      routing.queryNext = this.buildQueryParamsObject('next');
+    if (this.isControlled) {
+      routing.queryPrev = this.buildQueryParamsObject(
+        'prev',
+        this.currentPageSize
+      );
+      routing.queryNext = this.buildQueryParamsObject(
+        'next',
+        this.currentPageSize
+      );
     } else {
       routing.queryPrev = undefined;
       routing.queryNext = undefined;
@@ -121,4 +150,14 @@ export default class HdsPaginationCompactIndexComponent extends Component {
       onPageChange(newPage);
     }
   }
+
+  @action
+  onPageSizeChange(newPageSize) {
+    let { onPageSizeChange } = this.args;
+
+    // invoke the callback function
+    if (typeof onPageSizeChange === 'function') {
+      onPageSizeChange(newPageSize);
+    }
+  }
 }

package/addon/components/hds/pagination/numbered/index.js

@@ -85,6 +85,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   // has with the component (the state is controlled externally, eg. via query parameters)
   @tracked _currentPage = this.args.currentPage ?? 1;
   @tracked _currentPageSize = this.args.currentPageSize ?? this.pageSizes[0];
+  @tracked isControlled;
 
   showInfo = this.args.showInfo ?? true; // if the "info" block is visible
   showLabels = this.args.showLabels ?? false; // if the labels for the "prev/next" controls are visible
@@ -107,7 +108,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     // initialized and updated using the arguments passed to it.
 
     if (queryFunction === undefined) {
-      this.hasRouting = false;
+      this.isControlled = false;
     } else {
       assert(
         '@queryFunction for "Hds::Pagination::Numbered" must be a function',
@@ -118,7 +119,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
         typeof this.args.currentPageSize === 'number' &&
           typeof this.args.currentPage === 'number'
       );
-      this.hasRouting = true;
+      this.isControlled = true;
     }
 
     assert(
@@ -137,7 +138,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   // This very specific `get/set` pattern is used to handle the two different use cases of the component
-  // being "controlled" (when it has routing, meaning it needs to support links as controls)
+  // being "controlled" (when it has routing, meaning it needs to support pagination controls as links/`LinkTo`)
   // vs being "uncontrolled" (see comments above for details).
   //
   // If it has routing (and so it's "controlled"), than the value ("state") of the `currentPage/currentPageSize` variables
@@ -150,7 +151,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
 
   get currentPage() {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.currentPage;
     } else {
       return this._currentPage;
@@ -158,7 +159,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   set currentPage(value) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       // noop
     } else {
       this._currentPage = value;
@@ -166,7 +167,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   get currentPageSize() {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.currentPageSize;
     } else {
       return this._currentPageSize;
@@ -174,7 +175,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   set currentPageSize(value) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       // noop
     } else {
       this._currentPageSize = value;
@@ -242,7 +243,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
   }
 
   buildQueryParamsObject(page, pageSize) {
-    if (this.hasRouting) {
+    if (this.isControlled) {
       return this.args.queryFunction(page, pageSize);
     } else {
       return {};
@@ -258,7 +259,7 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     };
 
     // the "query" is dynamic and needs to be calculated
-    if (this.hasRouting) {
+    if (this.isControlled) {
       routing.queryPrev = this.buildQueryParamsObject(
         this.currentPage - 1,
         this.currentPageSize
@@ -323,10 +324,9 @@ export default class HdsPaginationNumberedIndexComponent extends Component {
     let { onPageSizeChange } = this.args;
 
     // we need to manually update the query parameters in the route (it's not a link!)
-    // notice: we agreed to reset the pagination to the first element (any alternative would result in an unpredictable UX)
-    if (this.hasRouting) {
-      let queryParams = Object.assign({}, this.routeQueryParams);
-      queryParams = this.buildQueryParamsObject(1, newPageSize);
+    if (this.isControlled) {
+      // notice: we agreed to reset the pagination to the first element (any alternative would result in an unpredictable UX)
+      const queryParams = this.buildQueryParamsObject(1, newPageSize);
       this.router.transitionTo({ queryParams });
     } else {
       this.currentPage = 1;

package/addon/components/hds/tabs/index.js

@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
+import { assert, warn } from '@ember/debug';
 import { next, schedule } from '@ember/runloop';
 
 export default class HdsTabsIndexComponent extends Component {
@@ -188,13 +188,23 @@ export default class HdsTabsIndexComponent extends Component {
           );
         }
       } else {
-        assert(
-          `"Hds::Tabs" has tried to set the indicator for an element that doesn't exist (the value ${
+        let message;
+        message +=
+          '"Hds::Tabs" has tried to set the indicator for an element that doesn\'t exist';
+        if (this.tabNodes.length === 0) {
+          message +=
+            ' (the array `this.tabNodes` is empty, there are no tabs, probably already destroyed)';
+        } else {
+          message += ` (the value ${
             this.selectedTabIndex
-          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0-${
+          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0 - ${
             this.tabNodes.length - 1
-          }])`
-        );
+          }])`;
+        }
+        // https://api.emberjs.com/ember/5.3/classes/@ember%2Fdebug/methods/warn?anchor=warn
+        warn(message, true, {
+          id: 'hds-debug.tabs.setTabIndicator-tabElem-not-available',
+        });
       }
     });
   }

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;
   }
 }

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/package.json

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