From 7b257e78c919cd1440e0eb2fbc466c6f3920390c Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 7 Mar 2024 10:38:14 -0600 Subject: [PATCH 1/2] docs(input): add start/end slot section back into v7 docs --- versioned_docs/version-v7/api/input.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/versioned_docs/version-v7/api/input.md b/versioned_docs/version-v7/api/input.md index f375321fae5..4a61852dc48 100644 --- a/versioned_docs/version-v7/api/input.md +++ b/versioned_docs/version-v7/api/input.md @@ -147,6 +147,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 From d304256c83b910bab7a2036d0e4128a123615cfe Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 7 Mar 2024 10:47:39 -0600 Subject: [PATCH 2/2] fix demo imports --- static/usage/v7/input/start-end-slots/demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/input/start-end-slots/demo.html b/static/usage/v7/input/start-end-slots/demo.html index 086f0c8a8b4..c29c1efd33f 100644 --- a/static/usage/v7/input/start-end-slots/demo.html +++ b/static/usage/v7/input/start-end-slots/demo.html @@ -4,8 +4,8 @@ Input - - + +