@qhealth-design-system/core 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.8.1 - 2024-08-15
+
 ## 1.8.0 - 2024-08-13
 
 ## 1.7.5 - 2024-07-03

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "",
   "licence": "MIT",
   "main": "index.js",

package/src/components/breadcrumbs/css/component.scss

@@ -63,7 +63,7 @@
             margin: 0; //Intentionally flush with the container, as breadcrumbs are designed to sit on a full viewport width bg.
             display: none;
             @include QLD-space(padding, 0.25unit 0);
-
+            flex-shrink: 0;
             a {
                 @include QLD-underline('light','underline','default','noVisited');
                 color: var(--QLD-color-light__link);
@@ -94,7 +94,7 @@
             &:last-child {
                 display: flex;
                 flex-grow: 1;
-                overflow: hidden;
+                // overflow: hidden;
                 white-space: wrap;
                 text-overflow: ellipsis;
                 flex: 1 1 auto; 
@@ -187,11 +187,10 @@
     @include QLD-media(md) {
         @include QLD-space(margin, 0 0 1rem);
         display: inline-block;
-
         > .qld__link-list > li {
 
             flex: 0 0 auto;
-            
+            flex-shrink: 0;
             // Hide current page
             &:last-child {
                 display: none;
@@ -208,7 +207,7 @@
 
         > .qld__link-list > li {
             display: inline-block;
-
+            flex-shrink: 0;
             &:last-child {
                 display: inline-block;
             }

package/src/components/breadcrumbs/js/global.js

@@ -36,6 +36,7 @@
                 
                 const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/\D/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/\D/g, ''));
                 bannerBreadCrumb.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px';
+                
     
                 // console.log('here is the containerFluid.offsetWidth ', paddings , ' here is the containerFluid.offsetWidth ', bannerBreadCrumb)
                 
@@ -48,7 +49,8 @@
                 }
     
                 const breadCrumbsUl = bannerBreadCrumb.querySelector("ul.qld__link-list");
-    
+                breadCrumbsUl.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px';
+
                 return {
                     bannerBreadCrumb,
                     breadCrumbsUl,
@@ -142,12 +144,17 @@
 
         return overFlowWrapper;
     }
+
+    function truncateLastLi(breadCrumbsUlLis) {
+        breadCrumbsUlLis[breadCrumbsUlLis.length - 1].style.overflow = "hidden";
+    }
     
-    function appendOverflow( breadCrumbsUlLis, overflowMenu) {
+    function appendOverflow( breadCrumbsUlLis, overflowMenu, breadcrumbUL) {
         breadCrumbsUlLis[1].innerHTML = "";
         breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
         breadCrumbsUlLis[1].appendChild(overflowMenu);
         breadCrumbsUlLis[1].style.display = "flex";
+        truncateLastLi(breadCrumbsUlLis, breadcrumbUL);
     }
 
     breadcrumb.init = function () {
@@ -172,7 +179,7 @@
 
                     insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
                     breadCrumbsUlLis[1].style.display = "none";
-                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
                     i = 2;
 
                     while(i < breadCrumbsUlLis.length - 2) {
@@ -185,7 +192,7 @@
 
                     insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
                     breadCrumbsUlLis[1].style.display = "none";
-                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
                     i = 2;
 
                     while ((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9)) &&
@@ -201,7 +208,7 @@
 
                     insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
                     breadCrumbsUlLis[1].style.display = "none";
-                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
                     i = 2;
 
                     while ((breadCrumbsUl.offsetWidth < totalLisOffsetWidth) &&