From f13722cc206ce7f9661647c710fdc21e7c96eb72 Mon Sep 17 00:00:00 2001
From: Michael Asimakopoulos <m.asimakopoulos@gmail.com>
Date: Tue, 16 Apr 2019 00:20:15 +0300
Subject: [PATCH] fix(item-sliding): hide opposite side options when other side
 is open (#17986)

* fix(item-sliding): hide opposite side options

* Fix padding issue

* add visibility hidden for item options
---
 .../components/item-options/item-options.scss |  2 +
 .../components/item-sliding/item-sliding.scss |  4 +-
 .../item-sliding/test/basic/index.html        | 38 +++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss
index 00c4fae906..5e64d23bf9 100644
--- a/core/src/components/item-options/item-options.scss
+++ b/core/src/components/item-options/item-options.scss
@@ -77,6 +77,8 @@ ion-item-options {
 
   ion-item-options {
     display: flex;
+
+    visibility: hidden;
   }
 
   &.item-sliding-active-options-start .item-options-start,
diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss
index ef076e345f..0ff0ae2384 100644
--- a/core/src/components/item-sliding/item-sliding.scss
+++ b/core/src/components/item-sliding/item-sliding.scss
@@ -33,7 +33,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-left: 90%;
+    padding-left: 100%;
   }
 
   @include ltr() {
@@ -51,7 +51,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-right: 90%;
+    padding-right: 100%;
   }
 
   @include ltr() {
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index 3502bc6736..60f1ba96fd 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -310,6 +310,44 @@
             </ion-item>
           </ion-item-sliding>
 
+          <ion-item-sliding id="item10">
+            <ion-item detail>
+              <ion-label text-wrap>
+                <h2>RIGHT/LEFT side - many buttons</h2>
+                <p>Use mobile emulator to check</p>
+              </ion-label>
+            </ion-item>
+            <ion-item-options side="start" class="sliding-enabled">
+              <ion-item-option color="primary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 1
+              </ion-item-option>
+              <ion-item-option color="secondary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 2
+              </ion-item-option>
+              <ion-item-option color="danger" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 3
+              </ion-item-option>
+              <ion-item-option color="tertiary" expandable>
+                <ion-icon name="ios-checkmark"></ion-icon>Btn 4
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item-options side="end" class="sliding-enabled">
+              <ion-item-option color="primary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 5
+              </ion-item-option>
+              <ion-item-option color="secondary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 6
+              </ion-item-option>
+              <ion-item-option color="danger" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 7
+              </ion-item-option>
+              <ion-item-option color="tertiary" expandable>
+                <ion-icon name="mail"></ion-icon>Btn 8
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
           <ion-item>
             <ion-label text-wrap>
               <h2>Normal ion-item (no sliding)</h2>