fix(item): update to match Material Design spec (#16182)

- splits the item min height by mode
- removes padding end from the slotted end components in favor of using 16px on the item
- updates the icon color to lighter gray (rgb)
- removes font size change from text wrapped labels
- add list spec test to include MD examples

fixes #14799

core/src/components/alert/alert.ios.vars.scss

@@ -1,5 +1,5 @@
 @import "../../themes/ionic.globals.ios";
-@import "../item/item.vars";
+@import "../item/item.ios.vars";
 
 // iOS Alert
 // --------------------------------------------------
@@ -299,4 +299,4 @@ $alert-ios-checkbox-icon-transform:                     rotate(45deg) !default;
 $alert-ios-translucent-filter:                          saturate(180%) blur(20px) !default;
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-ios-tappable-height:                             $item-min-height !default;
+$alert-ios-tappable-height:                             $item-ios-min-height !default;

core/src/components/alert/alert.md.vars.scss

@@ -1,5 +1,5 @@
 @import "../../themes/ionic.globals.md";
-@import "../item/item.vars";
+@import "../item/item.md.vars";
 
 // Material Design Alert
 // --------------------------------------------------
@@ -317,4 +317,4 @@ $alert-md-checkbox-label-text-color:          $text-color-step-150 !default;
 $alert-md-checkbox-label-font-size:           16px !default;
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-md-tappable-height:                    $item-min-height !default;
+$alert-md-tappable-height:                    $item-md-min-height !default;

core/src/components/checkbox/checkbox.md.vars.scss

@@ -50,7 +50,7 @@ $checkbox-md-transition-duration:        180ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
 /// @prop - Margin top of the start checkbox item
-$checkbox-md-item-start-margin-top:      9px !default;
+$checkbox-md-item-start-margin-top:      18px !default;
 
 /// @prop - Margin end of the start checkbox item
 $checkbox-md-item-start-margin-end:      36px !default;
@@ -62,13 +62,13 @@ $checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !def
 $checkbox-md-item-start-margin-start:    4px !default;
 
 /// @prop - Margin top of the end checkbox item
-$checkbox-md-item-end-margin-top:        11px !default;
+$checkbox-md-item-end-margin-top:        18px !default;
 
 /// @prop - Margin end of the end checkbox item
-$checkbox-md-item-end-margin-end:        10px !default;
+$checkbox-md-item-end-margin-end:        0 !default;
 
 /// @prop - Margin bottom of the end checkbox item
-$checkbox-md-item-end-margin-bottom:     10px !default;
+$checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !default;
 
 /// @prop - Margin start of the end checkbox item
 $checkbox-md-item-end-margin-start:      0 !default;

core/src/components/datetime/datetime.md.vars.scss

@@ -8,7 +8,7 @@
 $datetime-md-padding-top:         $item-md-padding-top !default;
 
 /// @prop - Padding end of the datetime
-$datetime-md-padding-end:         ($item-md-padding-end / 2) !default;
+$datetime-md-padding-end:         0 !default;
 
 /// @prop - Padding bottom of the datetime
 $datetime-md-padding-bottom:      $item-md-padding-bottom !default;

core/src/components/input/input.md.vars.scss

@@ -11,7 +11,7 @@ $input-md-font-size:                      inherit !default;
 $input-md-padding-top:                     $item-md-padding-top !default;
 
 /// @prop - Margin end of the input
-$input-md-padding-end:                     ($item-md-padding-end / 2) !default;
+$input-md-padding-end:                     0 !default;
 
 /// @prop - Margin bottom of the input
 $input-md-padding-bottom:                  $item-md-padding-bottom !default;
@@ -56,7 +56,7 @@ $input-md-highlight-color-invalid:        ion-color(danger, base) !default;
 $input-md-inset-padding-top:              ($item-md-padding-top / 2) !default;
 
 /// @prop - Padding end of the inset input
-$input-md-inset-padding-end:              ($item-md-padding-end / 2) !default;
+$input-md-inset-padding-end:              0 !default;
 
 /// @prop - Padding bottom of the inset input
 $input-md-inset-padding-bottom:           ($item-md-padding-bottom / 2) !default;

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

@@ -15,37 +15,102 @@
 }
 
 .item-divider-inner {
-  @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
+  @include padding-horizontal(null, $item-md-divider-padding-end);
 }
 
 
 // Material Design Item Divider Slots
 // --------------------------------------------------
 
-:host([slot="start"]),
-:host([slot="end"]) {
-  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
+::slotted([slot="start"]) {
+  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
 }
 
-::slotted(ion-icon[slot="start"]),
-::slotted(ion-icon[slot="end"]) {
+::slotted([slot="end"]) {
+  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+
+  color: $item-md-icon-slot-color;
+
+  font-size: $item-md-icon-slot-font-size;
+}
+
+::slotted(ion-icon[slot]) {
   @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);
 }
 
-// TODO
-// .item-divider-md ion-icon[slot="start"] + .item-inner,
-// .item-divider-md ion-icon[slot="start"] + .item-interactive {
-//   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
-// }
+::slotted(ion-icon[slot="start"]) {
+  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
+}
+
+::slotted(ion-icon[slot="end"]) {
+  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Note
+// --------------------------------------------------
+
+::slotted(ion-note) {
+  @include margin(0);
+
+  align-self: flex-start;
+
+  font-size: $item-md-note-slot-font-size;
+}
+
+::slotted(ion-note[slot]) {
+  @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
+}
+
+::slotted(ion-note[slot="start"]) {
+  @include padding-horizontal($item-md-note-start-slot-padding-start, $item-md-note-start-slot-padding-end);
+}
+
+::slotted(ion-note[slot="end"]) {
+  @include padding-horizontal($item-md-note-end-slot-padding-start, $item-md-note-end-slot-padding-end);
+}
+
+
+// Material Design Item Divider Avatar
+// --------------------------------------------------
+
+::slotted(ion-avatar) {
+  width: $item-md-avatar-width;
+  height: $item-md-avatar-height;
+}
+
+
+// Material Design Item Divider Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-thumbnail) {
+  width: $item-md-thumbnail-width;
+  height: $item-md-thumbnail-height;
+}
+
+// Material Design Item Divider Avatar/Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-avatar),
+::slotted(ion-thumbnail) {
+  @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
+}
 
 ::slotted(ion-avatar[slot="start"]),
 ::slotted(ion-thumbnail[slot="start"]) {
-  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
 }
 
 ::slotted(ion-avatar[slot="end"]),
 ::slotted(ion-thumbnail[slot="end"]) {
-  @include margin(($item-md-padding-end / 2));
+  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
 }
 
 

core/src/components/item-divider/item-divider.md.vars.scss

@@ -20,4 +20,4 @@ $item-md-divider-border-bottom:      1px solid $item-md-border-color !default;
 $item-md-divider-padding-start:      $item-md-padding-start !default;
 
 /// @prop - Padding end for the divider
-$item-md-divider-padding-end:        $item-md-padding-end !default;
+$item-md-divider-padding-end:        0 !default;

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

@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 :host {
+  --min-height: #{$item-ios-min-height};
   --transition: background-color 200ms linear;
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};

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

@@ -3,6 +3,9 @@
 // iOS Item
 // --------------------------------------------------
 
+/// @prop - Minimum height of the item
+$item-ios-min-height:                        44px !default;
+
 /// @prop - Font size of the item
 $item-ios-font-size:                         17px !default;