@hashicorp/design-system-components 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @hashicorp/design-system-components
 
+## 3.4.0
+
+### Minor Changes
+
+`Button` - Added `@isInline` argument
+
+<small class="doc-whats-new-changelog-metadata">[#1854](https://github.com/hashicorp/design-system/pull/1854)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Table` - Added support for `baseline` vertical alignment
+
+<small class="doc-whats-new-changelog-metadata">[#1861](https://github.com/hashicorp/design-system/pull/1861)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+### Patch Changes
+
+`Hds::AppFooter` - Changed visual alignment from right-aligned to centered.
+
+<small class="doc-whats-new-changelog-metadata">[#1867](https://github.com/hashicorp/design-system/pull/1867)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tooltip` - Fixed issue with text alignment, which was inherited from the parent container (now it's always left aligned).
+
+<small class="doc-whats-new-changelog-metadata">[#1869](https://github.com/hashicorp/design-system/pull/1869)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Tabs` - Fixed subcomponents' backing-class names
+
+<small class="doc-whats-new-changelog-metadata">[#1883](https://github.com/hashicorp/design-system/pull/1883)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`AppFooter` - Updated default accessibility URL to https://hashicorp.com/accessibility
+
+<small class="doc-whats-new-changelog-metadata">[#1811](https://github.com/hashicorp/design-system/pull/1811)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+`Form::Fieldset` as consumed by `Form::Checkbox::Group`, `Form::Radio::Group`, `Form::RadioCard::Group`, and `Form::Toggle::Group` - Changed spacing between `legend` and content from 4px to 8px
+
+<small class="doc-whats-new-changelog-metadata">[#1856](https://github.com/hashicorp/design-system/pull/1856)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/ember-flight-icons@4.0.5
+
 ## 3.3.0
 
 ### Minor Changes

package/addon/components/hds/app-footer/legal-links.js

@@ -60,7 +60,8 @@ export default class HdsAppFooterLegalLinksComponent extends Component {
    */
   get hrefForAccessibility() {
     return (
-      this.args.hrefForAccessibility ?? 'mailto:accessibility@hashicorp.com'
+      this.args.hrefForAccessibility ??
+      'https://www.hashicorp.com/accessibility'
     );
   }
 }

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

@@ -26,6 +26,7 @@ export interface HdsButtonSignature {
     icon?: string;
     iconPosition?: HdsButtonIconPosition;
     isIconOnly?: boolean;
+    isInline?: boolean;
     isFullWidth?: boolean;
   };
   Element: HdsInteractiveSignature['Element'];
@@ -165,9 +166,6 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
   get classNames() {
     let classes = ['hds-button'];
 
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
     // add a class based on the @color argument
     classes.push(`hds-button--color-${this.color}`);
 
@@ -176,11 +174,19 @@ export default class HdsButtonIndexComponent extends Component<HdsButtonSignatur
       classes.push('hds-button--width-full');
     }
 
-    // add a class if it's icon-only
+    // add a class based on isIconOnly argument
     if (this.isIconOnly) {
       classes.push('hds-button--is-icon-only');
     }
 
+    // add a class based on the @isInline argument
+    if (this.args.isInline) {
+      classes.push('hds-button--is-inline');
+    }
+
+    // add a class based on the @size argument
+    classes.push(`hds-button--size-${this.size}`);
+
     return classes.join(' ');
   }
 }

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

@@ -10,7 +10,7 @@ import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];
 const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle'];
+const VALIGNMENTS = ['top', 'middle', 'baseline'];
 const DEFAULT_VALIGN = 'top';
 
 export default class HdsTableIndexComponent extends Component {
@@ -116,7 +116,7 @@ export default class HdsTableIndexComponent extends Component {
    * @param valign
    * @type {string}
    * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are: "top", "middle". If no valign is defined, "top" is used.
+   * @description Determines the vertical alignment of the table cells; options are: "top", "middle", "baseline". If no valign is defined, "top" is used.
    */
   get valign() {
     let { valign = DEFAULT_VALIGN } = this.args;

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

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsPanelComponent extends Component {
   /**
    * Generate a unique ID for the Panel
    * @return {string}

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

@@ -8,7 +8,7 @@ import { cached } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 
-export default class HdsTabsIndexComponent extends Component {
+export default class HdsTabsTabComponent extends Component {
   /**
    * Generate a unique ID for the Tab
    * @return {string}

package/app/styles/components/app-footer.scss

@@ -14,7 +14,7 @@ $app-footer-icon-text-gap: 6px;
   display: flex;
   flex-wrap: wrap;
   gap: $app-footer-gap;
-  justify-content: flex-end;
+  justify-content: center;
   padding: 24px;
   color: var(--app-footer-foreground-color);
   border-top: 1px solid var(--app-footer-border-top-color);
@@ -31,7 +31,7 @@ $app-footer-icon-text-gap: 6px;
   flex-wrap: wrap;
   gap: $app-footer-gap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   width: fit-content;
   min-width: 0;
   margin: 0;

package/app/styles/components/button.scss

@@ -73,10 +73,6 @@
   text-align: center;
 }
 
-
-// SIZE
-@include hds-button-size-classes("hds-button");
-
 // COLORS & STATES
 // Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
 
@@ -96,6 +92,14 @@
   @include hds-button-color-critical();
 }
 
+// SIZE
+@include hds-button-size-classes("hds-button");
+
+// ISINLINE
+.hds-button--is-inline {
+  display: inline-flex;
+}
+
 
 // SPECIAL
 

package/app/styles/components/form/group.scss

@@ -15,7 +15,7 @@
 }
 
 .hds-form-group__legend { // notice: this is a <legend> element
-  margin: 0 0 4px 0;
+  margin: 0 0 8px 0;
   padding: 0;
 }
 

package/app/styles/components/table.scss

@@ -150,6 +150,10 @@ $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to a
   .hds-table--valign-middle & {
     vertical-align: middle;
   }
+
+  .hds-table--valign-baseline & {
+    vertical-align: baseline;
+  }
 }
 
 // TABLE CELL TEXT ALIGNMENT (LEFT IS DEFAULT)

package/app/styles/components/tooltip.scss

@@ -79,6 +79,8 @@
     // prevent this container from potentially inheriting other values
     // such as `white-space: nowrap` that would cause content overflow
     white-space: normal;
+    // we want to have the text always aligned to the left (by design
+    text-align: left;
   }
 
   // works with Tippy's custom SVG arrow variation:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -44,7 +44,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.4",
+    "@hashicorp/ember-flight-icons": "^4.0.5",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",