From 609b0fdb69e92da7e52b3d7de8fab519f74285ef Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 12 Oct 2023 10:26:16 -0500 Subject: [PATCH 1/2] fix(jp): re-add files for removed playgrounds --- .../angular/example_component_css.md | 8 +++ .../angular/example_component_html.md | 16 +++++ .../v7/item/theming/input-highlight/demo.html | 50 ++++++++++++++++ .../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 | 35 +++++++++++ static/usage/v7/label/input/angular.md | 31 ++++++++++ static/usage/v7/label/input/demo.html | 58 +++++++++++++++++++ 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 | 41 +++++++++++++ 14 files changed, 413 insertions(+) create mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_css.md create mode 100644 static/usage/v7/item/theming/input-highlight/angular/example_component_html.md create mode 100644 static/usage/v7/item/theming/input-highlight/demo.html create mode 100644 static/usage/v7/item/theming/input-highlight/index.md create mode 100644 static/usage/v7/item/theming/input-highlight/javascript.md create mode 100644 static/usage/v7/item/theming/input-highlight/react/main_css.md create mode 100644 static/usage/v7/item/theming/input-highlight/react/main_tsx.md create mode 100644 static/usage/v7/item/theming/input-highlight/vue.md create mode 100644 static/usage/v7/label/input/angular.md create mode 100644 static/usage/v7/label/input/demo.html create mode 100644 static/usage/v7/label/input/index.md create mode 100644 static/usage/v7/label/input/javascript.md create mode 100644 static/usage/v7/label/input/react.md create mode 100644 static/usage/v7/label/input/vue.md 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 new file mode 100644 index 00000000000..b2dad076cea --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` \ No newline at end of file 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 new file mode 100644 index 00000000000..415e4711bf4 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +``` \ No newline at end of file diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html new file mode 100644 index 00000000000..88073d0e422 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/demo.html @@ -0,0 +1,50 @@ + + + + + + + Item + + + + + + + + + + + +
+ + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +
+ + + + + \ No newline at end of file diff --git a/static/usage/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md new file mode 100644 index 00000000000..8676cae9233 --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/index.md @@ -0,0 +1,33 @@ +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'; + + \ No newline at end of file diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md new file mode 100644 index 00000000000..40d6cf56bca --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/javascript.md @@ -0,0 +1,25 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + +``` \ No newline at end of file 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 new file mode 100644 index 00000000000..b2dad076cea --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` \ No newline at end of file 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 new file mode 100644 index 00000000000..373d00d74ab --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md @@ -0,0 +1,28 @@ +```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; +``` \ No newline at end of file diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md new file mode 100644 index 00000000000..6b70b83981c --- /dev/null +++ b/static/usage/v7/item/theming/input-highlight/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` \ No newline at end of file diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md new file mode 100644 index 00000000000..103d618a0b3 --- /dev/null +++ b/static/usage/v7/label/input/angular.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` \ No newline at end of file diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html new file mode 100644 index 00000000000..1cf0f9ea9cd --- /dev/null +++ b/static/usage/v7/label/input/demo.html @@ -0,0 +1,58 @@ + + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + + \ No newline at end of file diff --git a/static/usage/v7/label/input/index.md b/static/usage/v7/label/input/index.md new file mode 100644 index 00000000000..08c6217168e --- /dev/null +++ b/static/usage/v7/label/input/index.md @@ -0,0 +1,8 @@ +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'; + + \ No newline at end of file diff --git a/static/usage/v7/label/input/javascript.md b/static/usage/v7/label/input/javascript.md new file mode 100644 index 00000000000..103d618a0b3 --- /dev/null +++ b/static/usage/v7/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` \ No newline at end of file diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md new file mode 100644 index 00000000000..f29a719daf7 --- /dev/null +++ b/static/usage/v7/label/input/react.md @@ -0,0 +1,41 @@ +```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; +``` \ No newline at end of file diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md new file mode 100644 index 00000000000..5ef45b50338 --- /dev/null +++ b/static/usage/v7/label/input/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` \ No newline at end of file From 60ac4c73610d0fc2f1fc7237c161ccb8e0715eab Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 12 Oct 2023 10:33:40 -0500 Subject: [PATCH 2/2] lint --- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../v7/item/theming/input-highlight/demo.html | 84 +++++++------ .../v7/item/theming/input-highlight/index.md | 2 +- .../theming/input-highlight/javascript.md | 2 +- .../theming/input-highlight/react/main_css.md | 2 +- .../theming/input-highlight/react/main_tsx.md | 2 +- .../v7/item/theming/input-highlight/vue.md | 2 +- static/usage/v7/label/input/angular.md | 2 +- static/usage/v7/label/input/demo.html | 110 +++++++++--------- static/usage/v7/label/input/index.md | 2 +- static/usage/v7/label/input/javascript.md | 2 +- static/usage/v7/label/input/react.md | 2 +- static/usage/v7/label/input/vue.md | 2 +- 14 files changed, 107 insertions(+), 111 deletions(-) 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 index b2dad076cea..5d7cfd49c7c 100644 --- 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 @@ -5,4 +5,4 @@ ion-item { --highlight-color-valid: #6f58d8; --highlight-color-invalid: #ff46be; } -``` \ No newline at end of file +``` 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 index 415e4711bf4..59a5e5928a9 100644 --- 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 @@ -13,4 +13,4 @@ Custom Input Highlight: Focused & Invalid -``` \ No newline at end of file +``` diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html index 88073d0e422..c112dd699fe 100644 --- a/static/usage/v7/item/theming/input-highlight/demo.html +++ b/static/usage/v7/item/theming/input-highlight/demo.html @@ -1,50 +1,48 @@ + + + + Item + + + + - - - - Item - - - - + + - ion-item { - --highlight-height: 2px; - --highlight-color-focused: #43e7f3; - --highlight-color-valid: #6f58d8; - --highlight-color-invalid: #ff46be; - } - - + + + +
+ + Custom Input Highlight: Focused + + - - - -
- - Custom Input Highlight: Focused - - + + Custom Input Highlight: Focused & Valid + + - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - -
- - - - - \ No newline at end of file + + 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 index 8676cae9233..4782bfdd6a5 100644 --- a/static/usage/v7/item/theming/input-highlight/index.md +++ b/static/usage/v7/item/theming/input-highlight/index.md @@ -30,4 +30,4 @@ import angular_example_component_html from './angular/example_component_html.md' }} src="usage/v7/item/theming/input-highlight/demo.html" size="250px" -/> \ No newline at end of file +/> diff --git a/static/usage/v7/item/theming/input-highlight/javascript.md b/static/usage/v7/item/theming/input-highlight/javascript.md index 40d6cf56bca..b26cebd530e 100644 --- a/static/usage/v7/item/theming/input-highlight/javascript.md +++ b/static/usage/v7/item/theming/input-highlight/javascript.md @@ -22,4 +22,4 @@ --highlight-color-invalid: #ff46be; } -``` \ No newline at end of file +``` 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 index b2dad076cea..5d7cfd49c7c 100644 --- a/static/usage/v7/item/theming/input-highlight/react/main_css.md +++ b/static/usage/v7/item/theming/input-highlight/react/main_css.md @@ -5,4 +5,4 @@ ion-item { --highlight-color-valid: #6f58d8; --highlight-color-invalid: #ff46be; } -``` \ No newline at end of file +``` 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 index 373d00d74ab..67d46a73267 100644 --- a/static/usage/v7/item/theming/input-highlight/react/main_tsx.md +++ b/static/usage/v7/item/theming/input-highlight/react/main_tsx.md @@ -25,4 +25,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/item/theming/input-highlight/vue.md b/static/usage/v7/item/theming/input-highlight/vue.md index 6b70b83981c..76bb289ee00 100644 --- a/static/usage/v7/item/theming/input-highlight/vue.md +++ b/static/usage/v7/item/theming/input-highlight/vue.md @@ -32,4 +32,4 @@ --highlight-color-invalid: #ff46be; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/label/input/angular.md b/static/usage/v7/label/input/angular.md index 103d618a0b3..75278afd44b 100644 --- a/static/usage/v7/label/input/angular.md +++ b/static/usage/v7/label/input/angular.md @@ -28,4 +28,4 @@ Checkbox -``` \ No newline at end of file +``` diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html index 1cf0f9ea9cd..f35f297e34b 100644 --- a/static/usage/v7/label/input/demo.html +++ b/static/usage/v7/label/input/demo.html @@ -1,58 +1,56 @@ - - - - - Label - - - - - - - - - - - -
- - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -
- - - - - \ No newline at end of file + + + + 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 index 08c6217168e..a1e95d3ab95 100644 --- a/static/usage/v7/label/input/index.md +++ b/static/usage/v7/label/input/index.md @@ -5,4 +5,4 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - \ No newline at end of file + diff --git a/static/usage/v7/label/input/javascript.md b/static/usage/v7/label/input/javascript.md index 103d618a0b3..75278afd44b 100644 --- a/static/usage/v7/label/input/javascript.md +++ b/static/usage/v7/label/input/javascript.md @@ -28,4 +28,4 @@ Checkbox -``` \ No newline at end of file +``` diff --git a/static/usage/v7/label/input/react.md b/static/usage/v7/label/input/react.md index f29a719daf7..ff11fd1f176 100644 --- a/static/usage/v7/label/input/react.md +++ b/static/usage/v7/label/input/react.md @@ -38,4 +38,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/label/input/vue.md b/static/usage/v7/label/input/vue.md index 5ef45b50338..6f9443e1a5e 100644 --- a/static/usage/v7/label/input/vue.md +++ b/static/usage/v7/label/input/vue.md @@ -38,4 +38,4 @@ components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle }, }); -``` \ No newline at end of file +```