@hashicorp/design-system-components 3.1.1 → 3.1.2

package/CHANGELOG.md

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

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