feat(select-modal): add ionic theme styling (#30007)

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

@@ -76,11 +76,6 @@ slot[name="end"]::slotted(*) {
 // Item: Focused
 // --------------------------------------------------
 
-:host(.ion-focused) .item-native {
-  // This prevents the focus ring from clipping.
-  overflow: visible;
-}
-
 :host(.ion-focused) .item-native::after {
   @include globals.border-radius(inherit);
   @include globals.position(0, 0, 0, 0);
@@ -100,11 +95,13 @@ slot[name="end"]::slotted(*) {
 // Full lines - apply the border to the item
 // Inset lines - apply the border to the item inner
 :host(.item-lines-full) {
-  --border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
+  --border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
+    globals.$ion-border-size-0};
 }
 
 :host(.item-lines-inset) {
-  --inner-border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
+  --inner-border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
+    globals.$ion-border-size-0};
 }
 
 // Full lines - remove the border from the item inner (inset list items)

core/src/components/radio/radio.common.scss

@@ -156,6 +156,17 @@ input {
   display: block;
 }
 
+// Radio Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  overflow: hidden;
+}
+
 // Radio Label Placement - Start
 // ----------------------------------------------------------------
 

core/src/components/radio/radio.native.scss

@@ -12,14 +12,6 @@
 // Radio Label
 // ----------------------------------------------------------------
 
-.label-text-wrapper {
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  overflow: hidden;
-}
-
 :host(.in-item) .label-text-wrapper {
   @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
 }

core/src/components/select-modal/select-modal.ionic.scss

@@ -0,0 +1,65 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./select-modal.common";
+
+// Ionic Select Modal
+// --------------------------------------------------
+
+// Item
+// ----------------------------------------------------------------
+
+ion-item {
+  --border-width: 0;
+}
+
+// Toolbar
+// ----------------------------------------------------------------
+
+ion-toolbar {
+  @include globals.typography(globals.$ion-heading-h6-medium);
+}
+
+// Radio
+// ----------------------------------------------------------------
+
+ion-list ion-radio::part(container) {
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  @include globals.margin(0);
+}
+
+// Radio and Checkbox: Label
+// ----------------------------------------------------------------
+
+ion-list ion-radio::part(label),
+ion-list ion-checkbox::part(label) {
+  @include globals.typography(globals.$ion-body-lg-medium);
+}
+
+// Radio and Checkbox: Checked
+// ----------------------------------------------------------------
+
+.item-radio-checked,
+.item-checkbox-checked {
+  --background: #{globals.$ion-semantics-primary-100};
+  --border-radius: #{globals.$ion-border-radius-400};
+}
+
+// Content
+// ----------------------------------------------------------------
+
+ion-content {
+  /**
+   * The important is needed to override the padding set
+   * for modal sheet by the `core.ionic.scss` file.
+   * The modal sheet within the select does not match the
+   * padding of the modal sheet in the core.
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-start: #{globals.$ion-space-400} !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-end: #{globals.$ion-space-400} !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-bottom: #{globals.$ion-space-1200} !important;
+}

core/src/components/select-modal/select-modal.ios.scss

@@ -1 +1 @@
-@import "./select-modal";
+@import "./select-modal.common";

core/src/components/select-modal/select-modal.md.scss

@@ -1,4 +1,4 @@
-@import "./select-modal";
+@import "./select-modal.common";
 @import "../../themes/mixins.scss";
 @import "../item/item.md.vars";
 

core/src/components/select-modal/select-modal.tsx

@@ -14,7 +14,7 @@ import type { SelectModalOption } from './select-modal-interface';
   styleUrls: {
     ios: 'select-modal.ios.scss',
     md: 'select-modal.md.scss',
-    ionic: 'select-modal.md.scss',
+    ionic: 'select-modal.ionic.scss',
   },
   scoped: true,
 })

core/src/components/select-modal/test/basic/select-modal.e2e.ts

@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
  * do have RTL logic, but those are tested in their
  * respective component test files.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select-modal: rendering'), () => {
     let selectModalPage: SelectModalPage;