@hashicorp/design-system-components 0.4.0 → 0.5.0

package/CHANGELOG.md

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

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

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