feat(item-option): add default styles (#29635)

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

@@ -0,0 +1,47 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./item-option";
+
+// Ionic Item Option
+// --------------------------------------------------
+
+:host {
+  @include globals.padding(0);
+
+  min-width: globals.$ionic-scale-1600;
+  height: globals.$ionic-scale-1600;
+
+  font-size: globals.$ionic-font-size-350;
+  font-weight: globals.$ionic-font-weight-medium;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+.button-native {
+  @include globals.padding(globals.$ionic-space-200);
+}
+
+::slotted([slot="top"]) {
+  @include globals.margin(0, 0, globals.$ionic-space-100, 0);
+}
+
+::slotted([slot="bottom"]) {
+  @include globals.margin(globals.$ionic-space-100, 0, 0, 0);
+}
+
+::slotted([slot="start"]) {
+  @include margin(0, globals.$ionic-space-100, 0, 0);
+}
+
+::slotted([slot="end"]) {
+  @include margin(0, 0, 0, globals.$ionic-space-100);
+}
+
+::slotted(ion-icon),
+::slotted([slot="icon-only"]) {
+  @include globals.margin(0);
+
+  width: globals.$ionic-scale-500;
+
+  min-width: initial;
+  height: globals.$ionic-scale-500;
+}

core/src/components/item-option/item-option.tsx

@@ -24,7 +24,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'item-option.ios.scss',
     md: 'item-option.md.scss',
-    ionic: 'item-option.md.scss',
+    ionic: 'item-option.ionic.scss',
   },
   shadow: true,
 })

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

@@ -0,0 +1,37 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./item-options";
+
+// Ionic Item Options
+// --------------------------------------------------
+
+.item-options-ionic {
+  align-items: center;
+
+  gap: globals.$ionic-space-100;
+}
+
+/* stylelint-disable property-disallowed-list */
+[dir="ltr"] .item-options-start ion-item-option:last-child,
+[dir="rtl"] .item-options-start ion-item-option:first-child {
+  margin-right: globals.$ionic-space-200;
+}
+
+[dir="ltr"] .item-options-start ion-item-option:first-child,
+[dir="rtl"] .item-options-start ion-item-option:last-child {
+  margin-left: calc(globals.$ionic-space-200 + var(--ion-safe-area-left, 0));
+
+  padding-left: initial;
+}
+
+[dir="ltr"] .item-options-end ion-item-option:first-child,
+[dir="rtl"] .item-options-end ion-item-option:last-child {
+  margin-left: globals.$ionic-space-200;
+}
+
+[dir="ltr"] .item-options-end ion-item-option:last-child,
+[dir="rtl"] .item-options-end ion-item-option:first-child {
+  margin-right: calc(globals.$ionic-space-200 + var(--ion-safe-area-right, 0));
+
+  padding-right: initial;
+}
+/* stylelint-enable property-disallowed-list */

core/src/components/item-options/item-options.tsx

@@ -14,7 +14,7 @@ import type { Side } from '../menu/menu-interface';
   styleUrls: {
     ios: 'item-options.ios.scss',
     md: 'item-options.md.scss',
-    ionic: 'item-options.md.scss',
+    ionic: 'item-options.ionic.scss',
   },
 })
 export class ItemOptions implements ComponentInterface {

core/src/components/item-sliding/test/icons/index.html

@@ -33,7 +33,7 @@
                 <ion-icon slot="icon-only" name="trash"></ion-icon>
               </ion-item-option>
               <ion-item-option>
-                <ion-icon slot="icon-only" name="star"></ion-icon>
+                <ion-icon slot="icon-only" name="bookmark"></ion-icon>
               </ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
@@ -43,14 +43,14 @@
               <ion-label>Icons in Start Slot</ion-label>
             </ion-item>
             <ion-item-options>
-              <ion-item-option color="primary">
+              <ion-item-option color="light">
-                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                More
-              </ion-item-option>
-              <ion-item-option color="secondary">
                 <ion-icon slot="start" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="start" name="bookmark"></ion-icon>
+                Save
+              </ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
 
@@ -59,14 +59,14 @@
               <ion-label>Icons in End Slot</ion-label>
             </ion-item>
             <ion-item-options>
-              <ion-item-option color="primary">
+              <ion-item-option color="light">
-                <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                More
-              </ion-item-option>
-              <ion-item-option color="secondary">
                 <ion-icon slot="end" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="end" name="bookmark"></ion-icon>
+                Save
+              </ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
 
@@ -75,14 +75,18 @@
               <ion-label>Icons in Top Slot</ion-label>
             </ion-item>
             <ion-item-options>
-              <ion-item-option color="primary">
+              <ion-item-option color="danger">
-                <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="top" name="trash"></ion-icon>
-                More
+                Delete
               </ion-item-option>
-              <ion-item-option color="secondary">
+              <ion-item-option color="light">
                 <ion-icon slot="top" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="top" name="bookmark"></ion-icon>
+                Save
+              </ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
 
@@ -91,14 +95,18 @@
               <ion-label>Icons in Bottom Slot</ion-label>
             </ion-item>
             <ion-item-options>
-              <ion-item-option color="primary">
+              <ion-item-option color="danger">
-                <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="bottom" name="trash"></ion-icon>
-                More
+                Delete
               </ion-item-option>
-              <ion-item-option color="secondary">
+              <ion-item-option color="light">
                 <ion-icon slot="bottom" name="archive"></ion-icon>
                 Archive
               </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="bottom" name="bookmark"></ion-icon>
+                Save
+              </ion-item-option>
             </ion-item-options>
           </ion-item-sliding>
         </ion-list>

core/src/components/item-sliding/test/icons/item-sliding.e2e.ts

@@ -8,7 +8,7 @@ import { configs, test, dragElementBy } from '@utils/test/playwright';
  * It is important to test all modes to ensure that the
  * child components are being rendered correctly.
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'ios', 'md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);