@hashicorp/design-system-components 0.3.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @hashicorp/design-system-components
 
+## 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
+
+- [#112](https://github.com/hashicorp/design-system/pull/112) [`2be08081`](https://github.com/hashicorp/design-system/commit/2be08081582dd7e9c092fdb35c94c063d5ee7f4e) Thanks [@didoo](https://github.com/didoo)! - added missing helpers for “color” and “typography” in “components” package
+
 ## 0.3.1
 
 ### Patch Changes

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

@@ -1,12 +1,4 @@
-<nav
-  class={{this.classNames}}
-  {{!
-    TODO: should this string be localized, like in Structure? https://github.com/hashicorp/structure/blob/dffbb0e0ae5246d3b832586ab25bcb981a052b30/packages/pds-ember/addon/components/pds/breadcrumbs/index.hbs#L3
-    (in which case, we need to expose a prop? or start to have localization in the HDS system?)
-  }}
-  aria-label="breadcrumbs"
-  ...attributes
->
+<nav class={{this.classNames}} aria-label="breadcrumbs" ...attributes>
   <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
     {{yield}}
   </ol>

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/@hashicorp/design-system-components.scss

@@ -1,7 +1,9 @@
 // these are files coming from the 'design-system-tokens' package
 @use "tokens";
+@use "helpers/color";
 @use "helpers/elevation";
 @use "helpers/focus-ring";
+@use "helpers/typography";
 
 @use "../components/badge";
 @use "../components/badge-count";

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.1",
+  "version": "0.5.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",