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>
ionic-team · Jan 17, 2020 · a5229d9 · a5229d9
1 parent 9232f16
commit a5229d9
Show file tree

Hide file tree

Showing 52 changed files with 872 additions and 932 deletions.
diff --git a/BREAKING.md b/BREAKING.md
@@ -25,8 +25,11 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   * [List Header](#list-header)
   * [Menu](#menu)
   * [Nav Link](#nav-link)
+  * [Radio](#radio)
   * [Searchbar](#searchbar)
   * [Segment](#segment)
+  * [Segment Button](#segment-button)
+  * [Select Option](#select-option)
   * [Skeleton Text](#skeleton-text)
   * [Split Pane](#split-pane)
   * [Toast](#toast)
@@ -194,6 +197,34 @@ The list header has been redesigned to match the latest iOS spec. This may break
 The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
 
 
+#### Radio
+
+The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
+
+Before
+
+```html
+<ion-radio checked>One</ion-radio>
+
+<ion-radio-group>
+  <ion-radio>One</ion-radio>
+  <ion-radio checked>Two</ion-radio>
+</ion-radio-group>
+```
+
+After
+
+```html
+<ion-radio-group value="one">
+  <ion-radio value="one">One</ion-radio>
+</ion-radio-group>
+
+<ion-radio-group value="two">
+  <ion-radio value="one">One</ion-radio>
+  <ion-radio value="two">Two</ion-radio>
+</ion-radio-group>
+```
+
 #### Searchbar
 
 ##### Show Cancel Button
@@ -226,6 +257,54 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
 <!-- TODO https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669 -->
 
 
+#### Segment Button
+
+The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
+
+Before
+
+```html
+<ion-segment>
+  <ion-segment-button>One</ion-segment-button>
+  <ion-segment-button checked>Two</ion-segment-button>
+  <ion-segment-button>Three</ion-segment-button>
+</ion-segment>
+```
+
+After
+
+```html
+<ion-segment value="two">
+  <ion-segment-button value="one">One</ion-segment-button>
+  <ion-segment-button value="two">Two</ion-segment-button>
+  <ion-segment-button value="three">Three</ion-segment-button>
+</ion-segment>
+```
+
+
+#### Select Option
+
+The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
+
+Before
+
+```html
+<ion-select>
+  <ion-select-option>One</ion-select-option>
+  <ion-select-option selected>Two</ion-select-option>
+</ion-select>
+```
+
+After
+
+```html
+<ion-select value="two">
+  <ion-select-option value="one">One</ion-select-option>
+  <ion-select-option value="two">Two</ion-select-option>
+</ion-select>
+```
+
+
 #### Skeleton Text
 
 The `width` property has been removed in favor of using CSS styling.

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -534,17 +534,16 @@ export class IonProgressBar {
 }
 
 export declare interface IonRadio extends Components.IonRadio {}
-@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']})
-@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })
+@ProxyCmp({inputs: ['color', 'disabled', 'mode', 'name', 'value']})
+@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'name', 'value'] })
 export class IonRadio {
-  ionSelect!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSelect', 'ionFocus', 'ionBlur']);
+    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
   }
 }
 
@@ -680,15 +679,13 @@ export class IonSegment {
 }
 
 export declare interface IonSegmentButton extends Components.IonSegmentButton {}
-@ProxyCmp({inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value']})
-@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value'] })
+@ProxyCmp({inputs: ['disabled', 'layout', 'mode', 'type', 'value']})
+@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'layout', 'mode', 'type', 'value'] })
 export class IonSegmentButton {
-  ionSelect!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSelect']);
   }
 }
 
@@ -709,8 +706,8 @@ export class IonSelect {
 }
 
 export declare interface IonSelectOption extends Components.IonSelectOption {}
-@ProxyCmp({inputs: ['disabled', 'selected', 'value']})
-@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
+@ProxyCmp({inputs: ['disabled', 'value']})
+@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'value'] })
 export class IonSelectOption {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

diff --git a/core/api.txt b/core/api.txt
@@ -790,15 +790,13 @@ ion-progress-bar,css-prop,--buffer-background
 ion-progress-bar,css-prop,--progress-background
 
 ion-radio,shadow
-ion-radio,prop,checked,boolean,false,false,false
 ion-radio,prop,color,string | undefined,undefined,false,false
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
 ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
-ion-radio,event,ionSelect,RadioChangeEventDetail,true
 ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
@@ -952,13 +950,11 @@ ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
 
 ion-segment-button,shadow
-ion-segment-button,prop,checked,boolean,false,false,false
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
-ion-segment-button,event,ionSelect,void,true
 ion-segment-button,css-prop,--background
 ion-segment-button,css-prop,--background-checked
 ion-segment-button,css-prop,--background-disabled
@@ -1012,7 +1008,6 @@ ion-select,css-prop,--placeholder-opacity
 
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
-ion-select-option,prop,selected,boolean,false,false,false
 ion-select-option,prop,value,any,undefined,false,false
 
 ion-skeleton-text,shadow

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -33,7 +33,6 @@ import {
   OverlayEventDetail,
   PickerButton,
   PickerColumn,
-  RadioChangeEventDetail,
   RadioGroupChangeEventDetail,
   RangeChangeEventDetail,
   RangeValue,
@@ -1701,10 +1700,6 @@ export namespace Components {
     'value': number;
   }
   interface IonRadio {
-    /**
-    * If `true`, the radio is selected.
-    */
-    'checked': boolean;
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -2063,10 +2058,6 @@ export namespace Components {
     'value'?: string | null;
   }
   interface IonSegmentButton {
-    /**
-    * If `true`, the segment button is selected.
-    */
-    'checked': boolean;
     /**
     * If `true`, the user cannot interact with the segment button.
     */
@@ -2149,10 +2140,6 @@ export namespace Components {
     */
     'disabled': boolean;
     /**
-    * If `true`, the element is selected.
-    */
-    'selected': boolean;
-    /**
     * The text value of the option.
     */
     'value'?: any | null;
@@ -4841,10 +4828,6 @@ declare namespace LocalJSX {
     'value'?: number;
   }
   interface IonRadio {
-    /**
-    * If `true`, the radio is selected.
-    */
-    'checked'?: boolean;
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4870,10 +4853,6 @@ declare namespace LocalJSX {
     */
     'onIonFocus'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted when the radio button is selected.
-    */
-    'onIonSelect'?: (event: CustomEvent<RadioChangeEventDetail>) => void;
-    /**
     * the value of the radio.
     */
     'value'?: any | null;
@@ -5243,10 +5222,6 @@ declare namespace LocalJSX {
     'value'?: string | null;
   }
   interface IonSegmentButton {
-    /**
-    * If `true`, the segment button is selected.
-    */
-    'checked'?: boolean;
     /**
     * If `true`, the user cannot interact with the segment button.
     */
@@ -5260,10 +5235,6 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
     /**
-    * Emitted when the segment button is clicked.
-    */
-    'onIonSelect'?: (event: CustomEvent<void>) => void;
-    /**
     * The type of the button.
     */
     'type'?: 'submit' | 'reset' | 'button';
@@ -5344,10 +5315,6 @@ declare namespace LocalJSX {
     */
     'disabled'?: boolean;
     /**
-    * If `true`, the element is selected.
-    */
-    'selected'?: boolean;
-    /**
     * The text value of the option.
     */
     'value'?: any | null;

diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html
@@ -188,6 +188,7 @@
             label: 'Radio 1',
             value: 'value1',
             checked: true
+
           },
           {
             type: 'radio',

diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html
@@ -46,10 +46,10 @@
 
         <ion-item>
           <ion-label>Disabled Select</ion-label>
-          <ion-select disabled>
+          <ion-select disabled value="n64">
             <ion-select-option value="">No Game Console</ion-select-option>
             <ion-select-option value="nes">NES</ion-select-option>
-            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="n64">Nintendo64</ion-select-option>
             <ion-select-option value="ps">PlayStation</ion-select-option>
             <ion-select-option value="genesis">Sega Genesis</ion-select-option>
             <ion-select-option value="saturn">Sega Saturn</ion-select-option>

diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html
@@ -38,10 +38,10 @@
 
           <ion-item>
             <ion-label>Select</ion-label>
-            <ion-select name="select" id="select">
+            <ion-select name="select" id="select" value="n64">
               <ion-select-option value="">No Game Console</ion-select-option>
               <ion-select-option value="nes">NES</ion-select-option>
-              <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+              <ion-select-option value="n64">Nintendo64</ion-select-option>
               <ion-select-option value="ps">PlayStation</ion-select-option>
               <ion-select-option value="genesis">Sega Genesis</ion-select-option>
               <ion-select-option value="saturn">Sega Saturn</ion-select-option>