@hashicorp/design-system-components 3.1.0 → 3.1.2

package/CHANGELOG-FIGMA-COMPONENTS.md

@@ -1,5 +1,19 @@
 # [HDS Product - Components](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?type=design&node-id=6790-10926&mode=design&t=Ps0aMGZ6F3z7bAJ4-0)
 
+## November 6th, 2023
+
+`CodeBlock` - Added new component.
+
+## November 3rd, 2023
+
+`Breadcrumb` - Updated the number of `breadcrumb / _items` to the component.
+
+## October 23rd, 2023
+
+`Button` - Updated icon only button variants to be square to match the ToggleIcon.
+
+`Dropdown / ToggleIcon` - Fixed the small variant so that it’s the correct size (28px height) to match the other small Buttons and ToggleButton.
+
 ## September 15th, 2023
 
 `IconTile` and `IconTile-Logo` - Added a new product variant for Vault Secrets.

package/CHANGELOG-FIGMA-FOUNDATIONS.md

@@ -1,2 +1,13 @@
 # [HDS Product - Foundations](https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?type=design&node-id=4728-1879&mode=design&t=vM0eNG3c9YY5rmmu-0)
 
+## November 2nd, 2023
+
+`Elevation / Mid` - Fixed style not being correctly published to consuming libraries.
+
+## October 31st, 2023
+
+`Components / Code Block / Code / 200` - Added component-specific text style for the CodeBlock.
+
+## October 20th, 2023
+
+`Components / Code Block / Syntax` - Added syntax highlighting styles used by the CodeBlock component.

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @hashicorp/design-system-components
 
+## 3.1.2
+
+### Patch Changes
+
+`AppFooter` – Fixed predefined statuses by replacing `critical` with `outage` and prevented `statusIconColor` from being overridden by `status`
+
+<small>[#1790](https://github.com/hashicorp/design-system/pull/1790)</small>
+
+---
+
+`SideNav` - Fixed visible scrollbar in collapsed SideNav when scroll bar is set to be always visible
+
+<small>[#1786](https://github.com/hashicorp/design-system/pull/1786)</small>
+
+---
+
+`CodeBlock` - Fixed `@hasLineWrapping` style to make long strings wrap when they overflow the container
+
+<small>[#1798](https://github.com/hashicorp/design-system/pull/1798)</small>
+
+---
+
+## 3.1.1
+
+### Patch Changes
+
+Added `@ember/string` as a direct dependency
+
+<small>[#1782](https://github.com/hashicorp/design-system/pull/1782)</small>
+
+---
+
+**🔄 Updated dependencies:**
+
+- @hashicorp/ember-flight-icons@4.0.3
+
 ## 3.1.0
 
 ### Minor Changes

package/addon/components/hds/app-footer/status-link.js

@@ -20,8 +20,8 @@ export const STATUSES = {
     text: 'System maintenance',
     iconName: 'alert-triangle',
   },
-  critical: {
-    text: 'System critical',
+  outage: {
+    text: 'System outage',
     iconName: 'x-circle',
   },
 };
@@ -67,18 +67,6 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
     return this.args.statusIcon;
   }
 
-  /**
-   * @param statusIconColor
-   * @type {string}
-   * @description The color for the StatusLink icon
-   */
-  get statusIconColor() {
-    if (this.status && !this.args.statusIconColor) {
-      return STATUSES[this.status].iconColor;
-    }
-    return this.args.statusIconColor;
-  }
-
   /**
    * Get the inline style to apply to the item.
    * @method StatusLink#itemStyle
@@ -123,8 +111,8 @@ export default class HdsAppFooterStatusLinkComponent extends Component {
   get classNames() {
     let classes = ['hds-app-footer__status-link'];
 
-    // add a class based on the @status argument
-    if (this.args.status) {
+    // add a class based on status if no statusIconColor is explicitly specified
+    if (this.status && !this.args.statusIconColor) {
       classes.push(`hds-app-footer__status-link--${this.status}`);
     }
 

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

@@ -62,8 +62,8 @@ $app-footer-icon-text-gap: 6px;
   .flight-icon { fill: var(--app-footer-status-link-icon-maintenance-color); }
 }
 
-.hds-app-footer__status-link--critical {
-  .flight-icon { fill: var(--app-footer-status-link-icon-critical-color); }
+.hds-app-footer__status-link--outage {
+  .flight-icon { fill: var(--app-footer-status-link-icon-outage-color); }
 }
 
 
@@ -127,7 +127,7 @@ $app-footer-icon-text-gap: 6px;
   --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success);
   --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning);
   --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning);
-  --app-footer-status-link-icon-critical-color: var(--token-color-foreground-critical);
+  --app-footer-status-link-icon-outage-color: var(--token-color-foreground-critical);
 }
 
 // Dark
@@ -150,5 +150,5 @@ $app-footer-icon-text-gap: 6px;
   --app-footer-status-link-icon-operational-color: #009241;
   --app-footer-status-link-icon-degraded-color: #e88c03;
   --app-footer-status-link-icon-maintenance-color: #e88c03;
-  --app-footer-status-link-icon-critical-color: #ef3016;
+  --app-footer-status-link-icon-outage-color: #ef3016;
 }

package/app/styles/components/code-block/index.scss

@@ -53,6 +53,7 @@ $code-block-code-padding: 16px;
   .hds-code-block__code,
   .hds-code-block__code code {
     white-space: pre-wrap;
+    overflow-wrap: break-word;
   }
 }
 

package/app/styles/components/code-block/theme.scss

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 // THEMING
 
 .hds-code-block--theme-dark {

package/app/styles/components/side-nav/content.scss

@@ -16,6 +16,14 @@
   // we use this trick (increasing the container size here, and reducing it at single panel level)
   // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
   margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);
+
+  // we hide the content when the SideNav is collapsed to prevent the vertical scrollbar from being visible
+  // when the scrollbar is set to be always visible or a mouse or trackpad force it to be always visible.
+  // ideally we would use `display: none` but doing so would disable the fade-in transition when expanding
+  .hds-side-nav--is-minimized & {
+    height: 0;
+    overflow: hidden;
+  }
 }
 
 .hds-side-nav__content-panels {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -41,9 +41,10 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.5",
+    "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@hashicorp/design-system-tokens": "^1.9.0",
-    "@hashicorp/ember-flight-icons": "^4.0.2",
+    "@hashicorp/ember-flight-icons": "^4.0.3",
     "dialog-polyfill": "^0.5.6",
     "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.3",