fix(item-option): set the display and box sizing for anchors

fixes #17402
ionic-team · Mar 8, 2019 · acb4433 · acb4433
1 parent bf70520
commit acb4433
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss
@@ -38,6 +38,8 @@
   @include text-inherit();
   @include padding(0, .7em);
 
+  display: inline-block;
+
   position: relative;
 
   width: 100%;
@@ -51,6 +53,8 @@
 
   cursor: pointer;
   appearance: none;
+
+  box-sizing: border-box;
 }
 
 .button-inner {

diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html
@@ -133,6 +133,7 @@ <h2>HubStruck Notifications</h2>
       </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
+
   <!-- Sliding item with icon bottom options on end side -->
   <ion-item-sliding>
     <ion-item>
@@ -152,6 +153,23 @@ <h2>HubStruck Notifications</h2>
     </ion-item-options>
   </ion-item-sliding>
 
+  <!-- Sliding item with one anchor option -->
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        Sliding Item, Anchor Icon Option
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option href="#" color="primary">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-item-option>
+      <ion-item-option color="secondary">
+        <ion-icon slot="icon-only" name="archive"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
 </body>
 
 </html>