SideNav::List::Title: wrap text of long strings (HDS-3047) (#1899)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

.changeset/few-emus-walk.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`SideNav::List::Title`, `SideNav::List::BackLink`, `SideNav::List::Link`: fixed issue with long text strings without spaces not wrapping

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

@@ -40,20 +40,18 @@
 // (LIST) TITLE
 
 .hds-side-nav__list-title {
-  display: flex;
-  align-items: center;
   min-height: var(--token-side-nav-body-list-item-height);
   margin-top: var(--token-side-nav-body-list-margin-vertical);
   padding: 9px var(--token-side-nav-body-list-item-padding-horizontal); // 8px = (min-height - body-100-line-height) / 2
   color: var(--token-side-nav-color-foreground-faint);
+  overflow-wrap: break-word;
 
   // Remove margin from title at top of all list-items & lists
   .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
     margin-top: 0;
   }
 }
 
-
 // LIST (root elements)
 
 .hds-side-nav__list-wrapper, // <nav> element
@@ -147,8 +145,11 @@
 // LIST ITEM > INNER ELEMENTS
 
 .hds-side-nav__list-item-text {
+  min-width: 0;
+  max-width: 100%;
   color: var(--token-side-nav-color-foreground-primary);
   text-align: left;
+  overflow-wrap: break-word;
 }
 
 .hds-side-nav__list-item-icon-leading {

packages/components/tests/dummy/app/components/shw/placeholder/index.js

@@ -56,6 +56,10 @@ export default class PlaceholderIndexComponent extends Component {
     if (this.args.background) {
       styles.push(`background: ${this.args.background}`);
     }
+    if (this.args.flex) {
+      styles.push(`flex: ${this.args.flex}`);
+    }
+
     return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
   }
 }

packages/components/tests/dummy/app/templates/components/side-nav.hbs

@@ -513,6 +513,14 @@
         </Hds::SideNav::List::Item>
       </ul>
     </SF.Item>
+    <SF.Item @label="With very long text and no spaces">
+      <ul class="shw-component-sim-side-nav-body">
+        <Hds::SideNav::List::Title>ThisIsLongTextThatShouldWrapToTwoLinesAndNotOverflow</Hds::SideNav::List::Title>
+        <Hds::SideNav::List::Item>
+          <Shw::Placeholder @height="108px" @text="following content" />
+        </Hds::SideNav::List::Item>
+      </ul>
+    </SF.Item>
   </Shw::Flex>
 
   <Shw::Divider @level={{2}} />
@@ -616,12 +624,12 @@
     </SG.Item>
     <SG.Item @label="Icon + text + yielded content">
       <Hds::SideNav::List::Link @icon="boundary" @text="Boundary">
-        <Shw::Placeholder @height="20px" @text="yielded content" />
+        <Shw::Placeholder @height="20px" @width="auto" @flex="1 1 0" @text="yielded content" />
       </Hds::SideNav::List::Link>
     </SG.Item>
     <SG.Item @label="With hasSubItems">
       <Hds::SideNav::List::Link @icon="boundary" @text="Boundary" @hasSubItems={{true}}>
-        <Shw::Placeholder @height="20px" @text="yielded content" />
+        <Shw::Placeholder @height="20px" @width="auto" @flex="1 1 0" @text="yielded content" />
       </Hds::SideNav::List::Link>
     </SG.Item>
     <SG.Item @label="Text with no style">
@@ -723,6 +731,11 @@
         <Hds::SideNav::List::BackLink @text="This is a long text that should go on two lines" @href="#" />
       </ul>
     </SF.Item>
+    <SF.Item @label="With very long text and no spaces">
+      <ul class="shw-component-sim-side-nav-body">
+        <Hds::SideNav::List::BackLink @text="ThisIsLongTextThatShouldWrapToTwoLinesAndNotOverflow" @href="#" />
+      </ul>
+    </SF.Item>
   </Shw::Flex>
 
   <Shw::Text::H4>States</Shw::Text::H4>