From e1502fe0be76f0685515787e7663f440224fbfdd Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Wed, 12 May 2021 11:52:19 +0200
Subject: [PATCH] MOBILE-3746 format-text: Convert show more to ion-button

---
 src/core/directives/format-text.ts    | 18 +++++++++---------
 src/theme/components/format-text.scss |  5 +++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index 0b1e0c388..6faa75a06 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -256,14 +256,17 @@ export class CoreFormatTextDirective implements OnChanges {
      */
     protected displayShowMore(): void {
         const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
-        const showMoreDiv = document.createElement('div');
+        const showMoreButton = document.createElement('ion-button');
 
-        showMoreDiv.classList.add('core-show-more');
-        showMoreDiv.innerHTML = Translate.instant('core.showmore');
-        this.element.appendChild(showMoreDiv);
+        showMoreButton.classList.add('core-show-more');
+        showMoreButton.setAttribute('fill', 'clear');
+        showMoreButton.innerHTML = Translate.instant('core.showmore');
+        this.element.appendChild(showMoreButton);
 
         if (expandInFullview) {
             this.element.classList.add('core-expand-in-fullview');
+        } else {
+            showMoreButton.setAttribute('aria-expanded', 'false');
         }
         this.element.classList.add('core-text-formatted');
         this.element.classList.add('core-shortened');
@@ -624,11 +627,8 @@ export class CoreFormatTextDirective implements OnChanges {
      * "Hide" the "Show more" in the element if it's shown.
      */
     protected hideShowMore(): void {
-        const showMoreDiv = this.element.querySelector('div.core-show-more');
-
-        if (showMoreDiv) {
-            showMoreDiv.remove();
-        }
+        const showMoreButton = this.element.querySelector('ion-button.core-show-more');
+        showMoreButton?.remove();
 
         this.element.classList.remove('core-expand-in-fullview');
         this.element.classList.remove('core-text-formatted');
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 31c6554ca..e453640a6 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -38,6 +38,7 @@ core-format-text {
                 min-height: 50px;
 
                 .core-show-more {
+                    text-transform: none;
                     text-align: end;
                     font-size: 14px;
                     display: block;
@@ -45,7 +46,7 @@ core-format-text {
                     @include position(null, 0, 0, null);
                     z-index: 7;
                     background-color: var(--background);
-                    color: var(--color);
+                    color: var(--text-color);
                     padding-left: 10px; // RTL
                 }
 
@@ -68,7 +69,7 @@ core-format-text {
         &.core-expand-in-fullview {
             .core-show-more {
                 @include push-arrow-color(626262, true);
-                @include padding-horizontal(null, 18px);
+                @include padding-horizontal(null, 5px);
                 @include background-position(end, 0, center);
 
                 background-repeat: no-repeat;