diff --git a/docs/api/input.md b/docs/api/input.md index afbf24ced47..b185d516a78 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -148,6 +148,22 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https: ::: +## Start and End Slots (experimental) + +The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the input. + +Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. + +:::note +In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. + +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +::: + +import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'; + + + ## Theming ### Colors diff --git a/docs/api/select.md b/docs/api/select.md index b462d92a696..a08d54bfe3c 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -173,6 +173,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/ +## Start and End Slots + +The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open. + +:::note +In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. + +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +::: + +import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md'; + + + ## Customization There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these. diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 25c3328f4d0..2fc4fb610ac 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -109,6 +109,22 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/ +## Start and End Slots (experimental) + +The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the textarea. + +Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. + +:::note +In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. + +If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +::: + +import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md'; + + + ## Migrating from Legacy Textarea Syntax A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience. diff --git a/static/usage/v7/input/start-end-slots/angular.md b/static/usage/v7/input/start-end-slots/angular.md new file mode 100644 index 00000000000..b33306d4727 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/angular.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v7/input/start-end-slots/demo.html b/static/usage/v7/input/start-end-slots/demo.html new file mode 100644 index 00000000000..086f0c8a8b4 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/demo.html @@ -0,0 +1,31 @@ + + + + + + Input + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/input/start-end-slots/index.md b/static/usage/v7/input/start-end-slots/index.md new file mode 100644 index 00000000000..1104bcfdc9d --- /dev/null +++ b/static/usage/v7/input/start-end-slots/index.md @@ -0,0 +1,17 @@ +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'; + + diff --git a/static/usage/v7/input/start-end-slots/javascript.md b/static/usage/v7/input/start-end-slots/javascript.md new file mode 100644 index 00000000000..ed192bb8c41 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v7/input/start-end-slots/react.md b/static/usage/v7/input/start-end-slots/react.md new file mode 100644 index 00000000000..b638d8c8f07 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/react'; +import { eye, lockClosed } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/start-end-slots/vue.md b/static/usage/v7/input/start-end-slots/vue.md new file mode 100644 index 00000000000..76380eb566a --- /dev/null +++ b/static/usage/v7/input/start-end-slots/vue.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v7/select/start-end-slots/angular.md b/static/usage/v7/select/start-end-slots/angular.md new file mode 100644 index 00000000000..e42b896605c --- /dev/null +++ b/static/usage/v7/select/start-end-slots/angular.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v7/select/start-end-slots/demo.html b/static/usage/v7/select/start-end-slots/demo.html new file mode 100644 index 00000000000..fa04ee84bfb --- /dev/null +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -0,0 +1,45 @@ + + + + + + Select + + + + + + + + + + + +
+ + + + + Apple + Banana + Orange + + + + + + +
+ + + + diff --git a/static/usage/v7/select/start-end-slots/index.md b/static/usage/v7/select/start-end-slots/index.md new file mode 100644 index 00000000000..7dea970c230 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/index.md @@ -0,0 +1,18 @@ +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'; + + diff --git a/static/usage/v7/select/start-end-slots/javascript.md b/static/usage/v7/select/start-end-slots/javascript.md new file mode 100644 index 00000000000..78d136d6a6a --- /dev/null +++ b/static/usage/v7/select/start-end-slots/javascript.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v7/select/start-end-slots/react.md b/static/usage/v7/select/start-end-slots/react.md new file mode 100644 index 00000000000..98bbf6208d7 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { eye, leaf } from 'ionicons/icons'; + +function Example() { + return ( + + + + + Apple + Banana + Orange + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/select/start-end-slots/vue.md b/static/usage/v7/select/start-end-slots/vue.md new file mode 100644 index 00000000000..37882998e57 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v7/textarea/start-end-slots/angular.md b/static/usage/v7/textarea/start-end-slots/angular.md new file mode 100644 index 00000000000..ce0988fefec --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/angular.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v7/textarea/start-end-slots/demo.html b/static/usage/v7/textarea/start-end-slots/demo.html new file mode 100644 index 00000000000..cab3d77636d --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/demo.html @@ -0,0 +1,31 @@ + + + + + + Textarea + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/textarea/start-end-slots/index.md b/static/usage/v7/textarea/start-end-slots/index.md new file mode 100644 index 00000000000..d84b6df8c0f --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/index.md @@ -0,0 +1,17 @@ +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'; + + diff --git a/static/usage/v7/textarea/start-end-slots/javascript.md b/static/usage/v7/textarea/start-end-slots/javascript.md new file mode 100644 index 00000000000..a666863d413 --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v7/textarea/start-end-slots/react.md b/static/usage/v7/textarea/start-end-slots/react.md new file mode 100644 index 00000000000..469f6bd8f84 --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/react'; +import { eye, lockClosed } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/textarea/start-end-slots/vue.md b/static/usage/v7/textarea/start-end-slots/vue.md new file mode 100644 index 00000000000..629240c1456 --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/vue.md @@ -0,0 +1,33 @@ +```html + + + +```