fix(item): update button styles inside of an item

references #14013

packages/core/src/components/item/item.ios.scss

@@ -91,8 +91,8 @@
   @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
 }
 
-.item-ios ion-icon[slot="start"],
+.item-ios > ion-icon[slot="start"],
-.item-ios ion-icon[slot="end"] {
+.item-ios > ion-icon[slot="end"] {
   @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
 }
 
@@ -105,7 +105,7 @@
 // TODO iOS Item Button
 // --------------------------------------------------
 
-.item-ios .item-button {
+.item-ios .button-small-ios {
   @include padding(0, .5em);
 
   height: 24px;
@@ -113,7 +113,7 @@
   font-size: 13px;
 }
 
-.item-ios .item-button ion-icon[slot="icon-only"] {
+.item-ios .button-small-ios ion-icon[slot="icon-only"] {
   @include padding(0, 1px);
 }
 

packages/core/src/components/item/item.md.scss

@@ -97,13 +97,13 @@
   @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
 }
 
-.item-md ion-icon[slot="start"],
+.item-md > ion-icon[slot="start"],
-.item-md ion-icon[slot="end"] {
+.item-md > ion-icon[slot="end"] {
   @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
 }
 
-.item-md ion-icon[slot="start"] + .item-inner,
+.item-md > ion-icon[slot="start"] + .item-inner,
-.item-md ion-icon[slot="start"] + .item-input {
+.item-md > ion-icon[slot="start"] + .item-input {
   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
 }
 
@@ -126,7 +126,7 @@
 // TODO Material Design Item Button
 // --------------------------------------------------
 
-.item-md .item-button {
+.item-md .button-small-md {
   @include padding(0, .6em);
 
   height: 25px;
@@ -134,7 +134,7 @@
   font-size: 12px;
 }
 
-.item-md .item-button ion-icon[slot="icon-only"] {
+.item-md .button-small-md ion-icon[slot="icon-only"] {
   @include padding(0);
 
 }

packages/core/src/components/item/item.scss

@@ -101,3 +101,7 @@ ion-input.item {
 .item-inner > ion-icon {
   font-size: 1.6em;
 }
+
+.item .button {
+  @include margin(0);
+}

packages/core/src/components/item/test/buttons/index.html

@@ -17,36 +17,32 @@
 
       <ion-content id="content">
         <ion-item href="#" onclick="testClick(event)">
-          a[ion-item]
+          <ion-label>a[ion-item]</ion-label>
         </ion-item>
 
         <ion-item class="activated" href="#" onclick="testClick(event)">
-          a[ion-item].activated
+          <ion-label>a[ion-item].activated</ion-label>
         </ion-item>
 
         <ion-item color="secondary" href="#" onclick="testClick(event)">
-          a[ion-item] secondary
+          <ion-label>a[ion-item] secondary</ion-label>
         </ion-item>
 
         <ion-item tappable id="attachClick">
-          button[ion-item] tappable click listener
+          <ion-label>button[ion-item]</ion-label>
-        </ion-item>
-
-        <ion-item ONCLICK="testClick(event)">
-          button[ion-item] ONCLICK
         </ion-item>
 
         <ion-item class="activated" onClick="testClick(event)">
-          button[ion-item].activated onClick
+          <ion-label>button[ion-item].activated</ion-label>
         </ion-item>
 
         <ion-item color="danger" onclick="testClick(event)">
-          button[ion-item] danger onclick
+          <ion-label>button[ion-item] danger</ion-label>
         </ion-item>
 
         <ion-item onclick="testClickOutsize(event)">
           <ion-button slot="start" onclick="testClick(event)">Default</ion-button>
-          Inner Buttons
+          <ion-label>Inner Buttons</ion-label>
           <ion-button fill="outline" slot="end" onclick="testClick(event)">Outline</ion-button>
         </ion-item>
 
@@ -55,7 +51,7 @@
             <ion-icon slot="start" name="home"></ion-icon>
             Left Icon
           </ion-button>
-          disabled left icon buttons
+          <ion-label>disabled left icon buttons</ion-label>
           <ion-button fill="outline" slot="end" onclick="testClick(event)">
             <ion-icon slot="start" name="star"></ion-icon>
             Left Icon
@@ -67,7 +63,7 @@
             Right Icon
             <ion-icon name="home" slot="end"></ion-icon>
           </ion-button>
-          right icon buttons
+          <ion-label>right icon buttons</ion-label>
           <ion-button fill="outline" slot="end" onclick="testClick(event)">
             Right Icon
             <ion-icon name="star" slot="end"></ion-icon>
@@ -78,14 +74,14 @@
           <ion-button fill="clear" slot="start" size="default" onclick="testClick(event)">
             <ion-icon slot="icon-only" name="navigate"></ion-icon>
           </ion-button>
-          icon only buttons default
+          <ion-label>icon only buttons default</ion-label>
           <ion-button fill="clear" slot="end" size="default" onclick="testClick(event)">
             <ion-icon slot="icon-only" name="navigate"></ion-icon>
           </ion-button>
         </ion-item>
 
         <ion-item disabled onclick="testClick(event)">
-          ion-item disabled right icon/text button large
+          <ion-label>ion-item disabled right icon/text button large</ion-label>
           <ion-button slot="end" size="large" onclick="testClick(event)">
             <ion-icon slot="start" name="refresh"></ion-icon>
             Refresh
@@ -97,20 +93,22 @@
             <ion-icon slot="start" name="settings"></ion-icon>
             Settings
           </ion-button>
-          ion-item left fill="clear" button small
+          <ion-label>ion-item left fill="clear" button small</ion-label>
         </ion-item>
 
         <ion-item>
-          ion-item right fill="clear" button
+          <ion-label>ion-item right fill="clear" button</ion-label>
           <ion-button secondary fill="clear" slot="end" onclick="testClick(event)">
             Edit
           </ion-button>
         </ion-item>
 
         <ion-item text-wrap>
-          This is multiline text that has a
+          <ion-label>
-          long description of about how the text is really long
+            This is multiline text that has a
-          and a <a href="#" onclick="testClick(event)">link</a>.
+            long description of about how the text is really long
+            and a <a href="#" onclick="testClick(event)">link</a>.
+          </ion-label>
           <ion-button fill="outline" slot="end" onclick="testClick(event)">View</ion-button>
         </ion-item>
 
@@ -118,7 +116,7 @@
           <ion-avatar slot="start">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
           </ion-avatar>
-          <h3>ng-for {{i}}</h3>
+          <ion-label><h3>ng-for {{i}}</h3></ion-label>
           <ion-badge slot="end">260k</ion-badge>
         </ion-button>