From 953cba519b0a556c1c0918e12bbff3b1d870f303 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 10:01:04 -0400 Subject: [PATCH 1/7] docs(select): add label slot playground --- docs/api/select.md | 27 +++++++++++-- static/usage/v7/select/label-slot/angular.md | 15 +++++++ static/usage/v7/select/label-slot/demo.html | 40 +++++++++++++++++++ static/usage/v7/select/label-slot/index.md | 13 ++++++ .../usage/v7/select/label-slot/javascript.md | 15 +++++++ static/usage/v7/select/label-slot/react.md | 23 +++++++++++ static/usage/v7/select/label-slot/vue.md | 26 ++++++++++++ 7 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 static/usage/v7/select/label-slot/angular.md create mode 100644 static/usage/v7/select/label-slot/demo.html create mode 100644 static/usage/v7/select/label-slot/index.md create mode 100644 static/usage/v7/select/label-slot/javascript.md create mode 100644 static/usage/v7/select/label-slot/react.md create mode 100644 static/usage/v7/select/label-slot/vue.md diff --git a/docs/api/select.md b/docs/api/select.md index d5be17b0978..61b7f26af82 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -83,16 +83,37 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md'; - -## Label Placement +## Labels + +Select has several options for supplying a label for the component: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels +- `aria-label`: used for ranges with no visible label -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. +### 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. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot. import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md'; +### Label Slot + +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. + +import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers. + +TODO Playground + ## Justification Developers can use the `justify` property to control how the label and control are packed on a line. diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular.md new file mode 100644 index 00000000000..61f94f4369e --- /dev/null +++ b/static/usage/v7/select/label-slot/angular.md @@ -0,0 +1,15 @@ +```html + + + +
+ Favorite Fruit + (Required) +
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v7/select/label-slot/demo.html b/static/usage/v7/select/label-slot/demo.html new file mode 100644 index 00000000000..e425c6a1b2a --- /dev/null +++ b/static/usage/v7/select/label-slot/demo.html @@ -0,0 +1,40 @@ + + + + + + select + + + + + + + + + + + +
+ + + +
+ Favorite Fruit + (Required) +
+ Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v7/select/label-slot/index.md b/static/usage/v7/select/label-slot/index.md new file mode 100644 index 00000000000..1b25e6b83f6 --- /dev/null +++ b/static/usage/v7/select/label-slot/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'; + + diff --git a/static/usage/v7/select/label-slot/javascript.md b/static/usage/v7/select/label-slot/javascript.md new file mode 100644 index 00000000000..61f94f4369e --- /dev/null +++ b/static/usage/v7/select/label-slot/javascript.md @@ -0,0 +1,15 @@ +```html + + + +
+ Favorite Fruit + (Required) +
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v7/select/label-slot/react.md b/static/usage/v7/select/label-slot/react.md new file mode 100644 index 00000000000..2acea04b802 --- /dev/null +++ b/static/usage/v7/select/label-slot/react.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Favorite Fruit + (Required) +
+ Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md new file mode 100644 index 00000000000..20aaffad867 --- /dev/null +++ b/static/usage/v7/select/label-slot/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` From f86301078fa5a131487fb083ce45fbb1b9c8cadc Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 10:01:38 -0400 Subject: [PATCH 2/7] fix typos --- docs/api/select.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/select.md b/docs/api/select.md index 61b7f26af82..57b3d48e9df 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -90,7 +90,7 @@ Select has several options for supplying a label for the component: - `label` property: used for plaintext labels - `label` slot: used for custom HTML labels -- `aria-label`: used for ranges with no visible label +- `aria-label`: used for selects with no visible label ### Label Placement @@ -110,7 +110,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; ### No Visible Label -If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers. +If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers. TODO Playground From fce940a4d5dc49a439613e08c7c8935cf9bd608c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 10:04:54 -0400 Subject: [PATCH 3/7] docs(select): add no visible label playground --- docs/api/select.md | 4 ++- .../v7/select/no-visible-label/angular.md | 11 +++++++ .../v7/select/no-visible-label/demo.html | 30 +++++++++++++++++++ .../usage/v7/select/no-visible-label/index.md | 13 ++++++++ .../v7/select/no-visible-label/javascript.md | 11 +++++++ .../usage/v7/select/no-visible-label/react.md | 19 ++++++++++++ .../usage/v7/select/no-visible-label/vue.md | 22 ++++++++++++++ 7 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 static/usage/v7/select/no-visible-label/angular.md create mode 100644 static/usage/v7/select/no-visible-label/demo.html create mode 100644 static/usage/v7/select/no-visible-label/index.md create mode 100644 static/usage/v7/select/no-visible-label/javascript.md create mode 100644 static/usage/v7/select/no-visible-label/react.md create mode 100644 static/usage/v7/select/no-visible-label/vue.md diff --git a/docs/api/select.md b/docs/api/select.md index 57b3d48e9df..a75be2f005c 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -112,7 +112,9 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers. -TODO Playground +import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md'; + + ## Justification diff --git a/static/usage/v7/select/no-visible-label/angular.md b/static/usage/v7/select/no-visible-label/angular.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v7/select/no-visible-label/demo.html b/static/usage/v7/select/no-visible-label/demo.html new file mode 100644 index 00000000000..12d131e896d --- /dev/null +++ b/static/usage/v7/select/no-visible-label/demo.html @@ -0,0 +1,30 @@ + + + + + + select + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v7/select/no-visible-label/index.md b/static/usage/v7/select/no-visible-label/index.md new file mode 100644 index 00000000000..214708de577 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/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'; + + diff --git a/static/usage/v7/select/no-visible-label/javascript.md b/static/usage/v7/select/no-visible-label/javascript.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v7/select/no-visible-label/react.md b/static/usage/v7/select/no-visible-label/react.md new file mode 100644 index 00000000000..8695381a487 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/select/no-visible-label/vue.md b/static/usage/v7/select/no-visible-label/vue.md new file mode 100644 index 00000000000..1d3753d58f8 --- /dev/null +++ b/static/usage/v7/select/no-visible-label/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` From 3a15071742436f17e5a72e14261fa426835ba136 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 10:05:31 -0400 Subject: [PATCH 4/7] clean up styles --- static/usage/v7/select/label-slot/demo.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/static/usage/v7/select/label-slot/demo.html b/static/usage/v7/select/label-slot/demo.html index e425c6a1b2a..83bb28de045 100644 --- a/static/usage/v7/select/label-slot/demo.html +++ b/static/usage/v7/select/label-slot/demo.html @@ -8,12 +8,6 @@ - - From 7725f15b497567e74ffe9cd78b1b67292cd3c2d7 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 24 May 2023 10:28:52 -0400 Subject: [PATCH 5/7] fix spacing --- static/usage/v7/select/label-slot/angular.md | 7 ++----- static/usage/v7/select/label-slot/demo.html | 7 ++----- static/usage/v7/select/label-slot/javascript.md | 7 ++----- static/usage/v7/select/label-slot/react.md | 5 +---- static/usage/v7/select/label-slot/vue.md | 7 ++----- 5 files changed, 9 insertions(+), 24 deletions(-) diff --git a/static/usage/v7/select/label-slot/angular.md b/static/usage/v7/select/label-slot/angular.md index 61f94f4369e..93790d050e2 100644 --- a/static/usage/v7/select/label-slot/angular.md +++ b/static/usage/v7/select/label-slot/angular.md @@ -1,11 +1,8 @@ ```html - -
- Favorite Fruit - (Required) -
+ +
Favorite Fruit (Required)
Apple Banana Orange diff --git a/static/usage/v7/select/label-slot/demo.html b/static/usage/v7/select/label-slot/demo.html index 83bb28de045..427568aaa1f 100644 --- a/static/usage/v7/select/label-slot/demo.html +++ b/static/usage/v7/select/label-slot/demo.html @@ -16,11 +16,8 @@
- -
- Favorite Fruit - (Required) -
+ +
Favorite Fruit (Required)
Apple Banana Orange diff --git a/static/usage/v7/select/label-slot/javascript.md b/static/usage/v7/select/label-slot/javascript.md index 61f94f4369e..93790d050e2 100644 --- a/static/usage/v7/select/label-slot/javascript.md +++ b/static/usage/v7/select/label-slot/javascript.md @@ -1,11 +1,8 @@ ```html - -
- Favorite Fruit - (Required) -
+ +
Favorite Fruit (Required)
Apple Banana Orange diff --git a/static/usage/v7/select/label-slot/react.md b/static/usage/v7/select/label-slot/react.md index 2acea04b802..30dd46d7532 100644 --- a/static/usage/v7/select/label-slot/react.md +++ b/static/usage/v7/select/label-slot/react.md @@ -7,10 +7,7 @@ function Example() { -
- Favorite Fruit - (Required) -
+
Favorite Fruit (Required)
Apple Banana Orange diff --git a/static/usage/v7/select/label-slot/vue.md b/static/usage/v7/select/label-slot/vue.md index 20aaffad867..4bdeb67e1d0 100644 --- a/static/usage/v7/select/label-slot/vue.md +++ b/static/usage/v7/select/label-slot/vue.md @@ -2,11 +2,8 @@