@hashicorp/design-system-components 0.3.2 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @hashicorp/design-system-components
 
+## 0.5.1
+
+### Patch Changes
+
+- [#133](https://github.com/hashicorp/design-system/pull/133) [`6ed18c7f`](https://github.com/hashicorp/design-system/commit/6ed18c7f9bf211141ac38005e6bd3aea2dbbf1c7) Thanks [@didoo](https://github.com/didoo)! - small change to the “noop“ guard in the “@didInsert“ method of the “Disclosure“ component
+
+## 0.5.0
+
+### Minor Changes
+
+- [#127](https://github.com/hashicorp/design-system/pull/127) [`fa13190f`](https://github.com/hashicorp/design-system/commit/fa13190f1058f172898221aa1e1913965bfa53e9) Thanks [@didoo](https://github.com/didoo)! - removed the “isDisabled“ prop from the “Button” component; added instructions for developers to manually add it themselves if needed.
+
+### Patch Changes
+
+- [#125](https://github.com/hashicorp/design-system/pull/125) [`b0ff180c`](https://github.com/hashicorp/design-system/commit/b0ff180c85ff920e704d46c9b823b3fa261b1b1e) Thanks [@didoo](https://github.com/didoo)! - updated border radius of “Badge” from 4px to 5px
+
+* [#126](https://github.com/hashicorp/design-system/pull/126) [`7b639915`](https://github.com/hashicorp/design-system/commit/7b63991586b242973bad45c6108c447453772d0a) Thanks [@didoo](https://github.com/didoo)! - updated the internal padding of the “Button” component to match design specifications
+
+## 0.4.0
+
+### Minor Changes
+
+- [#117](https://github.com/hashicorp/design-system/pull/117) [`e78f6df8`](https://github.com/hashicorp/design-system/commit/e78f6df8f7488f9f97e8de2a5dc3464b2a390725) Thanks [@didoo](https://github.com/didoo)! - added a stacking context for the “Button” component so that the focus z-index is isolated in the button
+
 ## 0.3.2
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-const noop = () => {};
+const NOOP = () => {};
 
 export default class HdsBreadcrumbComponent extends Component {
   /**
@@ -9,8 +9,13 @@ export default class HdsBreadcrumbComponent extends Component {
    * @default () => {}
    */
   get didInsert() {
-    // TODO discuss with Matthew if this is the right way to create a guard for this method
-    return this.args.didInsert ?? noop;
+    let { didInsert } = this.args;
+
+    if (typeof didInsert === 'function') {
+      return didInsert;
+    } else {
+      return NOOP;
+    }
   }
 
   /**

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

@@ -1,10 +1,4 @@
-<button
-  class={{this.classNames}}
-  ...attributes
-  aria-label={{if this.isIconOnly this.text null}}
-  type={{this.type}}
-  disabled={{if this.isDisabled "disabled" null}}
->
+<button class={{this.classNames}} ...attributes aria-label={{if this.isIconOnly this.text null}} type={{this.type}}>
   {{#if this.isIconOnly}}
     <div class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />

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

@@ -155,16 +155,6 @@ export default class HdsButtonIndexComponent extends Component {
     return this.args.isFullWidth ?? false;
   }
 
-  /**
-   * @param isDisabled
-   * @type {boolean}
-   * @default null
-   * @description Sets the native HTML attribute `disabled` on the button element. Default is null (doesn't render the attribute).
-   */
-  get isDisabled() {
-    return this.args.isDisabled ?? null;
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method Button#classNames

package/app/styles/components/badge.scss

@@ -14,7 +14,7 @@
 
 .hds-badge {
   align-items: center;
-  border-radius: 4px;
+  border-radius: 5px;
   border: $hds-badge-border-width solid transparent;
   box-sizing: border-box;
   display: inline-flex;

package/app/styles/components/button.scss

@@ -21,6 +21,7 @@ $hds-button-focus-border-width: 3px;
   box-sizing: border-box; // TODO https://github.com/hashicorp/design-system-components/issues/46
   display: flex;
   font-family: var(--token-typography-font-stack-text);
+  isolation: isolate;
   justify-content: center;
   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; // We need this to be transparent for a11y
@@ -98,23 +99,23 @@ $hds-button-focus-border-width: 3px;
 $size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px;
-    "line-height": 1,
+    "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 1rem, // 0 16px
+    "padding": 0.375rem 0.6875rem, // 6px 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.625rem 1rem, // 10px 16px
+      "padding": 0.5625rem 0.9375rem, // 9px 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.75rem 1.25rem, // 12px 20px
+      "padding": 0.6875rem 1.1875rem, // 11px 19px - here we're taking into account the 1px border
       "icon-size": 1.5rem, // 24px
   )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.3.2",
+  "version": "0.5.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",