docs(select): add modal interface to ion-select docs (#3872)

* docs(select): update select docs for modal interface

* fix(select): point playground to correct demo

Author: tanner-reits

docs/api/select.md

@@ -70,7 +70,7 @@ import SingleSelectionExample from '@site/static/usage/v8/select/basic/single-se
 
 ## Multiple Selection
 
-By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
+By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert, popover, or modal overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
 
 :::note
 
@@ -86,7 +86,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl
 
 ## Interfaces
 
-By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
+By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md), [ion-popover](popover.md), or [ion-modal](modal.md) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
 
 ### Alert
 
@@ -107,6 +107,12 @@ import PopoverExample from '@site/static/usage/v8/select/interfaces/popover/inde
 
 <PopoverExample />
 
+### Modal
+
+import ModalExample from '@site/static/usage/v8/select/interfaces/modal/index.md';
+
+<ModalExample />
+
 ## Responding to Interaction
 
 The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.
@@ -161,15 +167,19 @@ The alert supports two buttons: `Cancel` and `OK`. Each button's text can be cus
 
 The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
 
+The `modal` interface has a single `Close` button in the header. This button is only responsible for dismissing the modal. Any selections made will persist
+after clicking this button or if the modal is dismissed using an alternative method.
+
 import ButtonTextExample from '@site/static/usage/v8/select/customization/button-text/index.md';
 
 <ButtonTextExample />
 
 ## Interface Options
 
-Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
+Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
 
-See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts.
+See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), and [ion-modal docs](modal.md)
+for the properties that each interface accepts.
 
 Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
 
@@ -207,11 +217,13 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty
 
 ### Styling Select Interface
 
-Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
+Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
+that interface's documentation:
 
