feat(picker-legacy, picker-legacy-column): remove legacy components

BREAKING.md

@@ -15,10 +15,16 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Version 9.x
 
 - [Components](#version-9x-components)
+  - [Legacy Picker](#version-9x-legacy-picker)
   - [Router Outlet](#version-9x-router-outlet)
 
 <h2 id="version-9x-components">Components</h2>
 
+<h4 id="version-9x-legacy-picker">Legacy Picker</h4>
+
+- `ion-picker-legacy` and `ion-picker-legacy-column` have been removed. The legacy picker component has been replaced with a inline picker component.
+   - Usages such as `ion-picker-legacy` or `IonPickerLegacy` should be changed to `ion-picker` and `IonPicker`, respectively.
+
 <h4 id="version-9x-router-outlet">Router Outlet</h4>
 
 `ion-router-outlet` now exposes a `swipeGesture` property that controls the swipe-to-go-back gesture per outlet. This property defaults to `true` in `"ios"` mode and `false` in `"md"` mode.

core/api.txt

@@ -1281,61 +1281,6 @@ ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "pr
 ion-picker-column-option,prop,disabled,boolean,false,false,false
 ion-picker-column-option,prop,value,any,undefined,false,false
 
-ion-picker-legacy,scoped
-ion-picker-legacy,prop,animated,boolean,true,false,false
-ion-picker-legacy,prop,backdropDismiss,boolean,true,false,false
-ion-picker-legacy,prop,buttons,PickerButton[],[],false,false
-ion-picker-legacy,prop,columns,PickerColumn[],[],false,false
-ion-picker-legacy,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-picker-legacy,prop,duration,number,0,false,false
-ion-picker-legacy,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker-legacy,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
-ion-picker-legacy,prop,isOpen,boolean,false,false,false
-ion-picker-legacy,prop,keyboardClose,boolean,true,false,false
-ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false
-ion-picker-legacy,prop,showBackdrop,boolean,true,false,false
-ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false
-ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
-ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
-ion-picker-legacy,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker-legacy,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
-ion-picker-legacy,method,present,present() => Promise<void>
-ion-picker-legacy,event,didDismiss,OverlayEventDetail<any>,true
-ion-picker-legacy,event,didPresent,void,true
-ion-picker-legacy,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
-ion-picker-legacy,event,ionPickerDidPresent,void,true
-ion-picker-legacy,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
-ion-picker-legacy,event,ionPickerWillPresent,void,true
-ion-picker-legacy,event,willDismiss,OverlayEventDetail<any>,true
-ion-picker-legacy,event,willPresent,void,true
-ion-picker-legacy,css-prop,--backdrop-opacity,ios
-ion-picker-legacy,css-prop,--backdrop-opacity,md
-ion-picker-legacy,css-prop,--background,ios
-ion-picker-legacy,css-prop,--background,md
-ion-picker-legacy,css-prop,--background-rgb,ios
-ion-picker-legacy,css-prop,--background-rgb,md
-ion-picker-legacy,css-prop,--border-color,ios
-ion-picker-legacy,css-prop,--border-color,md
-ion-picker-legacy,css-prop,--border-radius,ios
-ion-picker-legacy,css-prop,--border-radius,md
-ion-picker-legacy,css-prop,--border-style,ios
-ion-picker-legacy,css-prop,--border-style,md
-ion-picker-legacy,css-prop,--border-width,ios
-ion-picker-legacy,css-prop,--border-width,md
-ion-picker-legacy,css-prop,--height,ios
-ion-picker-legacy,css-prop,--height,md
-ion-picker-legacy,css-prop,--max-height,ios
-ion-picker-legacy,css-prop,--max-height,md
-ion-picker-legacy,css-prop,--max-width,ios
-ion-picker-legacy,css-prop,--max-width,md
-ion-picker-legacy,css-prop,--min-height,ios
-ion-picker-legacy,css-prop,--min-height,md
-ion-picker-legacy,css-prop,--min-width,ios
-ion-picker-legacy,css-prop,--min-width,md
-ion-picker-legacy,css-prop,--width,ios
-ion-picker-legacy,css-prop,--width,md
-
 ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
 ion-popover,prop,animated,boolean,true,false,false

core/src/components/app/test/safe-area/app.e2e.ts

@@ -37,9 +37,6 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
       test('should not have visual regressions with menu', async ({ page }) => {
         await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
       });
-      test('should not have visual regressions with picker', async ({ page }) => {
-        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
-      });
       test('should not have visual regressions with toast', async ({ page }) => {
         await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
       });

core/src/components/app/test/safe-area/index.html

@@ -55,7 +55,6 @@
           <ion-card-content>
             <button class="expand" id="show-action-sheet" onclick="showActionSheet()">Show Action Sheet</button>
             <button class="expand" id="show-menu" onclick="showMenu()">Show Menu</button>
-            <button class="expand" id="show-picker" onclick="showPicker()">Show Picker</button>
             <button class="expand" id="show-toast" onclick="showToast()">Show Toast</button>
           </ion-card-content>
         </ion-card>
@@ -115,26 +114,6 @@
         await menu.open();
       }
 
-      async function showPicker() {
-        const picker = Object.assign(document.createElement('ion-picker-legacy'), {
-          columns: [
-            {
-              name: 'Picker',
-              selectedIndex: 2,
-              options: [
-                { text: 'First' },
-                { text: 'Second' },
-                { text: 'Third' },
-                { text: 'Fourth' },
-                { text: 'Fifth' },
-              ],
-            },
-          ],
-        });
-        document.body.appendChild(picker);
-        await picker.present();
-      }
-
       async function showToast() {
         const toast = Object.assign(document.createElement('ion-toast'), {
           message: 'Hello world!',