refactor(item): use correct button sizes (#29691)

core/api.txt

@@ -989,19 +989,25 @@ ion-item,css-prop,--background,md
 ion-item,css-prop,--background-activated,ionic
 ion-item,css-prop,--background-activated,ios
 ion-item,css-prop,--background-activated,md
+ion-item,css-prop,--background-activated-opacity,ionic
 ion-item,css-prop,--background-activated-opacity,ios
 ion-item,css-prop,--background-activated-opacity,md
+ion-item,css-prop,--background-focused,ionic
 ion-item,css-prop,--background-focused,ios
 ion-item,css-prop,--background-focused,md
+ion-item,css-prop,--background-focused-opacity,ionic
 ion-item,css-prop,--background-focused-opacity,ios
 ion-item,css-prop,--background-focused-opacity,md
+ion-item,css-prop,--background-hover,ionic
 ion-item,css-prop,--background-hover,ios
 ion-item,css-prop,--background-hover,md
+ion-item,css-prop,--background-hover-opacity,ionic
 ion-item,css-prop,--background-hover-opacity,ios
 ion-item,css-prop,--background-hover-opacity,md
 ion-item,css-prop,--border-color,ionic
 ion-item,css-prop,--border-color,ios
 ion-item,css-prop,--border-color,md
+ion-item,css-prop,--border-radius,ionic
 ion-item,css-prop,--border-radius,ios
 ion-item,css-prop,--border-radius,md
 ion-item,css-prop,--border-style,ionic
@@ -1010,30 +1016,43 @@ ion-item,css-prop,--border-style,md
 ion-item,css-prop,--border-width,ionic
 ion-item,css-prop,--border-width,ios
 ion-item,css-prop,--border-width,md
+ion-item,css-prop,--color,ionic
 ion-item,css-prop,--color,ios
 ion-item,css-prop,--color,md
+ion-item,css-prop,--color-activated,ionic
 ion-item,css-prop,--color-activated,ios
 ion-item,css-prop,--color-activated,md
+ion-item,css-prop,--color-focused,ionic
 ion-item,css-prop,--color-focused,ios
 ion-item,css-prop,--color-focused,md
+ion-item,css-prop,--color-hover,ionic
 ion-item,css-prop,--color-hover,ios
 ion-item,css-prop,--color-hover,md
+ion-item,css-prop,--detail-icon-color,ionic
 ion-item,css-prop,--detail-icon-color,ios
 ion-item,css-prop,--detail-icon-color,md
+ion-item,css-prop,--detail-icon-font-size,ionic
 ion-item,css-prop,--detail-icon-font-size,ios
 ion-item,css-prop,--detail-icon-font-size,md
+ion-item,css-prop,--detail-icon-opacity,ionic
 ion-item,css-prop,--detail-icon-opacity,ios
 ion-item,css-prop,--detail-icon-opacity,md
+ion-item,css-prop,--inner-border-width,ionic
 ion-item,css-prop,--inner-border-width,ios
 ion-item,css-prop,--inner-border-width,md
+ion-item,css-prop,--inner-box-shadow,ionic
 ion-item,css-prop,--inner-box-shadow,ios
 ion-item,css-prop,--inner-box-shadow,md
+ion-item,css-prop,--inner-padding-bottom,ionic
 ion-item,css-prop,--inner-padding-bottom,ios
 ion-item,css-prop,--inner-padding-bottom,md
+ion-item,css-prop,--inner-padding-end,ionic
 ion-item,css-prop,--inner-padding-end,ios
 ion-item,css-prop,--inner-padding-end,md
+ion-item,css-prop,--inner-padding-start,ionic
 ion-item,css-prop,--inner-padding-start,ios
 ion-item,css-prop,--inner-padding-start,md
+ion-item,css-prop,--inner-padding-top,ionic
 ion-item,css-prop,--inner-padding-top,ios
 ion-item,css-prop,--inner-padding-top,md
 ion-item,css-prop,--min-height,ionic
@@ -1051,8 +1070,10 @@ ion-item,css-prop,--padding-start,md
 ion-item,css-prop,--padding-top,ionic
 ion-item,css-prop,--padding-top,ios
 ion-item,css-prop,--padding-top,md
+ion-item,css-prop,--ripple-color,ionic
 ion-item,css-prop,--ripple-color,ios
 ion-item,css-prop,--ripple-color,md
+ion-item,css-prop,--transition,ionic
 ion-item,css-prop,--transition,ios
 ion-item,css-prop,--transition,md
 ion-item,part,detail-icon

core/src/components/item/item.common.scss

@@ -1,4 +1,5 @@
-@import "./item.vars";
+@import "../../themes/functions.string";
+@import "../../themes/mixins";
 
 // Item
 // --------------------------------------------------
@@ -80,8 +81,6 @@
 
   color: var(--color);
 
-  font-family: $font-family-base;
-
   text-align: initial;
   text-decoration: none;
 
@@ -89,19 +88,6 @@
   box-sizing: border-box;
 }
 
-// Item: Color
-// --------------------------------------------------
-
-:host(.ion-color) .item-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
-  border-color: current-color(shade);
-}
-
 // Item: Activated
 // --------------------------------------------------
 
@@ -115,10 +101,6 @@
   }
 }
 
