feat(item): add styles for default size in ionic theme (#29559)

Issue number: internal

---------

## What is the new behavior?
- Added scss for the `ion-item` for the Ionic theme
- Added test page

## Does this introduce a breaking change?
- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/api.txt

@@ -1019,28 +1019,21 @@ ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background,ionic
 ion-item,css-prop,--background,ios
 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
@@ -1049,43 +1042,30 @@ 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
@@ -1103,10 +1083,8 @@ 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.ionic.scss

@@ -0,0 +1,90 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Item
+// --------------------------------------------------
+
+:host {
+  /**
+    * @prop --background: Background of the item
+    *
+    * @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};
+  --border-color: #{globals.$ionic-color-neutral-300};
+  --border-style: #{globals.$ionic-border-style-solid};
+  --border-width: #{globals.$ionic-border-size-025};
+  --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
+// --------------------------------------------------
+.item-native {
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  display: flex;
+
+  align-items: center;
+
+  width: 100%;
+
+  min-height: var(--min-height);
+
+  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;
+  }
+}

core/src/components/item/item.tsx

@@ -27,7 +27,7 @@ import type { RouterDirection } from '../router/utils/interface';
   styleUrls: {
     ios: 'item.ios.scss',
     md: 'item.md.scss',
-    ionic: 'item.md.scss',
+    ionic: 'item.ionic.scss',
   },
   shadow: true,
 })

core/src/components/item/test/theme-ionic/index.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Item - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>List Header</ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label> Item</ion-label>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>Item Divider</ion-label>
+          </ion-item-divider>
+          <ion-item>
+            <ion-label> Item</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-item>
+          <ion-label> Plain Ol' div with some text</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-nowrap">
+            Single line text that should have ellipses when it doesn't all fit in the item
+          </ion-label>
+        </ion-item>
+
+        <ion-item lines="none">
+          <ion-label>Single line item with no lines</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on ion-label
+          </ion-label>
+        </ion-item>
+
+        <ion-item color="secondary">
+          <ion-label>
+            <h1>H1 Title Text</h1>
+            <p>Paragraph line 1</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h2>H2 Title Text</h2>
+            <p>Paragraph line 1</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <ion-text color="primary">
+              <h3>H3 Title Text</h3>
+            </ion-text>
+            <p>Paragraph line 1</p>
+            <ion-text color="secondary">
+              <p>Paragraph line 2 secondary</p>
+            </ion-text>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h4>H4 Title Text</h4>
+            <p>Paragraph line 1</p>
+            <p>Paragraph line 2</p>
+            <p>Paragraph line 3</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item using inner ion-label </ion-label>
+        </ion-item>
+
+        <ion-item class="overflow-visible">
+          <ion-input
+            label="PIN:"
+            label-placement="fixed"
+            type="number"
+            pattern="[0-9]*"
+            inputmode="numeric"
+            formControlName="acct_no"
+            placeholder="Enter 7 digits"
+          ></ion-input>
+          <span class="error">Must enter 7 digits</span>
+        </ion-item>
+
+        <ion-item class="overflow-scroll">
+          <ion-label class="ion-text-wrap"
+            >Item with overflow scroll. Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing
+            commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis
+            eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus
+            eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla
+            facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc
+            id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas
+            ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.</ion-label
+          >
+        </ion-item>
+
+        <ion-item detail>
+          <ion-label>Item with details.</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+          <ion-button slot="end" fill="outline">Outline</ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label slot="start">Start</ion-label>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label slot="start">Start</ion-label>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+          <ion-button slot="end" fill="outline">Outline</ion-button>
+        </ion-item>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+
+    <style>
+      .overflow-visible {
+        --border-color: red;
+
+        overflow: visible;
+      }
+
+      .overflow-scroll {
+        margin-top: 10px;
+        height: 140px;
+
+        overflow: scroll;
+      }
+
+      .error {
+        display: inline-block;
+        position: absolute;
+        bottom: -4px;
+        right: 1em;
+        padding: 0 6px;
+        color: red;
+        background-color: #fff;
+        font-size: 12px;
+        height: 12px;
+      }
+    </style>
+  </body>
+</html>