From c3aa31ceebc00a0eeb66ad8b528018361f2aa08e Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 27 Nov 2023 13:38:24 -0600 Subject: [PATCH 01/10] add docs for input --- docs/api/input.md | 14 +++++++++ .../usage/v7/input/start-end-slots/angular.md | 12 +++++++ .../usage/v7/input/start-end-slots/demo.html | 31 +++++++++++++++++++ .../usage/v7/input/start-end-slots/index.md | 17 ++++++++++ .../v7/input/start-end-slots/javascript.md | 12 +++++++ .../usage/v7/input/start-end-slots/react.md | 22 +++++++++++++ static/usage/v7/input/start-end-slots/vue.md | 29 +++++++++++++++++ 7 files changed, 137 insertions(+) create mode 100644 static/usage/v7/input/start-end-slots/angular.md create mode 100644 static/usage/v7/input/start-end-slots/demo.html create mode 100644 static/usage/v7/input/start-end-slots/index.md create mode 100644 static/usage/v7/input/start-end-slots/javascript.md create mode 100644 static/usage/v7/input/start-end-slots/react.md create mode 100644 static/usage/v7/input/start-end-slots/vue.md diff --git a/docs/api/input.md b/docs/api/input.md index afbf24ced47..8a48d7a292b 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -148,6 +148,20 @@ 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. + +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 interactive, it should be wrapped in an interactable element such as a [Button](./button.md). This ensures that the content can be tabbed to. + +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. + +import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'; + + + ## Theming ### Colors 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..f11fbd6aae5 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/react.md @@ -0,0 +1,22 @@ +```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..b4665ae5ba5 --- /dev/null +++ b/static/usage/v7/input/start-end-slots/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` From d3ef7a5d21d89240af27635612b41da5f9b4b7b4 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 27 Nov 2023 13:44:39 -0600 Subject: [PATCH 02/10] add docs for textarea --- docs/api/textarea.md | 14 +++++++++ .../v7/textarea/start-end-slots/angular.md | 12 +++++++ .../v7/textarea/start-end-slots/demo.html | 31 +++++++++++++++++++ .../v7/textarea/start-end-slots/index.md | 17 ++++++++++ .../v7/textarea/start-end-slots/javascript.md | 12 +++++++ .../v7/textarea/start-end-slots/react.md | 22 +++++++++++++ .../usage/v7/textarea/start-end-slots/vue.md | 29 +++++++++++++++++ 7 files changed, 137 insertions(+) create mode 100644 static/usage/v7/textarea/start-end-slots/angular.md create mode 100644 static/usage/v7/textarea/start-end-slots/demo.html create mode 100644 static/usage/v7/textarea/start-end-slots/index.md create mode 100644 static/usage/v7/textarea/start-end-slots/javascript.md create mode 100644 static/usage/v7/textarea/start-end-slots/react.md create mode 100644 static/usage/v7/textarea/start-end-slots/vue.md diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 25c3328f4d0..ec767443609 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -109,6 +109,20 @@ 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. + +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 interactive, it should be wrapped in an interactable element such as a [Button](./button.md). This ensures that the content can be tabbed to. + +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. + +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/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..bd429cb9cc3 --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/react.md @@ -0,0 +1,22 @@ +```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..7bee2d0ba9a --- /dev/null +++ b/static/usage/v7/textarea/start-end-slots/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` From 9496178dd093f05cb29125e6391ce3799b43aa6e Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 27 Nov 2023 15:07:10 -0600 Subject: [PATCH 03/10] add docs for select --- docs/api/select.md | 12 +++++++ .../v7/select/start-end-slots/angular.md | 15 ++++++++ .../usage/v7/select/start-end-slots/demo.html | 34 +++++++++++++++++++ .../usage/v7/select/start-end-slots/index.md | 18 ++++++++++ .../v7/select/start-end-slots/javascript.md | 15 ++++++++ .../usage/v7/select/start-end-slots/react.md | 25 ++++++++++++++ static/usage/v7/select/start-end-slots/vue.md | 32 +++++++++++++++++ 7 files changed, 151 insertions(+) create mode 100644 static/usage/v7/select/start-end-slots/angular.md create mode 100644 static/usage/v7/select/start-end-slots/demo.html create mode 100644 static/usage/v7/select/start-end-slots/index.md create mode 100644 static/usage/v7/select/start-end-slots/javascript.md create mode 100644 static/usage/v7/select/start-end-slots/react.md create mode 100644 static/usage/v7/select/start-end-slots/vue.md diff --git a/docs/api/select.md b/docs/api/select.md index b462d92a696..55a5707da44 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -173,6 +173,18 @@ 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 input. + +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 interactive, it should be wrapped in an interactable 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/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..a8a6b13bd9d --- /dev/null +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -0,0 +1,34 @@ + + + + + + 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..7937874d412 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/react.md @@ -0,0 +1,25 @@ +```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..e1708f06ca0 --- /dev/null +++ b/static/usage/v7/select/start-end-slots/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` From a629f1a402a796c496a07fd77c9b8155cb6dd749 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 28 Nov 2023 13:04:44 -0600 Subject: [PATCH 04/10] account for width collapsing bug on select --- static/usage/v7/select/start-end-slots/demo.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/usage/v7/select/start-end-slots/demo.html b/static/usage/v7/select/start-end-slots/demo.html index a8a6b13bd9d..27781ec0ee2 100644 --- a/static/usage/v7/select/start-end-slots/demo.html +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -8,6 +8,12 @@ + + From d723dddafe6371dac4ea6f8c52a3acf63499b328 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 28 Nov 2023 13:12:35 -0600 Subject: [PATCH 05/10] lint --- static/usage/v7/input/start-end-slots/react.md | 1 - static/usage/v7/input/start-end-slots/vue.md | 10 +++++++--- static/usage/v7/select/start-end-slots/react.md | 1 - static/usage/v7/select/start-end-slots/vue.md | 11 ++++++++--- static/usage/v7/textarea/start-end-slots/react.md | 1 - static/usage/v7/textarea/start-end-slots/vue.md | 10 +++++++--- 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/static/usage/v7/input/start-end-slots/react.md b/static/usage/v7/input/start-end-slots/react.md index f11fbd6aae5..b638d8c8f07 100644 --- a/static/usage/v7/input/start-end-slots/react.md +++ b/static/usage/v7/input/start-end-slots/react.md @@ -19,4 +19,3 @@ function Example() { } 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 index b4665ae5ba5..76380eb566a 100644 --- a/static/usage/v7/input/start-end-slots/vue.md +++ b/static/usage/v7/input/start-end-slots/vue.md @@ -19,11 +19,15 @@ export default defineComponent({ components: { - IonButton, IonIcon, IonInput, IonItem, IonList, + IonButton, + IonIcon, + IonInput, + IonItem, + IonList, }, setup() { - return { eye, lockClosed } - } + return { eye, lockClosed }; + }, }); ``` diff --git a/static/usage/v7/select/start-end-slots/react.md b/static/usage/v7/select/start-end-slots/react.md index 7937874d412..98bbf6208d7 100644 --- a/static/usage/v7/select/start-end-slots/react.md +++ b/static/usage/v7/select/start-end-slots/react.md @@ -22,4 +22,3 @@ function Example() { } 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 index e1708f06ca0..37882998e57 100644 --- a/static/usage/v7/select/start-end-slots/vue.md +++ b/static/usage/v7/select/start-end-slots/vue.md @@ -22,11 +22,16 @@ export default defineComponent({ components: { - IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption + IonButton, + IonIcon, + IonItem, + IonList, + IonSelect, + IonSelectOption, }, setup() { - return { eye, leaf } - } + return { eye, leaf }; + }, }); ``` diff --git a/static/usage/v7/textarea/start-end-slots/react.md b/static/usage/v7/textarea/start-end-slots/react.md index bd429cb9cc3..469f6bd8f84 100644 --- a/static/usage/v7/textarea/start-end-slots/react.md +++ b/static/usage/v7/textarea/start-end-slots/react.md @@ -19,4 +19,3 @@ function Example() { } 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 index 7bee2d0ba9a..629240c1456 100644 --- a/static/usage/v7/textarea/start-end-slots/vue.md +++ b/static/usage/v7/textarea/start-end-slots/vue.md @@ -19,11 +19,15 @@ export default defineComponent({ components: { - IonButton, IonIcon, IonItem, IonList, IonTextarea + IonButton, + IonIcon, + IonItem, + IonList, + IonTextarea, }, setup() { - return { eye, lockClosed } - } + return { eye, lockClosed }; + }, }); ``` From d921c48416d4a9a4dd4e970fa6389c66e571b911 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 28 Nov 2023 13:20:12 -0600 Subject: [PATCH 06/10] spelling --- docs/api/input.md | 2 +- docs/api/select.md | 2 +- docs/api/textarea.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 8a48d7a292b..e5ac9c13ab5 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -154,7 +154,7 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi 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 interactive, it should be wrapped in an interactable element such as a [Button](./button.md). This ensures that the content can be tabbed to. +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. 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. diff --git a/docs/api/select.md b/docs/api/select.md index 55a5707da44..68d7373dc2e 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -179,7 +179,7 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi 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 interactive, it should be wrapped in an interactable element such as a [Button](./button.md). This ensures that the content can be tabbed to. +If slot content is meant to be interacted witih, 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'; diff --git a/docs/api/textarea.md b/docs/api/textarea.md index ec767443609..903f12c8d3b 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -115,7 +115,7 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi 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 interactive, it should be wrapped in an interactable element such as a [Button](./button.md). This ensures that the content can be tabbed to. +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. 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. From c941f37b05c208cf5ae2d67b3f5493c6881f4e85 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Tue, 28 Nov 2023 13:25:21 -0600 Subject: [PATCH 07/10] typo --- docs/api/select.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/select.md b/docs/api/select.md index 68d7373dc2e..ff56998c1e5 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -179,7 +179,7 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi 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 witih, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. +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'; From 175da46c8602a441dca45a2e67a6d9446680e3ef Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 1 Dec 2023 14:18:59 -0600 Subject: [PATCH 08/10] add comment to temp patch --- static/usage/v7/select/start-end-slots/demo.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/static/usage/v7/select/start-end-slots/demo.html b/static/usage/v7/select/start-end-slots/demo.html index 27781ec0ee2..fa04ee84bfb 100644 --- a/static/usage/v7/select/start-end-slots/demo.html +++ b/static/usage/v7/select/start-end-slots/demo.html @@ -10,6 +10,11 @@