fix(breadcrumb): fix wrap when expanding - FRONT-4558 (#3546)

* fix wrap * destroy --------- Co-authored-by: planctus <davidepuntoferrante@gmail.com>
ec-europa · Aug 7, 2024 · 91641d5 · 91641d5 · github-actions · Aug 7, 2024
1 parent cf2355d
commit 91641d5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/implementations/vanilla/components/breadcrumb/breadcrumb.js b/src/implementations/vanilla/components/breadcrumb/breadcrumb.js
@@ -124,6 +124,7 @@ export class Breadcrumb {
     }
     if (this.element) {
       this.element.removeAttribute('data-ecl-auto-initialized');
+      this.element.classList.remove('ecl-breadcrumb--wrap');
       ECL.components.delete(this.element);
     }
   }
@@ -208,6 +209,7 @@ export class Breadcrumb {
    */
   handleFullExpand() {
     this.element.classList.remove('ecl-breadcrumb--collapsed');
+    this.element.classList.add('ecl-breadcrumb--wrap');
 
     if (this.onFullExpand) {
       this.onFullExpand();

diff --git a/src/implementations/vanilla/components/breadcrumb/breadcrumb.scss b/src/implementations/vanilla/components/breadcrumb/breadcrumb.scss
@@ -50,8 +50,9 @@ $breadcrumb: null !default;
   }
 }
 
-// If the component is using js, it will always be on one line
-.ecl-breadcrumb[data-ecl-auto-initialized] .ecl-breadcrumb__container {
+// If the component is using js, it will always be on one line, until it is expanded
+.ecl-breadcrumb[data-ecl-auto-initialized]:not(.ecl-breadcrumb--wrap)
+  .ecl-breadcrumb__container {
   flex-wrap: nowrap;
 
   .ecl-breadcrumb__segment {