-- [Alert Customization](alert.md#customization)
-- [Action Sheet Customization](action-sheet.md#customization)
-- [Popover Customization](popover.md#customization)
+- [Alert](alert.md#css-shadow-parts)
+- [Action Sheet](action-sheet.md#css-shadow-parts)
+- [Popover](popover.md#css-shadow-parts)
+- [Modal](modal.md#css-shadow-parts)
 
 However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
 
@@ -304,7 +316,7 @@ These keyboard interactions apply to all `ion-select` elements when the followin
 
 Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
 
-These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover` elements when the overlay is presented and focused.
+These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, `ion-popover`, and `ion-modal` elements when the overlay is presented and focused.
 
 | Key                   | Description                                                  |
 | --------------------- | ------------------------------------------------------------ |
@@ -321,7 +333,7 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p
 
 Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
 
-These keyboard interactions apply to `ion-alert` and `ion-popover` elements when the overlay is presented and multiple selection is enabled.
+These keyboard interactions apply to `ion-alert`, `ion-popover`, and `ion-modal` elements when the overlay is presented and multiple selection is enabled.
 
 | Key                | Description                                                  |
 | ------------------ | ------------------------------------------------------------ |

static/usage/v8/select/customization/interface-options/angular/example_component_html.md

@@ -28,5 +28,13 @@
       <ion-select-option value="blue">Blue</ion-select-option>
     </ion-select>
   </ion-item>
+
+  <ion-item>
+    <ion-select label="Modal" [interfaceOptions]="customModalOptions" interface="modal" placeholder="Select One">
+      <ion-select-option value="reese's">Reese's</ion-select-option>
+      <ion-select-option value="snickers">Snickers</ion-select-option>
+      <ion-select-option value="twix">Twix</ion-select-option>
+    </ion-select>
+  </ion-item>
 </ion-list>
 ```

static/usage/v8/select/customization/interface-options/angular/example_component_ts.md

@@ -23,5 +23,11 @@ export class ExampleComponent {
     header: 'Colors',
     subHeader: 'Select your favorite color',
   };
+
+  customModalOptions = {
+    header: 'Favorite Candy',
+    breakpoints: [0, 0.5],
+    initialBreakpoint: 0.5,
+  };
 }
 ```

static/usage/v8/select/customization/interface-options/demo.html

@@ -49,6 +49,14 @@
                 <ion-select-option value="blue">Blue</ion-select-option>
               </ion-select>
             </ion-item>
+
+            <ion-item>
+              <ion-select label="Modal" id="customModalSelect" interface="modal" placeholder="Select One">
+                <ion-select-option value="reese's">Reese's</ion-select-option>
+                <ion-select-option value="snickers">Snickers</ion-select-option>
+                <ion-select-option value="twix">Twix</ion-select-option>
+              </ion-select>
+            </ion-item>
           </ion-list>
         </div>
       </ion-content>
@@ -78,6 +86,14 @@
         subHeader: 'Select your favorite color',
       };
       customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+
+      const customModalSelect = document.getElementById('customModalSelect');
+      const customModalOptions = {
+        header: 'Favorite Candy',
+        breakpoints: [0, 0.5],
+        initialBreakpoint: 0.5,
+      };
+      customModalSelect.interfaceOptions = customModalOptions;
     </script>
   </body>
 </html>

static/usage/v8/select/customization/interface-options/javascript.md

@@ -23,6 +23,14 @@
       <ion-select-option value="blue">Blue</ion-select-option>
     </ion-select>
   </ion-item>
+
+  <ion-item>
+    <ion-select label="Modal" id="customModalSelect" interface="modal" placeholder="Select One">
+      <ion-select-option value="reese's">Reese's</ion-select-option>
+      <ion-select-option value="snickers">Snickers</ion-select-option>
+      <ion-select-option value="twix">Twix</ion-select-option>
+    </ion-select>
+  </ion-item>
 </ion-list>
 
 <script>
@@ -49,5 +57,13 @@
     subHeader: 'Select your favorite color',
   };
   customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+
+  const customModalSelect = document.getElementById('customModalSelect');
+  const customModalOptions = {
+    header: 'Favorite Candy',
+    breakpoints: [0, 0.5],
+    initialBreakpoint: 0.5,
+  };
+  customModalSelect.interfaceOptions = customModalOptions;
 </script>
 ```

static/usage/v8/select/customization/interface-options/react.md

@@ -20,6 +20,12 @@ function Example() {
     subHeader: 'Select your favorite color',
   };
 
+  const customModalOptions = {
+    header: 'Favorite Candy',
+    breakpoints: [0, 0.5],
+    initialBreakpoint: 0.5,
+  };
+
   return (
     <IonList>
       <IonItem>
@@ -50,6 +56,14 @@ function Example() {
           <IonSelectOption value="blue">Blue</IonSelectOption>
         </IonSelect>
       </IonItem>
+
+      <IonItem>
+        <IonSelect label="Modal" interfaceOptions={customModalOptions} interface="modal" placeholder="Select One">
+          <IonSelectOption value="reese's">Reese's</IonSelectOption>
+          <IonSelectOption value="snickers">Snickers</IonSelectOption>
+          <IonSelectOption value="twix">Twix</IonSelectOption>
+        </IonSelect>
+      </IonItem>
     </IonList>
   );
 }

static/usage/v8/select/customization/interface-options/vue.md

@@ -34,6 +34,14 @@
         <ion-select-option value="blue">Blue</ion-select-option>
       </ion-select>
     </ion-item>
+
+    <ion-item>
+      <ion-select label="Modal" :interface-options="customModalOptions" interface="modal" placeholder="Select One">
+        <ion-select-option value="reese's">Reese's</ion-select-option>
+        <ion-select-option value="snickers">Snickers</ion-select-option>
+        <ion-select-option value="twix">Twix</ion-select-option>
+      </ion-select>
+    </ion-item>
   </ion-list>
 </template>
 
@@ -62,10 +70,17 @@
         subHeader: 'Select your favorite color',
       };
 
+      const customModalOptions = {
+        header: 'Favorite Candy',
+        breakpoints: [0, 0.5],
+        initialBreakpoint: 0.5,
+      };
+
       return {
         customAlertOptions,
         customPopoverOptions,
         customActionSheetOptions,
+        customModalOptions,
       };
     },
   });

static/usage/v8/select/interfaces/modal/angular.md

@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```

static/usage/v8/select/interfaces/modal/demo.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Select - Modal</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
+                <ion-select-option value="apples">Apples</ion-select-option>
+                <ion-select-option value="oranges">Oranges</ion-select-option>
+                <ion-select-option value="bananas">Bananas</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v8/select/interfaces/modal/index.md

@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="8"
+  size="400px"
+  code={{ javascript, react, vue, angular }}
+  src="usage/v8/select/interfaces/modal/demo.html"
+/>

static/usage/v8/select/interfaces/modal/javascript.md

@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
+      <ion-select-option value="apples">Apples</ion-select-option>
+      <ion-select-option value="oranges">Oranges</ion-select-option>
+      <ion-select-option value="bananas">Bananas</ion-select-option>
+    </ion-select>
+  </ion-item>
+</ion-list>
+```

static/usage/v8/select/interfaces/modal/react.md

@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react';
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonSelect aria-label="Fruit" interface="modal" placeholder="Select fruit">
+          <IonSelectOption value="apples">Apples</IonSelectOption>
+          <IonSelectOption value="oranges">Oranges</IonSelectOption>
+          <IonSelectOption value="bananas">Bananas</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```

static/usage/v8/select/interfaces/modal/vue.md

@@ -0,0 +1,22 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-select aria-label="Fruit" interface="modal" placeholder="Select fruit">
+        <ion-select-option value="apples">Apples</ion-select-option>
+        <ion-select-option value="oranges">Oranges</ion-select-option>
+        <ion-select-option value="bananas">Bananas</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+  import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonList, IonItem, IonSelect, IonSelectOption },
+  });
+</script>
+```