From beacdbd658b33fb80bcc1170eb6f50e0f253347e Mon Sep 17 00:00:00 2001 From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Date: Thu, 12 Oct 2023 09:56:43 -0500 Subject: [PATCH] docs(many): remove legacy form control syntax from v7 playgrounds (#3140) --- docs/api/item.md | 11 ---- docs/api/label.md | 9 +-- static/usage/v7/backdrop/basic/angular.md | 3 +- static/usage/v7/backdrop/basic/demo.html | 3 +- static/usage/v7/backdrop/basic/javascript.md | 3 +- static/usage/v7/backdrop/basic/react.md | 4 +- static/usage/v7/backdrop/basic/vue.md | 6 +- .../angular/example_component_css.md | 8 --- .../angular/example_component_html.md | 16 ------ .../v7/item/theming/input-highlight/demo.html | 48 ---------------- .../v7/item/theming/input-highlight/index.md | 33 ----------- .../theming/input-highlight/javascript.md | 25 --------- .../theming/input-highlight/react/main_css.md | 8 --- .../theming/input-highlight/react/main_tsx.md | 28 ---------- .../v7/item/theming/input-highlight/vue.md | 36 ------------ static/usage/v7/label/input/angular.md | 31 ---------- static/usage/v7/label/input/demo.html | 56 ------------------- static/usage/v7/label/input/index.md | 8 --- static/usage/v7/label/input/javascript.md | 31 ---------- static/usage/v7/label/input/react.md | 41 -------------- static/usage/v7/label/input/vue.md | 42 -------------- .../type/angular/example_component_html.md | 15 ++--- static/usage/v7/menu/type/demo.html | 15 ++--- static/usage/v7/menu/type/javascript.md | 15 ++--- static/usage/v7/menu/type/react.md | 16 ++---- static/usage/v7/menu/type/vue.md | 17 ++---- .../boolean/angular/example_component_html.md | 5 +- .../v7/modal/can-dismiss/boolean/demo.html | 5 +- .../modal/can-dismiss/boolean/javascript.md | 5 +- .../v7/modal/can-dismiss/boolean/react.md | 8 +-- .../usage/v7/modal/can-dismiss/boolean/vue.md | 7 +-- .../basic/angular/example_component_html.md | 9 ++- static/usage/v7/modal/inline/basic/demo.html | 8 ++- .../usage/v7/modal/inline/basic/javascript.md | 3 +- static/usage/v7/modal/inline/basic/react.md | 10 +++- static/usage/v7/modal/inline/basic/vue.md | 10 +++- 36 files changed, 81 insertions(+), 517 deletions(-) delete mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_css.md delete mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_html.md delete mode 100644 static/usage/v7/item/theming/input-highlight/demo.html delete mode 100644 static/usage/v7/item/theming/input-highlight/index.md delete mode 100644 static/usage/v7/item/theming/input-highlight/javascript.md delete mode 100644 static/usage/v7/item/theming/input-highlight/react/main_css.md delete mode 100644 static/usage/v7/item/theming/input-highlight/react/main_tsx.md delete mode 100644 static/usage/v7/item/theming/input-highlight/vue.md delete mode 100644 static/usage/v7/label/input/angular.md delete mode 100644 static/usage/v7/label/input/demo.html delete mode 100644 static/usage/v7/label/input/index.md delete mode 100644 static/usage/v7/label/input/javascript.md delete mode 100644 static/usage/v7/label/input/react.md delete mode 100644 static/usage/v7/label/input/vue.md diff --git a/docs/api/item.md b/docs/api/item.md index cc15d8b6265..cffbe64ded2 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -236,17 +236,6 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md - -### Input Highlight - -Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. - -The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties. - -import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md'; - - - ## Guidelines The following guidelines will help ensure your list items are easy to understand and use. diff --git a/docs/api/label.md b/docs/api/label.md index 4d5aab0a928..c3761074f8d 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -17,8 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating. +Label is an element used primarily to add text content to [Item](./item.md) components. Label can also be used inside of form control components such as [Input](./input.md) or [Radio](./radio.md) when specifying the visible label, but it is not required. +The position of the label inside of an item can be inline, fixed, stacked, or floating. ## Basic Usage @@ -32,12 +33,6 @@ import Item from '@site/static/usage/v7/label/item/index.md'; -## Input Labels - -import Input from '@site/static/usage/v7/label/input/index.md'; - - - ## Theming ### Colors diff --git a/static/usage/v7/backdrop/basic/angular.md b/static/usage/v7/backdrop/basic/angular.md index c98b5316ebb..64250c98aa0 100644 --- a/static/usage/v7/backdrop/basic/angular.md +++ b/static/usage/v7/backdrop/basic/angular.md @@ -8,8 +8,7 @@ - - Checkbox + Checkbox Button diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html index 383542a21da..355a8bb220a 100644 --- a/static/usage/v7/backdrop/basic/demo.html +++ b/static/usage/v7/backdrop/basic/demo.html @@ -21,8 +21,7 @@ - - Checkbox + Checkbox Button diff --git a/static/usage/v7/backdrop/basic/javascript.md b/static/usage/v7/backdrop/basic/javascript.md index 1a9d09c2da3..f74060cbcd1 100644 --- a/static/usage/v7/backdrop/basic/javascript.md +++ b/static/usage/v7/backdrop/basic/javascript.md @@ -8,8 +8,7 @@ - - Checkbox + Checkbox Button diff --git a/static/usage/v7/backdrop/basic/react.md b/static/usage/v7/backdrop/basic/react.md index 9d6529c0cac..518119a0dd8 100644 --- a/static/usage/v7/backdrop/basic/react.md +++ b/static/usage/v7/backdrop/basic/react.md @@ -8,7 +8,6 @@ import { IonContent, IonItem, IonCheckbox, - IonLabel, IonButton, } from '@ionic/react'; @@ -24,8 +23,7 @@ function Example() { - - Checkbox + Checkbox Button diff --git a/static/usage/v7/backdrop/basic/vue.md b/static/usage/v7/backdrop/basic/vue.md index a42da95a2e8..fe78016963e 100644 --- a/static/usage/v7/backdrop/basic/vue.md +++ b/static/usage/v7/backdrop/basic/vue.md @@ -9,8 +9,7 @@ - - Checkbox + Checkbox Button @@ -25,13 +24,12 @@ IonContent, IonItem, IonCheckbox, - IonLabel, IonButton, } from '@ionic/vue'; import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonLabel, IonButton }, + components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton }, }); ``` diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md deleted file mode 100644 index 5d7cfd49c7c..00000000000 --- a/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md +++ /dev/null @@ -1,8 +0,0 @@ -```css -ion-item { - --highlight-height: 2px; - --highlight-color-focused: #43e7f3; - --highlight-color-valid: #6f58d8; - --highlight-color-invalid: #ff46be; -} -``` diff --git a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md deleted file mode 100644 index 59a5e5928a9..00000000000 --- a/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md +++ /dev/null @@ -1,16 +0,0 @@ -```html - - Custom Input Highlight: Focused - - - - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - -``` diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html deleted file mode 100644 index c112dd699fe..00000000000 --- a/static/usage/v7/item/theming/input-highlight/demo.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - Item - - - - - - - - - - - -
- - Custom Input Highlight: Focused - - - - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - -
- - - - diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md deleted file mode 100644 index 4782bfdd6a5..00000000000 --- a/static/usage/v7/item/theming/input-highlight/index.md +++ /dev/null @@ -1,33 +0,0 @@ -import Playground from '@site/src/components/global/Playground'; - -import javascript from './javascript.md'; - -import react_main_css from './react/main_css.md'; -import react_main_tsx from './react/main_tsx.md'; - -import vue from './vue.md'; - -import angular_example_component_css from './angular/example_component_css.md'; -import angular_example_component_html from './angular/example_component_html.md'; - - diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md deleted file mode 100644 index b26cebd530e..00000000000 --- a/static/usage/v7/item/theming/input-highlight/javascript.md +++ /dev/null @@ -1,25 +0,0 @@ -```html - - Custom Input Highlight: Focused - - - - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - - - -``` diff --git a/static/usage/v7/item/theming/input-highlight/react/main_css.md b/static/usage/v7/item/theming/input-highlight/react/main_css.md deleted file mode 100644 index 5d7cfd49c7c..00000000000 --- a/static/usage/v7/item/theming/input-highlight/react/main_css.md +++ /dev/null @@ -1,8 +0,0 @@ -```css -ion-item { - --highlight-height: 2px; - --highlight-color-focused: #43e7f3; - --highlight-color-valid: #6f58d8; - --highlight-color-invalid: #ff46be; -} -``` diff --git a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md deleted file mode 100644 index 67d46a73267..00000000000 --- a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -import React from 'react'; -import { IonInput, IonItem, IonLabel } from '@ionic/react'; - -import './main.css'; - -function Example() { - return ( - <> - - Custom Input Highlight: Focused - - - - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - - - ); -} -export default Example; -``` diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md deleted file mode 100644 index 52713eb0ca5..00000000000 --- a/static/usage/v7/item/theming/input-highlight/vue.md +++ /dev/null @@ -1,36 +0,0 @@ -```html - - - - - -``` diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md deleted file mode 100644 index 75278afd44b..00000000000 --- a/static/usage/v7/label/input/angular.md +++ /dev/null @@ -1,31 +0,0 @@ -```html - - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -``` diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html deleted file mode 100644 index f35f297e34b..00000000000 --- a/static/usage/v7/label/input/demo.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - Label - - - - - - - - - - - -
- - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -
- - - - diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md deleted file mode 100644 index a1e95d3ab95..00000000000 --- a/static/usage/v7/label/input/index.md +++ /dev/null @@ -1,8 +0,0 @@ -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/label/input/javascript.md b/static/usage/v7/label/input/javascript.md deleted file mode 100644 index 75278afd44b..00000000000 --- a/static/usage/v7/label/input/javascript.md +++ /dev/null @@ -1,31 +0,0 @@ -```html - - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -``` diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md deleted file mode 100644 index ff11fd1f176..00000000000 --- a/static/usage/v7/label/input/react.md +++ /dev/null @@ -1,41 +0,0 @@ -```tsx -import React from 'react'; -import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; - -function Example() { - return ( - <> - - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - - - ); -} -export default Example; -``` diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md deleted file mode 100644 index cd05ef82b44..00000000000 --- a/static/usage/v7/label/input/vue.md +++ /dev/null @@ -1,42 +0,0 @@ -```html - - - -``` diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md index fd995d7a32f..25ff9c152e0 100644 --- a/static/usage/v7/menu/type/angular/example_component_html.md +++ b/static/usage/v7/menu/type/angular/example_component_html.md @@ -22,22 +22,19 @@

Select an overlay type:

- + overlay - - + - + reveal - - + - + push - - +
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html index cecfb27d688..15aeda9fe6f 100644 --- a/static/usage/v7/menu/type/demo.html +++ b/static/usage/v7/menu/type/demo.html @@ -35,22 +35,19 @@

Select an overlay type:

- + overlay - - + - + reveal - - + - + push - - +
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md index c8b49975b84..100e2e2d091 100644 --- a/static/usage/v7/menu/type/javascript.md +++ b/static/usage/v7/menu/type/javascript.md @@ -22,22 +22,19 @@

Select an overlay type:

- + overlay - - + - + reveal - - + - + push - - +
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md index 946707cba38..3caca163c30 100644 --- a/static/usage/v7/menu/type/react.md +++ b/static/usage/v7/menu/type/react.md @@ -5,7 +5,6 @@ import { IonContent, IonHeader, IonItem, - IonLabel, IonMenu, IonMenuToggle, IonPage, @@ -48,22 +47,19 @@ function Example() { }} > - + overlay - - + - + reveal - - + - + push - - +
diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md index 8277d7a3179..f10b90a0a9a 100644 --- a/static/usage/v7/menu/type/vue.md +++ b/static/usage/v7/menu/type/vue.md @@ -23,22 +23,19 @@

Select an overlay type:

- + overlay - - + - + reveal - - + - + push - - +
@@ -55,7 +52,6 @@ IonContent, IonHeader, IonItem, - IonLabel, IonMenu, IonMenuToggle, IonPage, @@ -72,7 +68,6 @@ IonContent, IonHeader, IonItem, - IonLabel, IonMenu, IonMenuToggle, IonPage, diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md index 60d566d3437..593098daca1 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md +++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_html.md @@ -20,8 +20,9 @@

You must accept the terms and conditions to close this modal.

- Do you accept the terms and conditions? - + +
Do you accept the terms and conditions?
+ diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html index 284005eda4c..2c820ac0b47 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/demo.html +++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html @@ -33,8 +33,9 @@

You must accept the terms and conditions to close this modal.

- Do you accept the terms and conditions? - + +
Do you accept the terms and conditions?
+ diff --git a/static/usage/v7/modal/can-dismiss/boolean/javascript.md b/static/usage/v7/modal/can-dismiss/boolean/javascript.md index 845ff0ec8c5..af2ab152fc9 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/javascript.md +++ b/static/usage/v7/modal/can-dismiss/boolean/javascript.md @@ -20,8 +20,9 @@

You must accept the terms and conditions to close this modal.

- Do you accept the terms and conditions? - + +
Do you accept the terms and conditions?
+ diff --git a/static/usage/v7/modal/can-dismiss/boolean/react.md b/static/usage/v7/modal/can-dismiss/boolean/react.md index 22a72819b2b..f136b0e28fb 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/react.md +++ b/static/usage/v7/modal/can-dismiss/boolean/react.md @@ -10,7 +10,6 @@ import { IonTitle, IonPage, IonItem, - IonLabel, IonCheckbox, } from '@ionic/react'; @@ -52,16 +51,15 @@ function Example() {

You must accept the terms and conditions to close this modal.

- - Do you accept the terms and conditions? - { setCanDismiss(ev.detail.checked); }} - > + > +
Do you accept the terms and conditions?
+ diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md index 4aeded0aef7..3504c7230cd 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/vue.md +++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md @@ -21,8 +21,9 @@

You must accept the terms and conditions to close this modal.

- Do you accept the terms and conditions? - + +
Do you accept the terms and conditions?
+ @@ -42,7 +43,6 @@ IonTitle, IonItem, IonCheckbox, - IonLabel, IonPage, } from '@ionic/vue'; import { defineComponent } from 'vue'; @@ -58,7 +58,6 @@ IonTitle, IonItem, IonCheckbox, - IonLabel, IonPage, }, data() { diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_html.md b/static/usage/v7/modal/inline/basic/angular/example_component_html.md index d89c7626f3d..2097cde4503 100644 --- a/static/usage/v7/modal/inline/basic/angular/example_component_html.md +++ b/static/usage/v7/modal/inline/basic/angular/example_component_html.md @@ -22,8 +22,13 @@ - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html index 9ea5eab1699..1c8145597f0 100644 --- a/static/usage/v7/modal/inline/basic/demo.html +++ b/static/usage/v7/modal/inline/basic/demo.html @@ -34,8 +34,12 @@ - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md index cffa297eebd..318f29e7611 100644 --- a/static/usage/v7/modal/inline/basic/javascript.md +++ b/static/usage/v7/modal/inline/basic/javascript.md @@ -21,8 +21,7 @@ - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md index aa465052e4c..1ca9670066a 100644 --- a/static/usage/v7/modal/inline/basic/react.md +++ b/static/usage/v7/modal/inline/basic/react.md @@ -10,7 +10,6 @@ import { IonTitle, IonPage, IonItem, - IonLabel, IonInput, } from '@ionic/react'; import { OverlayEventDetail } from '@ionic/core/components'; @@ -61,8 +60,13 @@ function Example() { - Enter your name - + diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md index 2c5435b4335..5aac3115a1d 100644 --- a/static/usage/v7/modal/inline/basic/vue.md +++ b/static/usage/v7/modal/inline/basic/vue.md @@ -22,8 +22,13 @@ - Enter your name - + @@ -41,7 +46,6 @@ IonTitle, IonItem, IonInput, - IonLabel, } from '@ionic/vue'; import { OverlayEventDetail } from '@ionic/core/components'; import { ref } from 'vue';