From 6a903efb03ae4842e4b160687a73279a300d844c Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Wed, 24 Jan 2024 10:28:45 -0800
Subject: [PATCH] `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                     |  5 +++++
 .../app/styles/components/side-nav/content.scss |  7 ++++---
 .../app/components/shw/placeholder/index.js     |  4 ++++
 .../dummy/app/templates/components/side-nav.hbs | 17 +++++++++++++++--
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/few-emus-walk.md

diff --git a/.changeset/few-emus-walk.md b/.changeset/few-emus-walk.md
new file mode 100644
index 0000000000..aea6048dd0
--- /dev/null
+++ b/.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
diff --git a/packages/components/app/styles/components/side-nav/content.scss b/packages/components/app/styles/components/side-nav/content.scss
index e49e3a63bc..640f5cc329 100644
--- a/packages/components/app/styles/components/side-nav/content.scss
+++ b/packages/components/app/styles/components/side-nav/content.scss
@@ -40,12 +40,11 @@
 // (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 > & {
@@ -53,7 +52,6 @@
   }
 }
 
-
 // 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 {
diff --git a/packages/components/tests/dummy/app/components/shw/placeholder/index.js b/packages/components/tests/dummy/app/components/shw/placeholder/index.js
index ab88602346..0c866b7321 100644
--- a/packages/components/tests/dummy/app/components/shw/placeholder/index.js
+++ b/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;
   }
 }
diff --git a/packages/components/tests/dummy/app/templates/components/side-nav.hbs b/packages/components/tests/dummy/app/templates/components/side-nav.hbs
index bc6c9c8f3a..9360b2c73f 100644
--- a/packages/components/tests/dummy/app/templates/components/side-nav.hbs
+++ b/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>