@hashicorp/design-system-components 2.14.2 → 2.15.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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

@@ -7,15 +7,12 @@ 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).
@@ -109,10 +106,6 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return pageSizes;
   }
 
-  get routeQueryParams() {
-    return this.router.currentRoute?.queryParams || {};
-  }
-
   buildQueryParamsObject(page, pageSize) {
     if (this.isControlled) {
       return this.args.queryFunction(page, pageSize);
@@ -162,15 +155,6 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   onPageSizeChange(newPageSize) {
     let { onPageSizeChange } = this.args;
 
-    // we need to manually update the query parameters in the route (it's not a link!)
-    if (this.isControlled) {
-      // we pass `null` as value for the `page` argument, so consumers can handle this condition accordingly (probably will just change the side of the data/array slice)
-      const queryParams = this.buildQueryParamsObject(null, newPageSize);
-      this.router.transitionTo({ queryParams });
-    } else {
-      this.currentPageSize = newPageSize;
-    }
-
     // invoke the callback function
     if (typeof onPageSizeChange === 'function') {
       onPageSizeChange(newPageSize);

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.2",
+  "version": "2.15.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",