From fbf76713ef0fc5bba06067f8f66c1fa54ebd5ea0 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 24 Aug 2023 11:24:48 -0700 Subject: [PATCH 01/16] feat(checkbox, radio, toggle, range): stacked labels for form controls --- docs/api/checkbox.md | 12 ++++++++-- static/usage/v7/checkbox/align/angular.md | 3 +++ static/usage/v7/checkbox/align/demo.html | 22 +++++++++++++++++++ static/usage/v7/checkbox/align/index.md | 17 ++++++++++++++ static/usage/v7/checkbox/align/javascript.md | 3 +++ static/usage/v7/checkbox/align/react.md | 9 ++++++++ static/usage/v7/checkbox/align/vue.md | 16 ++++++++++++++ .../v7/checkbox/label-placement/angular.md | 4 ++++ .../v7/checkbox/label-placement/demo.html | 4 ++++ .../v7/checkbox/label-placement/javascript.md | 4 ++++ .../v7/checkbox/label-placement/react.md | 4 ++++ .../usage/v7/checkbox/label-placement/vue.md | 4 ++++ 12 files changed, 100 insertions(+), 2 deletions(-) create mode 100644 static/usage/v7/checkbox/align/angular.md create mode 100644 static/usage/v7/checkbox/align/demo.html create mode 100644 static/usage/v7/checkbox/align/index.md create mode 100644 static/usage/v7/checkbox/align/javascript.md create mode 100644 static/usage/v7/checkbox/align/react.md create mode 100644 static/usage/v7/checkbox/align/vue.md diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index fdfbe1c8a48..89e12b5de37 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -29,15 +29,23 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; ## Label Placement -Developers can use the `labelPlacement` property to control how the label is placed relative to the control. +Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md'; +## Align + +Developers can use the `align` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. It only has an effect when the `labelPlacement` property is set to `stacked`. + +import Align from '@site/static/usage/v7/checkbox/align/index.md'; + + + ## Justification -Developers can use the `justify` property to control how the label and control are packed on a line. +Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; diff --git a/static/usage/v7/checkbox/align/angular.md b/static/usage/v7/checkbox/align/angular.md new file mode 100644 index 00000000000..682e4a9bc4c --- /dev/null +++ b/static/usage/v7/checkbox/align/angular.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v7/checkbox/align/demo.html b/static/usage/v7/checkbox/align/demo.html new file mode 100644 index 00000000000..8adc6cbd695 --- /dev/null +++ b/static/usage/v7/checkbox/align/demo.html @@ -0,0 +1,22 @@ + + + + + + Checkbox + + + + + + + + + +
+ Enable Notifications +
+ + + + diff --git a/static/usage/v7/checkbox/align/index.md b/static/usage/v7/checkbox/align/index.md new file mode 100644 index 00000000000..d77d6f2090d --- /dev/null +++ b/static/usage/v7/checkbox/align/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/checkbox/align/javascript.md b/static/usage/v7/checkbox/align/javascript.md new file mode 100644 index 00000000000..682e4a9bc4c --- /dev/null +++ b/static/usage/v7/checkbox/align/javascript.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v7/checkbox/align/react.md b/static/usage/v7/checkbox/align/react.md new file mode 100644 index 00000000000..cfdd3923ecf --- /dev/null +++ b/static/usage/v7/checkbox/align/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/checkbox/align/vue.md b/static/usage/v7/checkbox/align/vue.md new file mode 100644 index 00000000000..93a9dc173b5 --- /dev/null +++ b/static/usage/v7/checkbox/align/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md index f2cb87d8171..154f82929d8 100644 --- a/static/usage/v7/checkbox/label-placement/angular.md +++ b/static/usage/v7/checkbox/label-placement/angular.md @@ -8,4 +8,8 @@
Fixed Width Label + +
+ +Stacked Label ``` diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html index 68f4256f4c1..b010f8e8a3e 100644 --- a/static/usage/v7/checkbox/label-placement/demo.html +++ b/static/usage/v7/checkbox/label-placement/demo.html @@ -24,6 +24,10 @@
Fixed Width Label + +
+ + Stacked Label diff --git a/static/usage/v7/checkbox/label-placement/javascript.md b/static/usage/v7/checkbox/label-placement/javascript.md index e3321ed4f9b..be18191d9a0 100644 --- a/static/usage/v7/checkbox/label-placement/javascript.md +++ b/static/usage/v7/checkbox/label-placement/javascript.md @@ -8,4 +8,8 @@
Fixed Width Label + +
+ +Stacked Label ``` diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md index 7c9bf728131..6fc222b9035 100644 --- a/static/usage/v7/checkbox/label-placement/react.md +++ b/static/usage/v7/checkbox/label-placement/react.md @@ -14,6 +14,10 @@ function Example() {
Fixed Width Label + +
+ + Stacked Label ); } diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md index 942149628cd..3530731da53 100644 --- a/static/usage/v7/checkbox/label-placement/vue.md +++ b/static/usage/v7/checkbox/label-placement/vue.md @@ -9,6 +9,10 @@
Fixed Width Label + +
+ + Stacked Label + + + + + + + +
+ Enable Notifications +
+ + + + diff --git a/static/usage/v7/checkbox/align/index.md b/static/usage/v7/checkbox/align/index.md new file mode 100644 index 00000000000..d77d6f2090d --- /dev/null +++ b/static/usage/v7/checkbox/align/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/checkbox/align/javascript.md b/static/usage/v7/checkbox/align/javascript.md new file mode 100644 index 00000000000..682e4a9bc4c --- /dev/null +++ b/static/usage/v7/checkbox/align/javascript.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v7/checkbox/align/react.md b/static/usage/v7/checkbox/align/react.md new file mode 100644 index 00000000000..cfdd3923ecf --- /dev/null +++ b/static/usage/v7/checkbox/align/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/checkbox/align/vue.md b/static/usage/v7/checkbox/align/vue.md new file mode 100644 index 00000000000..93a9dc173b5 --- /dev/null +++ b/static/usage/v7/checkbox/align/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md index f2cb87d8171..154f82929d8 100644 --- a/static/usage/v7/checkbox/label-placement/angular.md +++ b/static/usage/v7/checkbox/label-placement/angular.md @@ -8,4 +8,8 @@
Fixed Width Label + +
+ +Stacked Label ``` diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html index 68f4256f4c1..b010f8e8a3e 100644 --- a/static/usage/v7/checkbox/label-placement/demo.html +++ b/static/usage/v7/checkbox/label-placement/demo.html @@ -24,6 +24,10 @@
Fixed Width Label + +
+ + Stacked Label diff --git a/static/usage/v7/checkbox/label-placement/javascript.md b/static/usage/v7/checkbox/label-placement/javascript.md index e3321ed4f9b..be18191d9a0 100644 --- a/static/usage/v7/checkbox/label-placement/javascript.md +++ b/static/usage/v7/checkbox/label-placement/javascript.md @@ -8,4 +8,8 @@
Fixed Width Label + +
+ +Stacked Label ``` diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md index 7c9bf728131..6fc222b9035 100644 --- a/static/usage/v7/checkbox/label-placement/react.md +++ b/static/usage/v7/checkbox/label-placement/react.md @@ -14,6 +14,10 @@ function Example() {
Fixed Width Label + +
+ + Stacked Label ); } diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md index 942149628cd..3530731da53 100644 --- a/static/usage/v7/checkbox/label-placement/vue.md +++ b/static/usage/v7/checkbox/label-placement/vue.md @@ -9,6 +9,10 @@
Fixed Width Label + +
+ + Stacked Label + + + + + + + +
+ + + + Aligned at the Start + + + + + + Aligned at the Center + + + +
+ + + + diff --git a/static/usage/v7/radio/align/index.md b/static/usage/v7/radio/align/index.md new file mode 100644 index 00000000000..79634eda179 --- /dev/null +++ b/static/usage/v7/radio/align/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/radio/align/javascript.md b/static/usage/v7/radio/align/javascript.md new file mode 100644 index 00000000000..3d586d0311e --- /dev/null +++ b/static/usage/v7/radio/align/javascript.md @@ -0,0 +1,15 @@ +```html + + + + Aligned at the Start + + + + + + Aligned at the Center + + + +``` diff --git a/static/usage/v7/radio/align/react.md b/static/usage/v7/radio/align/react.md new file mode 100644 index 00000000000..e5a31549548 --- /dev/null +++ b/static/usage/v7/radio/align/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonRadio } from '@ionic/react'; + +function Example() { + return ( + + + + + Aligned at the Start + + + + + + + + Aligned at the Center + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/radio/align/vue.md b/static/usage/v7/radio/align/vue.md new file mode 100644 index 00000000000..f7829e8f6eb --- /dev/null +++ b/static/usage/v7/radio/align/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular.md index 9caedfee363..c62acb2938a 100644 --- a/static/usage/v7/radio/label-placement/angular.md +++ b/static/usage/v7/radio/label-placement/angular.md @@ -14,4 +14,10 @@ Fixed Width Label + +
+ + + Stacked Label + ``` diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html index b038df4eb0e..8140ef0ed29 100644 --- a/static/usage/v7/radio/label-placement/demo.html +++ b/static/usage/v7/radio/label-placement/demo.html @@ -30,6 +30,12 @@ Fixed Width Label + +
+ + + Stacked Label + diff --git a/static/usage/v7/radio/label-placement/javascript.md b/static/usage/v7/radio/label-placement/javascript.md index f19fa4b10ac..44a731a1fae 100644 --- a/static/usage/v7/radio/label-placement/javascript.md +++ b/static/usage/v7/radio/label-placement/javascript.md @@ -14,4 +14,10 @@ Fixed Width Label + +
+ + + Stacked Label + ``` diff --git a/static/usage/v7/radio/label-placement/react.md b/static/usage/v7/radio/label-placement/react.md index 8827af5225f..42eb433075d 100644 --- a/static/usage/v7/radio/label-placement/react.md +++ b/static/usage/v7/radio/label-placement/react.md @@ -26,6 +26,14 @@ function Example() { Fixed Width Label + +
+ + + + Stacked Label + + ); } diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md index 3562db1c507..d397b8ce31b 100644 --- a/static/usage/v7/radio/label-placement/vue.md +++ b/static/usage/v7/radio/label-placement/vue.md @@ -15,6 +15,12 @@ Fixed Width Label + +
+ + + Stacked Label + + + + + + + + +
+
+ Aligned at the Start

+ Aligned at the Center

+
+
+ + + + diff --git a/static/usage/v7/toggle/align/index.md b/static/usage/v7/toggle/align/index.md new file mode 100644 index 00000000000..49d327a61ff --- /dev/null +++ b/static/usage/v7/toggle/align/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/toggle/align/javascript.md b/static/usage/v7/toggle/align/javascript.md new file mode 100644 index 00000000000..a011dec888e --- /dev/null +++ b/static/usage/v7/toggle/align/javascript.md @@ -0,0 +1,4 @@ +```html +Aligned at the Start

+Aligned at the Center +``` diff --git a/static/usage/v7/toggle/align/react.md b/static/usage/v7/toggle/align/react.md new file mode 100644 index 00000000000..70ea7865bde --- /dev/null +++ b/static/usage/v7/toggle/align/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Aligned at the Start + +
+
+ + Aligned at the Center + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/toggle/align/vue.md b/static/usage/v7/toggle/align/vue.md new file mode 100644 index 00000000000..7f8b91d71b2 --- /dev/null +++ b/static/usage/v7/toggle/align/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` From 744dbbd93005d66aa0abe6753ceb87eaf116dc05 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 24 Aug 2023 14:57:11 -0700 Subject: [PATCH 05/16] feat(checkbox, radio, toggle, range): add range documentation --- static/usage/v7/range/labels/angular.md | 4 ++++ static/usage/v7/range/labels/demo.html | 4 ++++ static/usage/v7/range/labels/javascript.md | 4 ++++ static/usage/v7/range/labels/react.md | 4 ++++ static/usage/v7/range/labels/vue.md | 4 ++++ 5 files changed, 20 insertions(+) diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular.md index 45532c5f917..24c92babb74 100644 --- a/static/usage/v7/range/labels/angular.md +++ b/static/usage/v7/range/labels/angular.md @@ -8,4 +8,8 @@
+ +
+ + ``` diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html index 7357f88d861..1d37d7b1976 100644 --- a/static/usage/v7/range/labels/demo.html +++ b/static/usage/v7/range/labels/demo.html @@ -29,6 +29,10 @@
+ +
+ + diff --git a/static/usage/v7/range/labels/javascript.md b/static/usage/v7/range/labels/javascript.md index 9ee164f7d4d..88bf7ff3464 100644 --- a/static/usage/v7/range/labels/javascript.md +++ b/static/usage/v7/range/labels/javascript.md @@ -8,4 +8,8 @@
+ +
+ + ``` diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md index ef5563f178e..50799aa3d3b 100644 --- a/static/usage/v7/range/labels/react.md +++ b/static/usage/v7/range/labels/react.md @@ -13,6 +13,10 @@ function Example() {
+ +
+ + ); } diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md index 53b7932edb8..1d80cceb292 100644 --- a/static/usage/v7/range/labels/vue.md +++ b/static/usage/v7/range/labels/vue.md @@ -9,6 +9,10 @@
+ +
+ + - -
- Enable Notifications + + + Aligned to the Start + + + + Aligned to the Center + +
diff --git a/static/usage/v7/checkbox/align/javascript.md b/static/usage/v7/checkbox/align/javascript.md index 682e4a9bc4c..69772ec2ff6 100644 --- a/static/usage/v7/checkbox/align/javascript.md +++ b/static/usage/v7/checkbox/align/javascript.md @@ -1,3 +1,7 @@ ```html -Enable Notifications +Aligned to the Start + +
+ +Aligned to the Center ``` diff --git a/static/usage/v7/checkbox/align/react.md b/static/usage/v7/checkbox/align/react.md index cfdd3923ecf..d790d0672a3 100644 --- a/static/usage/v7/checkbox/align/react.md +++ b/static/usage/v7/checkbox/align/react.md @@ -3,7 +3,19 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return ; + return ( + <> + + Aligned to the Start + + +
+ + + Aligned to the Center + + + ); } export default Example; ``` diff --git a/static/usage/v7/checkbox/align/vue.md b/static/usage/v7/checkbox/align/vue.md index 93a9dc173b5..f493542a410 100644 --- a/static/usage/v7/checkbox/align/vue.md +++ b/static/usage/v7/checkbox/align/vue.md @@ -1,6 +1,10 @@ ```html