mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-16 10:01:59 +08:00
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:
@ -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: "";
|
||||
}
|
||||
|
@ -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 |
Reference in New Issue
Block a user