From 6d249498f4e1f9d29fab34c4af430a423fa00386 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Mar 2022 09:28:11 +0100
Subject: [PATCH] MOBILE-3814 collapsible: Change height var name to avoid
 confusion

---
 src/core/directives/collapsible-item.ts    |  6 +++---
 src/theme/components/collapsible-item.scss | 10 +++++-----
 src/theme/components/format-text.scss      |  4 +++-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
index 86acabe5f..e0c9b15b9 100644
--- a/src/core/directives/collapsible-item.ts
+++ b/src/core/directives/collapsible-item.ts
@@ -176,11 +176,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
      */
     protected setHeight(height?: number): void {
         if (height) {
-            this.element.style.setProperty('--height', height + 'px');
+            this.element.style.setProperty('--collapsible-height', height + 'px');
         } else if (this.expandedHeight) {
-            this.element.style.setProperty('--height', this.expandedHeight + 'px');
+            this.element.style.setProperty('--collapsible-height', this.expandedHeight + 'px');
         } else {
-            this.element.style.removeProperty('--height');
+            this.element.style.removeProperty('--collapsible-height');
 
         }
     }
diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss
index ab23a9b1d..3aad02e3e 100644
--- a/src/theme/components/collapsible-item.scss
+++ b/src/theme/components/collapsible-item.scss
@@ -1,14 +1,14 @@
 
 .collapsible-item {
     --display-toggle: none;
-    --height: none;
+    --collapsible-height: none;
     --toggle-size: 24px;
     --gradient-size: 44px;
 
     &.collapsible-loading-height {
         display: block !important;
         height: auto !important;
-        --height: auto !important;
+        --collapsible-height: auto !important;
         --display-toggle: none !important;
     }
 
@@ -21,8 +21,8 @@
             position: relative;
             padding-bottom: var(--toggle-size); // So the Show less button can fit.
             --display-toggle: block;
-            @include core-transition(height max-height, 300ms);
-            height: calc(var(--height, auto) + var(--toggle-size));
+            @include core-transition(height, 300ms);
+            height: calc(var(--collapsible-height, auto) + var(--toggle-size));
 
             .collapsible-toggle {
                 position: absolute;
@@ -64,7 +64,7 @@
             &.collapsible-collapsed {
                 overflow: hidden;
                 min-height: calc(var(--toggle-size) + 12px);
-                height: var(--height, auto);
+                height: var(--collapsible-height, auto);
 
                 .collapsible-toggle-arrow {
                     transform: rotate(90deg);
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 81003b07a..2bd618242 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -77,13 +77,15 @@ core-format-text {
             }
             &.collapsible-collapsed .core-format-text-content {
                 overflow: hidden;
+                height: var(--collapsible-height);
+                @include core-transition(height, 300ms);
             }
         }
 
         @if ($core-format-text-never-shorten) {
             &.collapsible-enabled {
                 --display-toggle: none !important;
-                --max-height: none !important;
+                --collapsible-height: auto !important;
 
                 .collapsible-toggle {
                     display: none !important;