refactor(): remove checked property in favor of parent value (#19449)

BREAKING CHANGE:


The following components have been updated to remove the checked or selected properties:

- Radio
- Segment Button
- Select

Developers should set the value property on the respective parent components in order to managed checked/selected status.

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Manu MA
2020-01-17 23:22:26 +01:00
committed by Liam DeBeasi
parent 9232f16eea
commit a5229d90ca
52 changed files with 879 additions and 939 deletions

View File

@@ -57,10 +57,10 @@
<ion-item>
<ion-label>Pets</ion-label>
<ion-select multiple="true">
<ion-select-option value="bird" selected>Bird</ion-select-option>
<ion-select multiple="true" [value]="['bird', 'dog']">
<ion-select-option value="bird">Bird</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="dog" selected>Dog</ion-select-option>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
</ion-select>
</ion-item>

View File

@@ -57,16 +57,21 @@
<ion-item>
<ion-label>Pets</ion-label>
<ion-select multiple="true">
<ion-select-option value="bird" selected>Bird</ion-select-option>
<ion-select id="multiple" multiple="true">
<ion-select-option value="bird">Bird</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="dog" selected>Dog</ion-select-option>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
```javascript
const select = document.querySelector('multiple');
select.value = ['bird', 'dog'];
```
## Objects as Values
```html
@@ -114,10 +119,11 @@
let selectOption = document.createElement('ion-select-option');
selectOption.value = option;
selectOption.textContent = option.first + ' ' + option.last;
selectOption.selected = (i === 0);
objectSelectElement.appendChild(selectOption)
});
objectSelectElement.value = objectOptions[0];
}
```

View File

@@ -104,12 +104,12 @@ export const SelectExample: React.FC = () => (
<IonItem>
<IonLabel>Pets</IonLabel>
<IonSelect multiple={true}>
<IonSelectOption value="bird" selected>
<IonSelect multiple={true} value={['bird', 'dog']}>
<IonSelectOption value="bird">
Bird
</IonSelectOption>
<IonSelectOption value="cat">Cat</IonSelectOption>
<IonSelectOption value="dog" selected>
<IonSelectOption value="dog">
Dog
</IonSelectOption>
<IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>

View File

@@ -60,10 +60,10 @@
<ion-item>
<ion-label>Pets</ion-label>
<ion-select multiple="true">
<ion-select-option value="bird" selected>Bird</ion-select-option>
<ion-select multiple="true" :value=['bird', 'dog']>
<ion-select-option value="bird">Bird</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="dog" selected>Dog</ion-select-option>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="honeybadger">Honey Badger</ion-select-option>
</ion-select>
</ion-item>
@@ -110,7 +110,7 @@
<ion-item>
<ion-label>Action Sheet</ion-label>
<ion-select :interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
<ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
<ion-select-option value="red">Red</ion-select-option>
<ion-select-option value="purple">Purple</ion-select-option>
<ion-select-option value="yellow">Yellow</ion-select-option>