From 3ecff42c659bf811dc9dce11462198a8b73e0c74 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 13:12:09 -0400 Subject: [PATCH 1/5] docs(textarea): add docs --- docs/api/input.md | 2 -- docs/api/textarea.md | 30 ++++++++++++++++++++++++++++-- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 6bdecfc9568..dd7507df3c4 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -70,8 +70,6 @@ import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.m - - ## Clear Options Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default. diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 9315c981358..c837e6e7239 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -28,15 +28,41 @@ The textarea component accepts the [native textarea attributes](https://develope import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md'; + +## Labels -## Label Placement +Labels should be used to describe the textarea. They can be used visually, and they will also be read out by screen readers when the user is focused on the textarea. This makes it easy for the user to understand the intent of the textarea. Textarea has several ways to assign a label: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels (experimental) +- `aria-label`: used to provide a label for screen readers but adds no visible label + +### Label Placement Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. -import Labels from '@site/static/usage/v7/textarea/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.md'; +### Label Slot (experimental) + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +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 LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; + + + ## Filled Textareas Material Design offers filled styles for a textarea. The `fill` property on the item can be set to either `"solid"` or `"outline"`. From 1ba52bd9f70625d9e1262f6a3f63dcefb232dad6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 13:13:36 -0400 Subject: [PATCH 2/5] chore: add base playgrounds from input --- docs/api/textarea.md | 4 +-- .../usage/v7/textarea/label-slot/angular.md | 9 ++++++ static/usage/v7/textarea/label-slot/demo.html | 28 +++++++++++++++++++ static/usage/v7/textarea/label-slot/index.md | 12 ++++++++ .../v7/textarea/label-slot/javascript.md | 9 ++++++ static/usage/v7/textarea/label-slot/react.md | 17 +++++++++++ static/usage/v7/textarea/label-slot/vue.md | 20 +++++++++++++ .../v7/textarea/no-visible-label/angular.md | 7 +++++ .../v7/textarea/no-visible-label/demo.html | 26 +++++++++++++++++ .../v7/textarea/no-visible-label/index.md | 12 ++++++++ .../textarea/no-visible-label/javascript.md | 7 +++++ .../v7/textarea/no-visible-label/react.md | 15 ++++++++++ .../usage/v7/textarea/no-visible-label/vue.md | 18 ++++++++++++ 13 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 static/usage/v7/textarea/label-slot/angular.md create mode 100644 static/usage/v7/textarea/label-slot/demo.html create mode 100644 static/usage/v7/textarea/label-slot/index.md create mode 100644 static/usage/v7/textarea/label-slot/javascript.md create mode 100644 static/usage/v7/textarea/label-slot/react.md create mode 100644 static/usage/v7/textarea/label-slot/vue.md create mode 100644 static/usage/v7/textarea/no-visible-label/angular.md create mode 100644 static/usage/v7/textarea/no-visible-label/demo.html create mode 100644 static/usage/v7/textarea/no-visible-label/index.md create mode 100644 static/usage/v7/textarea/no-visible-label/javascript.md create mode 100644 static/usage/v7/textarea/no-visible-label/react.md create mode 100644 static/usage/v7/textarea/no-visible-label/vue.md diff --git a/docs/api/textarea.md b/docs/api/textarea.md index c837e6e7239..ad858075554 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -51,7 +51,7 @@ While plaintext labels should be passed in via the `label` property, if custom H 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 LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md'; @@ -59,7 +59,7 @@ import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md'; diff --git a/static/usage/v7/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular.md new file mode 100644 index 00000000000..21bdbf74b64 --- /dev/null +++ b/static/usage/v7/textarea/label-slot/angular.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v7/textarea/label-slot/demo.html b/static/usage/v7/textarea/label-slot/demo.html new file mode 100644 index 00000000000..234aa3cbec3 --- /dev/null +++ b/static/usage/v7/textarea/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + input + + + + + + + + + +
+ + + +
Email (Required)
+ + + +
+ + + + diff --git a/static/usage/v7/textarea/label-slot/index.md b/static/usage/v7/textarea/label-slot/index.md new file mode 100644 index 00000000000..8af442e5bce --- /dev/null +++ b/static/usage/v7/textarea/label-slot/index.md @@ -0,0 +1,12 @@ +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/label-slot/javascript.md b/static/usage/v7/textarea/label-slot/javascript.md new file mode 100644 index 00000000000..494d85ba6cb --- /dev/null +++ b/static/usage/v7/textarea/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v7/textarea/label-slot/react.md b/static/usage/v7/textarea/label-slot/react.md new file mode 100644 index 00000000000..d4bc7902935 --- /dev/null +++ b/static/usage/v7/textarea/label-slot/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
Email (Required)
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/textarea/label-slot/vue.md b/static/usage/v7/textarea/label-slot/vue.md new file mode 100644 index 00000000000..4b3fb3daeb8 --- /dev/null +++ b/static/usage/v7/textarea/label-slot/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v7/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v7/textarea/no-visible-label/demo.html b/static/usage/v7/textarea/no-visible-label/demo.html new file mode 100644 index 00000000000..b8155e10e6f --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + input + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v7/textarea/no-visible-label/index.md b/static/usage/v7/textarea/no-visible-label/index.md new file mode 100644 index 00000000000..ca0024ae17c --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/index.md @@ -0,0 +1,12 @@ +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/no-visible-label/javascript.md b/static/usage/v7/textarea/no-visible-label/javascript.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v7/textarea/no-visible-label/react.md b/static/usage/v7/textarea/no-visible-label/react.md new file mode 100644 index 00000000000..38842ecb0b6 --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/textarea/no-visible-label/vue.md b/static/usage/v7/textarea/no-visible-label/vue.md new file mode 100644 index 00000000000..cc181047943 --- /dev/null +++ b/static/usage/v7/textarea/no-visible-label/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` From c010723346f25e3e7f4e33a7829b4b4d81a11989 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 13:14:08 -0400 Subject: [PATCH 3/5] add dev build --- static/usage/v7/textarea/label-slot/demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/textarea/label-slot/demo.html b/static/usage/v7/textarea/label-slot/demo.html index 234aa3cbec3..6e5bbf53a97 100644 --- a/static/usage/v7/textarea/label-slot/demo.html +++ b/static/usage/v7/textarea/label-slot/demo.html @@ -6,8 +6,8 @@ input - - + + From 2fca96750d4d182409b75f9173f790b266dc1e2f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 13:18:06 -0400 Subject: [PATCH 4/5] docs(textarea): update usage for textarea --- docs/api/textarea.md | 2 +- static/usage/v7/textarea/label-slot/angular.md | 6 +++--- static/usage/v7/textarea/label-slot/demo.html | 8 ++++---- static/usage/v7/textarea/label-slot/javascript.md | 6 +++--- static/usage/v7/textarea/label-slot/react.md | 8 ++++---- static/usage/v7/textarea/label-slot/vue.md | 10 +++++----- static/usage/v7/textarea/no-visible-label/angular.md | 2 +- static/usage/v7/textarea/no-visible-label/demo.html | 4 ++-- .../usage/v7/textarea/no-visible-label/javascript.md | 2 +- static/usage/v7/textarea/no-visible-label/react.md | 4 ++-- static/usage/v7/textarea/no-visible-label/vue.md | 6 +++--- 11 files changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/api/textarea.md b/docs/api/textarea.md index ad858075554..8bc1d7ee99d 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -28,7 +28,7 @@ The textarea component accepts the [native textarea attributes](https://develope import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md'; - + ## Labels Labels should be used to describe the textarea. They can be used visually, and they will also be read out by screen readers when the user is focused on the textarea. This makes it easy for the user to understand the intent of the textarea. Textarea has several ways to assign a label: diff --git a/static/usage/v7/textarea/label-slot/angular.md b/static/usage/v7/textarea/label-slot/angular.md index 21bdbf74b64..9c8e09ec88a 100644 --- a/static/usage/v7/textarea/label-slot/angular.md +++ b/static/usage/v7/textarea/label-slot/angular.md @@ -1,9 +1,9 @@ ```html - -
Email (Required)
- + +
Comments (Required)
+ ``` diff --git a/static/usage/v7/textarea/label-slot/demo.html b/static/usage/v7/textarea/label-slot/demo.html index 6e5bbf53a97..beaad2bd7a1 100644 --- a/static/usage/v7/textarea/label-slot/demo.html +++ b/static/usage/v7/textarea/label-slot/demo.html @@ -3,7 +3,7 @@ - input + textarea @@ -16,9 +16,9 @@
- -
Email (Required)
- + +
Comments (Required)
+
diff --git a/static/usage/v7/textarea/label-slot/javascript.md b/static/usage/v7/textarea/label-slot/javascript.md index 494d85ba6cb..199978f9352 100644 --- a/static/usage/v7/textarea/label-slot/javascript.md +++ b/static/usage/v7/textarea/label-slot/javascript.md @@ -1,9 +1,9 @@ ```html - -
Email (Required)
- + +
Comments (Required)
+ ``` diff --git a/static/usage/v7/textarea/label-slot/react.md b/static/usage/v7/textarea/label-slot/react.md index d4bc7902935..648c0aafb04 100644 --- a/static/usage/v7/textarea/label-slot/react.md +++ b/static/usage/v7/textarea/label-slot/react.md @@ -1,14 +1,14 @@ ```tsx import React from 'react'; -import { IonInput, IonItem, IonList, IonText } from '@ionic/react'; +import { IonTextarea, IonItem, IonList, IonText } from '@ionic/react'; function Example() { return ( - -
Email (Required)
- + +
Comments (Required)
+ ); diff --git a/static/usage/v7/textarea/label-slot/vue.md b/static/usage/v7/textarea/label-slot/vue.md index 4b3fb3daeb8..0c5d90db33c 100644 --- a/static/usage/v7/textarea/label-slot/vue.md +++ b/static/usage/v7/textarea/label-slot/vue.md @@ -2,19 +2,19 @@ ``` diff --git a/static/usage/v7/textarea/no-visible-label/angular.md b/static/usage/v7/textarea/no-visible-label/angular.md index 32616a6a196..2f4baaa7511 100644 --- a/static/usage/v7/textarea/no-visible-label/angular.md +++ b/static/usage/v7/textarea/no-visible-label/angular.md @@ -1,7 +1,7 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/no-visible-label/demo.html b/static/usage/v7/textarea/no-visible-label/demo.html index b8155e10e6f..3d4e4f4a764 100644 --- a/static/usage/v7/textarea/no-visible-label/demo.html +++ b/static/usage/v7/textarea/no-visible-label/demo.html @@ -3,7 +3,7 @@ - input + textarea @@ -16,7 +16,7 @@
- +
diff --git a/static/usage/v7/textarea/no-visible-label/javascript.md b/static/usage/v7/textarea/no-visible-label/javascript.md index 32616a6a196..2f4baaa7511 100644 --- a/static/usage/v7/textarea/no-visible-label/javascript.md +++ b/static/usage/v7/textarea/no-visible-label/javascript.md @@ -1,7 +1,7 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/no-visible-label/react.md b/static/usage/v7/textarea/no-visible-label/react.md index 38842ecb0b6..c024d0fee66 100644 --- a/static/usage/v7/textarea/no-visible-label/react.md +++ b/static/usage/v7/textarea/no-visible-label/react.md @@ -1,12 +1,12 @@ ```tsx import React from 'react'; -import { IonInput, IonItem, IonList } from '@ionic/react'; +import { IonTextarea, IonItem, IonList } from '@ionic/react'; function Example() { return ( - + ); diff --git a/static/usage/v7/textarea/no-visible-label/vue.md b/static/usage/v7/textarea/no-visible-label/vue.md index cc181047943..fc77027d770 100644 --- a/static/usage/v7/textarea/no-visible-label/vue.md +++ b/static/usage/v7/textarea/no-visible-label/vue.md @@ -2,17 +2,17 @@ ``` From c60147ce8bb8a39d553f8772306a495c439e0b79 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 20 Jun 2023 15:51:14 -0400 Subject: [PATCH 5/5] remove dev build --- static/usage/v7/textarea/label-slot/demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/v7/textarea/label-slot/demo.html b/static/usage/v7/textarea/label-slot/demo.html index beaad2bd7a1..f71b8af342a 100644 --- a/static/usage/v7/textarea/label-slot/demo.html +++ b/static/usage/v7/textarea/label-slot/demo.html @@ -6,8 +6,8 @@ textarea - - + +