-:host(.ion-color.ion-activated) .item-native {
-  color: current-color(contrast);
-}
-
 // Item: Focused
 // --------------------------------------------------
 
@@ -132,14 +114,6 @@
   }
 }
 
-:host(.ion-color.ion-focused) .item-native {
-  color: current-color(contrast);
-
-  &::after {
-    background: current-color(contrast);
-  }
-}
-
 // Item: Hover
 // --------------------------------------------------
 
@@ -153,14 +127,6 @@
       opacity: var(--background-hover-opacity);
     }
   }
-
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
-    color: #{current-color(contrast)};
-
-    &::after {
-      background: #{current-color(contrast)};
-    }
-  }
 }
 
 // Item: Interactive

core/src/components/item/item.ionic.scss

@@ -1,121 +1,66 @@
+@use "./item.common";
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
 // Item
 // --------------------------------------------------
 
 :host {
-  /**
-    * @prop --background: Background of the item
-    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
-    *
-    * @prop --border-color: Color of the item border
-    * @prop --border-style: Style of the item border
-    * @prop --border-width: Width of the item border
-    *
-    * @prop --min-height: Minimum height of the item
-    *
-    * @prop --padding-bottom: Bottom padding of the item
-    * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
-    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
-    * @prop --padding-top: Top padding of the item
-    *
-    */
   --background: #{globals.$ionic-color-base-white};
   --background-activated: #{globals.$ionic-color-neutral-200};
   --border-color: #{globals.$ionic-color-neutral-300};
   --border-style: #{globals.$ionic-border-style-solid};
-  --border-width: #{globals.$ionic-border-size-025};
+  --border-width: #{0 0 globals.$ionic-border-size-025 0};
   --min-height: #{globals.$ionic-scale-1800};
   --padding-top: #{globals.$ionic-space-200};
   --padding-end: #{globals.$ionic-space-400};
   --padding-bottom: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-400};
 
-  @include globals.font-smoothing;
-
-  display: flex;
-
-  position: relative;
-
-  align-items: center;
-  justify-content: space-between;
-
-  outline: none;
-
   font-family: globals.$ionic-font-family;
-
-  text-align: initial;
-  text-decoration: none;
-
-  overflow: hidden;
-  box-sizing: border-box;
 }
 
-// Item: Structure
+// Inner Item
 // --------------------------------------------------
-.item-native {
-  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  display: flex;
 
-  align-items: center;
+.item-inner {
+  // This prevents the padding/margin from
+  // being excluded from the height calculation.
+  min-height: initial;
+}
 
-  width: 100%;
+// Ionic Item Slots
+// --------------------------------------------------
 
-  min-height: var(--min-height);
+slot[name="start"]::slotted(*) {
+  @include globals.margin(null, #{globals.$ionic-space-400}, null, null);
+}
 
-  border-bottom-width: var(--border-width);
-  border-bottom-style: var(--border-style);
-  border-bottom-color: var(--border-color);
-
-  background: var(--background);
-
-  overflow: inherit;
-  box-sizing: border-box;
-
-  slot[name="start"]::slotted(*) {
-    @include globals.margin(null, #{globals.$ionic-space-400}, null, null);
-  }
-
-  slot[name="end"]::slotted(*) {
-    @include globals.margin(null, null, null, #{globals.$ionic-space-400});
-  }
-
-  .item-inner,
-  .item-inner .input-wrapper {
-    display: flex;
-
-    flex: 1;
-
-    overflow: inherit;
-    box-sizing: border-box;
-  }
+slot[name="end"]::slotted(*) {
+  @include globals.margin(null, null, null, #{globals.$ionic-space-400});
 }
 
 // Item: Disabled
 // --------------------------------------------------
+
 :host(.item-disabled) {
-  cursor: default;
-  pointer-events: none;
-
-  &::after {
-    @include globals.position(0, 0, 0, 0);
-
-    position: absolute;
-
-    background: #{globals.$ionic-state-disabled};
-
-    content: "";
-  }
+  opacity: 0.6;
 }
 
 // Item: Activated
 // --------------------------------------------------
+
 :host(.ion-activated) .item-native {
   background: var(--background-activated);
 }
 
 // Item: Focused
 // --------------------------------------------------
+
+:host(.ion-focused) .item-native {
+  // This prevents the focus ring from clipping.
+  overflow: visible;
+}
+
 :host(.ion-focused) .item-native::after {
   @include globals.position(0, 0, 0, 0);
 

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

@@ -1,4 +1,4 @@
-@import "./item";
+@import "./item.native";
 @import "./item.ios.vars";
 
 // iOS Item

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

@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "./item";
+@import "./item.native";
 @import "./item.md.vars";
 @import "../label/label.md.vars";
 

core/src/components/item/item.native.scss

@@ -0,0 +1,53 @@
+@import "./item.common";
+@import "./item.vars";
+
+// Item
+// --------------------------------------------------
+
+:host {
+  font-family: $font-family-base;
+}
+
+// Item: Color
+// --------------------------------------------------
+
+:host(.ion-color) .item-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+:host(.ion-color) .item-native,
+:host(.ion-color) .item-inner {
+  border-color: current-color(shade);
+}
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-color.ion-activated) .item-native {
+  color: current-color(contrast);
+}
+
+// Item: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .item-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(contrast);
+  }
+}
+
+// Item: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(contrast)};
+    }
+  }
+}