javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(radio): remove order override from wp mode, use slot instead

Browse Source 
$radio-wp-order has been removed

Add Radio to breaking changes
This commit is contained in:
Brandy Carney
2017-09-21 13:33:59 -04:00
parent d1cfa0683d
commit 662743f843
2 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/src/components/radio/radio.wp.scss
View File

@ -10,9 +10,6 @@ $radio-wp-color-on: color($colors-wp, primary) !default;
/// @prop - Color of the unchecked radio
$radio-wp-color-off: #333 !default;
/// @prop - Order of the radio (places to the left of the item)
$radio-wp-order: -1 !default;
/// @prop - Width of the radio icon
$radio-wp-icon-width: 16px !default;
@ -127,16 +124,12 @@ $radio-wp-item-end-margin-start: 0 !default;
// -----------------------------------------
.item-wp .radio-wp {
@include margin($radio-wp-item-start-margin-top, $radio-wp-item-start-margin-end, $radio-wp-item-start-margin-bottom, $radio-wp-item-start-margin-start);
position: static;
display: block;
order: $radio-wp-order;
@include margin($radio-wp-item-start-margin-top, $radio-wp-item-start-margin-end, $radio-wp-item-start-margin-bottom, $radio-wp-item-start-margin-start);
&[item-end] {
order: 0;
&[slot="end"] {
@include margin($radio-wp-item-end-margin-top, $radio-wp-item-end-margin-end, $radio-wp-item-end-margin-bottom, $radio-wp-item-end-margin-start);
}
}

98
packages/ionic-angular/BREAKING.md
View File

@ -11,6 +11,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
- [Icon](#icon)
- [Item](#item)
- [Option](#option)
- [Radio](#radio)
- [Segment](#segment)
- [Toolbar](#toolbar)
- [Sass](#sass)
@ -350,6 +351,103 @@ Select's option element should now be written as `<ion-select-option>`. This mak
The class has been renamed from `Option` to `SelectOption` to keep it consistent with the element tag name.
## Radio
### Slot Required
Previously radio was positioned inside of an item automatically or by using `item-left`/`item-right`. It is now required to have a `slot` to be positioned properly.
** Old Usage Example **
```html
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio item-left value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio item-right color="danger" value="cherry"></ion-radio>
</ion-item>
```
** New Usage Example **
```html
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="end" color="danger" value="cherry"></ion-radio>
</ion-item>
```
### Radio Group
Radio group has been changed to an element. It should now be wrapped around any `<ion-radio>` elements as `<ion-radio-group>`.
** Old Usage Example **
```html
<ion-list radio-group>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-list>
```
** New Usage Example **
```html
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
```
### Order for Windows
Previously a radio inside of an item in Windows Platform mode would align itself to the start of the item. This has been removed, `slot` should always be used to align a radio inside of an item now.
## Segment
The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.