fix(select-modal): match radio styles to iOS native (#30119)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When the `select-modal` displays radios, a bottom border is shown under
the radio icon and text. However, native iOS does not have the border
under the icon.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The bottom border is displayed under the radio text only.
- The `ion-item` within `select-modal` has been given the prop of
`lines="none"` since border styling has been done through
`select-md.ios.scss` and because `md` doesn't use it.
- Updated snapshots

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Preview
(iOS)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic?ionic%3Amode=ios)
[Preview
(md)](https://ionic-framework-git-rou-11404-ionic1.vercel.app/src/components/select/test/basic)
This commit is contained in:
Maria Hutt
2025-01-09 10:32:56 -08:00
committed by GitHub
parent 05928e3877
commit 3f8346e718
5 changed files with 24 additions and 0 deletions

View File

@ -1 +1,24 @@
@import "./select-modal";
@import "../item/item.ios.vars";
@import "../radio/radio.ios.vars";
ion-item {
--inner-padding-end: 0;
}
/**
* The bottom border of the item should only be displayed
* under the text and not the radio icon.
*/
ion-radio::after {
@include position(null, null, 0, calc($radio-ios-icon-width + $item-ios-padding-start));
position: absolute;
width: calc(100% - $radio-ios-icon-width - $item-ios-padding-start); /* Adjust width based on the shift */
border-width: #{0px 0px $item-ios-border-bottom-width 0px};
border-style: #{$item-ios-border-bottom-style};
border-color: #{$item-ios-border-bottom-color};
content: "";
}

View File

@ -81,6 +81,7 @@ export class SelectModal implements ComponentInterface {
<ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
{this.options.map((option) => (
<ion-item
lines="none"
class={{
// TODO FW-4784
'item-radio-checked': option.value === checked,

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB