docs(): remove mention of controllers (#20444)

resolves #20453

core/src/components/action-sheet/readme.md

@@ -2,10 +2,6 @@
 
 An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
 
-### Creating
-
-An action sheet can be created by the [Action Sheet Controller](../action-sheet-controller) from an array of `buttons`, with each button including properties for its `text`, and optionally a `handler` and `role`. If a handler returns `false` then the action sheet will not be dismissed. An action sheet can also optionally have a `header` and a `subHeader`.
-
 ### Buttons
 
 A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.

core/src/components/alert/readme.md

@@ -2,12 +2,6 @@
 
 An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
 
-
-### Creating
-
-Alerts can be created using an [Alert Controller](../alert-controller). They can be customized by passing alert options in the alert controller's create method.
-
-
 ### Buttons
 
 In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.

core/src/components/loading/readme.md

@@ -2,12 +2,6 @@
 
 An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
 
-
-### Creating
-
-Loading indicators can be created using a [Loading Controller](../loading-controller). They can be customized by passing loading options in the loading controller's `create()` method. The spinner name should be passed in the `spinner` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform.
-
-
 ### Dismissing
 
 The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.

core/src/components/menu/readme.md

@@ -175,25 +175,29 @@ constructor(private menu: MenuController) { }
   </div>
 
 </ion-app>
-<ion-menu-controller></ion-menu-controller>
 ```
 
 ```javascript
-const menuCtrl = document.querySelector('ion-menu-controller');
-
-function openFirst() {
-  menuCtrl.enable(true, 'first');
-  menuCtrl.open('first');
-}
-
-function openEnd() {
-  menuCtrl.open('end');
-}
-
-function openCustom() {
-  menuCtrl.enable(true, 'custom');
-  menuCtrl.open('custom');
-}
+<script type="module">
+    import { menuController } from '@ionic/core';
+    window.menuController = menuController;
+</script>
+  
+<script>
+  function openFirst() {
+    menuController.enable(true, 'first');
+    menuController.open('first');
+  }
+  
+  function openEnd() {
+    menuController.open('end');
+  }
+  
+  function openCustom() {
+    menuController.enable(true, 'custom');
+    menuController.open('custom');
+  }
+</script>
 ```
 
 ```css

core/src/components/menu/usage/javascript.md

@@ -65,25 +65,29 @@
   </div>
 
 </ion-app>
-<ion-menu-controller></ion-menu-controller>
 ```
 
 ```javascript
-const menuCtrl = document.querySelector('ion-menu-controller');
-
-function openFirst() {
-  menuCtrl.enable(true, 'first');
-  menuCtrl.open('first');
-}
-
-function openEnd() {
-  menuCtrl.open('end');
-}
-
-function openCustom() {
-  menuCtrl.enable(true, 'custom');
-  menuCtrl.open('custom');
-}
+<script type="module">
+    import { menuController } from '@ionic/core';
+    window.menuController = menuController;
+</script>
+  
+<script>
+  function openFirst() {
+    menuController.enable(true, 'first');
+    menuController.open('first');
+  }
+  
+  function openEnd() {
+    menuController.open('end');
+  }
+  
+  function openCustom() {
+    menuController.enable(true, 'custom');
+    menuController.open('custom');
+  }
+</script>
 ```
 
 ```css

core/src/components/modal/readme.md

@@ -2,12 +2,6 @@
 
 A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
 
-
-### Creating
-
-Modals can be created using a [Modal Controller](../modal-controller). They can be customized by passing modal options in the modal controller's `create()` method.
-
-
 ### Dismissing
 
 The modal can be dismissed after creation by calling the `dismiss()` method on the modal controller. The `onDidDismiss` function can be called to perform an action after the modal is dismissed.
@@ -255,7 +249,7 @@ customElements.define('modal-page', class extends HTMLElement {
 
 ### Dismissing a Modal
 
-A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.
+A modal can be dismissed by calling the dismiss method and optionally passing any data from the modal.
 
 ```javascript
 async function dismissModal() {

core/src/components/modal/usage/javascript.md

@@ -60,7 +60,7 @@ customElements.define('modal-page', class extends HTMLElement {
 
 ### Dismissing a Modal
 
-A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.
+A modal can be dismissed by calling the dismiss method and optionally passing any data from the modal.
 
 ```javascript
 async function dismissModal() {

core/src/components/popover/readme.md

@@ -2,10 +2,6 @@
 
 A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.
 
-### Creating
-
-Popovers can be created using a [Popover Controller](../popover-controller). They can be customized by passing popover options in the popover controller's create method.
-
 ### Presenting
 
 To present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport.

core/src/components/toast/readme.md

@@ -2,10 +2,6 @@
 
 A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.
 
-### Creating
-
-All of the toast options should be passed in the create method. The message to display should be passed in the `message` property. A button with a role of `"cancel"` can be added in order to display a close button on the toast. See the properties below for all available options.
-
 ### Positioning
 
 Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.