From 7fedef499658bf6718e350a53159e3c664d2fd35 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 13 May 2025 16:19:18 -0400 Subject: [PATCH 01/15] chore: hardcode dev build --- plugins/docusaurus-plugin-ionic-component-api/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index d6908d4a0d3..bd8dde80cb2 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -50,12 +50,8 @@ module.exports = function (context, options) { await generateMarkdownForVersion(version, npmTag, false); } - let npmTag = 'latest'; - if (currentVersion.banner === 'unreleased') { - npmTag = 'next'; - } else if (currentVersion.path !== undefined) { - npmTag = currentVersion.path.slice(1); - } + // TODO: remove this when 8.6 is released + let npmTag = '8.5.7-dev.11747094257.1dd7476b'; // Latest version await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true); From 679c68fd65b79cc9f2a9c1428c9b75c24718aed8 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 19 May 2025 17:21:42 -0400 Subject: [PATCH 02/15] docs(input-otp): add input-otp page and playgrounds --- docs/api/input-otp.md | 100 ++++++++++++++++++ .../index.js | 4 +- sidebars.js | 2 +- .../code/stackblitz/v8/angular/package.json | 4 +- static/code/stackblitz/v8/html/index.html | 4 +- .../stackblitz/v8/html/index.withContent.html | 4 +- static/code/stackblitz/v8/html/package.json | 2 +- static/code/stackblitz/v8/react/package.json | 4 +- static/code/stackblitz/v8/vue/package.json | 4 +- .../basic/angular/example_component_html.md | 4 + .../basic/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/basic/demo.html | 36 +++++++ static/usage/v8/input-otp/basic/index.md | 24 +++++ static/usage/v8/input-otp/basic/javascript.md | 4 + static/usage/v8/input-otp/basic/react.md | 20 ++++ static/usage/v8/input-otp/basic/vue.md | 10 ++ .../fill/angular/example_component_html.md | 3 + .../fill/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/fill/demo.html | 36 +++++++ static/usage/v8/input-otp/fill/index.md | 24 +++++ static/usage/v8/input-otp/fill/javascript.md | 3 + static/usage/v8/input-otp/fill/react.md | 14 +++ static/usage/v8/input-otp/fill/vue.md | 10 ++ .../pattern/angular/example_component_html.md | 5 + .../pattern/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/pattern/demo.html | 37 +++++++ static/usage/v8/input-otp/pattern/index.md | 25 +++++ .../usage/v8/input-otp/pattern/javascript.md | 5 + static/usage/v8/input-otp/pattern/react.md | 15 +++ static/usage/v8/input-otp/pattern/vue.md | 11 ++ .../angular/example_component_html.md | 5 + .../angular/example_component_ts.md | 12 +++ .../usage/v8/input-otp/separators/demo.html | 39 +++++++ static/usage/v8/input-otp/separators/index.md | 25 +++++ .../v8/input-otp/separators/javascript.md | 5 + static/usage/v8/input-otp/separators/react.md | 24 +++++ static/usage/v8/input-otp/separators/vue.md | 11 ++ .../shape/angular/example_component_html.md | 5 + .../shape/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/shape/demo.html | 37 +++++++ static/usage/v8/input-otp/shape/index.md | 25 +++++ static/usage/v8/input-otp/shape/javascript.md | 5 + static/usage/v8/input-otp/shape/react.md | 15 +++ static/usage/v8/input-otp/shape/vue.md | 11 ++ .../size/angular/example_component_html.md | 5 + .../size/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/size/demo.html | 37 +++++++ static/usage/v8/input-otp/size/index.md | 25 +++++ static/usage/v8/input-otp/size/javascript.md | 5 + static/usage/v8/input-otp/size/react.md | 15 +++ static/usage/v8/input-otp/size/vue.md | 11 ++ .../states/angular/example_component_html.md | 8 ++ .../states/angular/example_component_ts.md | 65 ++++++++++++ static/usage/v8/input-otp/states/demo.html | 75 +++++++++++++ static/usage/v8/input-otp/states/index.md | 25 +++++ .../usage/v8/input-otp/states/javascript.md | 43 ++++++++ static/usage/v8/input-otp/states/react.md | 42 ++++++++ static/usage/v8/input-otp/states/vue.md | 31 ++++++ .../colors/angular/example_component_html.md | 11 ++ .../colors/angular/example_component_ts.md | 12 +++ .../v8/input-otp/theming/colors/demo.html | 44 ++++++++ .../v8/input-otp/theming/colors/index.md | 25 +++++ .../v8/input-otp/theming/colors/javascript.md | 11 ++ .../v8/input-otp/theming/colors/react.md | 21 ++++ .../usage/v8/input-otp/theming/colors/vue.md | 18 ++++ .../angular/example_component_css.md | 16 +++ .../angular/example_component_html.md | 4 + .../angular/example_component_ts.md | 12 +++ .../theming/css-properties/demo.html | 51 +++++++++ .../input-otp/theming/css-properties/index.md | 34 ++++++ .../theming/css-properties/javascript.md | 21 ++++ .../theming/css-properties/react/main_css.md | 16 +++ .../theming/css-properties/react/main_tsx.md | 16 +++ .../input-otp/theming/css-properties/vue.md | 28 +++++ .../type/angular/example_component_html.md | 3 + .../type/angular/example_component_ts.md | 12 +++ static/usage/v8/input-otp/type/demo.html | 36 +++++++ static/usage/v8/input-otp/type/index.md | 24 +++++ static/usage/v8/input-otp/type/javascript.md | 3 + static/usage/v8/input-otp/type/react.md | 14 +++ static/usage/v8/input-otp/type/vue.md | 10 ++ 81 files changed, 1508 insertions(+), 14 deletions(-) create mode 100644 docs/api/input-otp.md create mode 100644 static/usage/v8/input-otp/basic/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/basic/demo.html create mode 100644 static/usage/v8/input-otp/basic/index.md create mode 100644 static/usage/v8/input-otp/basic/javascript.md create mode 100644 static/usage/v8/input-otp/basic/react.md create mode 100644 static/usage/v8/input-otp/basic/vue.md create mode 100644 static/usage/v8/input-otp/fill/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/fill/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/fill/demo.html create mode 100644 static/usage/v8/input-otp/fill/index.md create mode 100644 static/usage/v8/input-otp/fill/javascript.md create mode 100644 static/usage/v8/input-otp/fill/react.md create mode 100644 static/usage/v8/input-otp/fill/vue.md create mode 100644 static/usage/v8/input-otp/pattern/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/pattern/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/pattern/demo.html create mode 100644 static/usage/v8/input-otp/pattern/index.md create mode 100644 static/usage/v8/input-otp/pattern/javascript.md create mode 100644 static/usage/v8/input-otp/pattern/react.md create mode 100644 static/usage/v8/input-otp/pattern/vue.md create mode 100644 static/usage/v8/input-otp/separators/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/separators/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/separators/demo.html create mode 100644 static/usage/v8/input-otp/separators/index.md create mode 100644 static/usage/v8/input-otp/separators/javascript.md create mode 100644 static/usage/v8/input-otp/separators/react.md create mode 100644 static/usage/v8/input-otp/separators/vue.md create mode 100644 static/usage/v8/input-otp/shape/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/shape/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/shape/demo.html create mode 100644 static/usage/v8/input-otp/shape/index.md create mode 100644 static/usage/v8/input-otp/shape/javascript.md create mode 100644 static/usage/v8/input-otp/shape/react.md create mode 100644 static/usage/v8/input-otp/shape/vue.md create mode 100644 static/usage/v8/input-otp/size/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/size/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/size/demo.html create mode 100644 static/usage/v8/input-otp/size/index.md create mode 100644 static/usage/v8/input-otp/size/javascript.md create mode 100644 static/usage/v8/input-otp/size/react.md create mode 100644 static/usage/v8/input-otp/size/vue.md create mode 100644 static/usage/v8/input-otp/states/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/states/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/states/demo.html create mode 100644 static/usage/v8/input-otp/states/index.md create mode 100644 static/usage/v8/input-otp/states/javascript.md create mode 100644 static/usage/v8/input-otp/states/react.md create mode 100644 static/usage/v8/input-otp/states/vue.md create mode 100644 static/usage/v8/input-otp/theming/colors/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/theming/colors/demo.html create mode 100644 static/usage/v8/input-otp/theming/colors/index.md create mode 100644 static/usage/v8/input-otp/theming/colors/javascript.md create mode 100644 static/usage/v8/input-otp/theming/colors/react.md create mode 100644 static/usage/v8/input-otp/theming/colors/vue.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/demo.html create mode 100644 static/usage/v8/input-otp/theming/css-properties/index.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/javascript.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/input-otp/theming/css-properties/vue.md create mode 100644 static/usage/v8/input-otp/type/angular/example_component_html.md create mode 100644 static/usage/v8/input-otp/type/angular/example_component_ts.md create mode 100644 static/usage/v8/input-otp/type/demo.html create mode 100644 static/usage/v8/input-otp/type/index.md create mode 100644 static/usage/v8/input-otp/type/javascript.md create mode 100644 static/usage/v8/input-otp/type/react.md create mode 100644 static/usage/v8/input-otp/type/vue.md diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md new file mode 100644 index 00000000000..c34b6214c55 --- /dev/null +++ b/docs/api/input-otp.md @@ -0,0 +1,100 @@ +--- +title: "ion-input-otp" +--- +import Props from '@ionic-internal/component-api/v8/input-otp/props.md'; +import Events from '@ionic-internal/component-api/v8/input-otp/events.md'; +import Methods from '@ionic-internal/component-api/v8/input-otp/methods.md'; +import Parts from '@ionic-internal/component-api/v8/input-otp/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/input-otp/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/input-otp/slots.md'; + + + ion-input-otp: One-Time Password Input Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The Input OTP component is a specialized input component designed for entering one-time passwords (OTP). It provides a user-friendly interface for entering verification codes with support for multiple input fields and automatic focus management. + +## Basic Usage + +import Basic from '@site/static/usage/v8/input-otp/basic/index.md'; + + + +## Type + +import Type from '@site/static/usage/v8/input-otp/type/index.md'; + + + +## Shape + +import Shape from '@site/static/usage/v8/input-otp/shape/index.md'; + + + +## Fill + +import Fill from '@site/static/usage/v8/input-otp/fill/index.md'; + + + +## Size + +import Size from '@site/static/usage/v8/input-otp/size/index.md'; + + + +## Separators + +import Separators from '@site/static/usage/v8/input-otp/separators/index.md'; + + + +## States + +import States from '@site/static/usage/v8/input-otp/states/index.md'; + + + +## Pattern + +import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md'; + + + +### CSS Properties + +import CSSProperties from '@site/static/usage/v8/input-otp/theming/css-properties/index.md'; + + + +## Properties + + +## Events + + +## Methods + + +## CSS Shadow Parts + + +## CSS Custom Properties + + +## Slots + diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index bd8dde80cb2..14cc0b11220 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -50,8 +50,8 @@ module.exports = function (context, options) { await generateMarkdownForVersion(version, npmTag, false); } - // TODO: remove this when 8.6 is released - let npmTag = '8.5.7-dev.11747094257.1dd7476b'; + // TODO: revert this before merging + let npmTag = '8.5.7-dev.11747676931.1d53b808'; // Latest version await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true); diff --git a/sidebars.js b/sidebars.js index 5af37c7fce2..115eca21382 100644 --- a/sidebars.js +++ b/sidebars.js @@ -351,7 +351,7 @@ module.exports = { type: 'category', label: 'Input', collapsed: false, - items: ['api/input', 'api/input-password-toggle', 'api/textarea'], + items: ['api/input', 'api/input-password-toggle', 'api/input-otp', 'api/textarea'], }, { type: 'category', diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index 66f002b4050..c85f0fbe3d8 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", - "@ionic/angular": "8.5.7", - "@ionic/core": "8.5.7", + "@ionic/angular": "8.5.7-dev.11747676931.1d53b808", + "@ionic/core": "8.5.7-dev.11747676931.1d53b808", "ionicons": "8.0.8", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html index 34f05146a9a..1370b796e30 100644 --- a/static/code/stackblitz/v8/html/index.html +++ b/static/code/stackblitz/v8/html/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html index e83c15e8ec9..a270474884f 100644 --- a/static/code/stackblitz/v8/html/index.withContent.html +++ b/static/code/stackblitz/v8/html/index.withContent.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 4d9204f751d..afe65dbc674 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@ionic/core": "8.5.7", + "@ionic/core": "8.5.7-dev.11747676931.1d53b808", "ionicons": "8.0.8" } } diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index ecb67d33b0a..012b3b61e84 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.5.7", - "@ionic/react-router": "8.5.7", + "@ionic/react": "8.5.7-dev.11747676931.1d53b808", + "@ionic/react-router": "8.5.7-dev.11747676931.1d53b808", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index ce7ab1a7b3f..2fbbab67e0a 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.5.7", - "@ionic/vue-router": "8.5.7", + "@ionic/vue": "8.5.7-dev.11747676931.1d53b808", + "@ionic/vue-router": "8.5.7-dev.11747676931.1d53b808", "vue": "^3.2.25", "vue-router": "4.5.1" }, diff --git a/static/usage/v8/input-otp/basic/angular/example_component_html.md b/static/usage/v8/input-otp/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e915f538363 --- /dev/null +++ b/static/usage/v8/input-otp/basic/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v8/input-otp/basic/angular/example_component_ts.md b/static/usage/v8/input-otp/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/basic/demo.html b/static/usage/v8/input-otp/basic/demo.html new file mode 100644 index 00000000000..624a933218d --- /dev/null +++ b/static/usage/v8/input-otp/basic/demo.html @@ -0,0 +1,36 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Didn't get a code? Resend the code + Didn't get a code? Resend the code +
+ + + + diff --git a/static/usage/v8/input-otp/basic/index.md b/static/usage/v8/input-otp/basic/index.md new file mode 100644 index 00000000000..c5b62338fb5 --- /dev/null +++ b/static/usage/v8/input-otp/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/basic/javascript.md b/static/usage/v8/input-otp/basic/javascript.md new file mode 100644 index 00000000000..e915f538363 --- /dev/null +++ b/static/usage/v8/input-otp/basic/javascript.md @@ -0,0 +1,4 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v8/input-otp/basic/react.md b/static/usage/v8/input-otp/basic/react.md new file mode 100644 index 00000000000..8cbc39e2b7b --- /dev/null +++ b/static/usage/v8/input-otp/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + + {' '} + Didn't get a code? Resend the code{' '} + + + {' '} + Didn't get a code? Resend the code{' '} + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/basic/vue.md b/static/usage/v8/input-otp/basic/vue.md new file mode 100644 index 00000000000..c1ceb4fa5b1 --- /dev/null +++ b/static/usage/v8/input-otp/basic/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/fill/angular/example_component_html.md b/static/usage/v8/input-otp/fill/angular/example_component_html.md new file mode 100644 index 00000000000..705348532cb --- /dev/null +++ b/static/usage/v8/input-otp/fill/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + Outline Solid +``` diff --git a/static/usage/v8/input-otp/fill/angular/example_component_ts.md b/static/usage/v8/input-otp/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/fill/demo.html b/static/usage/v8/input-otp/fill/demo.html new file mode 100644 index 00000000000..ea815b9f529 --- /dev/null +++ b/static/usage/v8/input-otp/fill/demo.html @@ -0,0 +1,36 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Outline + Solid +
+ + + + diff --git a/static/usage/v8/input-otp/fill/index.md b/static/usage/v8/input-otp/fill/index.md new file mode 100644 index 00000000000..0193e676b03 --- /dev/null +++ b/static/usage/v8/input-otp/fill/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/fill/javascript.md b/static/usage/v8/input-otp/fill/javascript.md new file mode 100644 index 00000000000..705348532cb --- /dev/null +++ b/static/usage/v8/input-otp/fill/javascript.md @@ -0,0 +1,3 @@ +```html + Outline Solid +``` diff --git a/static/usage/v8/input-otp/fill/react.md b/static/usage/v8/input-otp/fill/react.md new file mode 100644 index 00000000000..06171508008 --- /dev/null +++ b/static/usage/v8/input-otp/fill/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Outline + Solid + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/fill/vue.md b/static/usage/v8/input-otp/fill/vue.md new file mode 100644 index 00000000000..387e6edc050 --- /dev/null +++ b/static/usage/v8/input-otp/fill/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/pattern/angular/example_component_html.md b/static/usage/v8/input-otp/pattern/angular/example_component_html.md new file mode 100644 index 00000000000..1e7bb56e282 --- /dev/null +++ b/static/usage/v8/input-otp/pattern/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Numbers 1-4 only + Letters only + Letters D-L only +``` diff --git a/static/usage/v8/input-otp/pattern/angular/example_component_ts.md b/static/usage/v8/input-otp/pattern/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/pattern/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/pattern/demo.html b/static/usage/v8/input-otp/pattern/demo.html new file mode 100644 index 00000000000..239e1e1d321 --- /dev/null +++ b/static/usage/v8/input-otp/pattern/demo.html @@ -0,0 +1,37 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Numbers 1-4 only + Letters only + Letters D-L only +
+ + + + diff --git a/static/usage/v8/input-otp/pattern/index.md b/static/usage/v8/input-otp/pattern/index.md new file mode 100644 index 00000000000..7092e781ad2 --- /dev/null +++ b/static/usage/v8/input-otp/pattern/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/pattern/javascript.md b/static/usage/v8/input-otp/pattern/javascript.md new file mode 100644 index 00000000000..1e7bb56e282 --- /dev/null +++ b/static/usage/v8/input-otp/pattern/javascript.md @@ -0,0 +1,5 @@ +```html + Numbers 1-4 only + Letters only + Letters D-L only +``` diff --git a/static/usage/v8/input-otp/pattern/react.md b/static/usage/v8/input-otp/pattern/react.md new file mode 100644 index 00000000000..c9d64a267bf --- /dev/null +++ b/static/usage/v8/input-otp/pattern/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Numbers 1-4 only + Letters only + Letters D-L only + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/pattern/vue.md b/static/usage/v8/input-otp/pattern/vue.md new file mode 100644 index 00000000000..0fdfd6fe6d2 --- /dev/null +++ b/static/usage/v8/input-otp/pattern/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/separators/angular/example_component_html.md b/static/usage/v8/input-otp/separators/angular/example_component_html.md new file mode 100644 index 00000000000..35d7762c50b --- /dev/null +++ b/static/usage/v8/input-otp/separators/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v8/input-otp/separators/angular/example_component_ts.md b/static/usage/v8/input-otp/separators/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/separators/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/separators/demo.html b/static/usage/v8/input-otp/separators/demo.html new file mode 100644 index 00000000000..14f536c49a3 --- /dev/null +++ b/static/usage/v8/input-otp/separators/demo.html @@ -0,0 +1,39 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Didn't get a code? Resend the code + Didn't get a code? Resend the code + + Didn't get a code? Resend the code + +
+ + + + diff --git a/static/usage/v8/input-otp/separators/index.md b/static/usage/v8/input-otp/separators/index.md new file mode 100644 index 00000000000..7bdb7809020 --- /dev/null +++ b/static/usage/v8/input-otp/separators/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/separators/javascript.md b/static/usage/v8/input-otp/separators/javascript.md new file mode 100644 index 00000000000..35d7762c50b --- /dev/null +++ b/static/usage/v8/input-otp/separators/javascript.md @@ -0,0 +1,5 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v8/input-otp/separators/react.md b/static/usage/v8/input-otp/separators/react.md new file mode 100644 index 00000000000..4dfec79f0fb --- /dev/null +++ b/static/usage/v8/input-otp/separators/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + + {' '} + Didn't get a code? Resend the code{' '} + + + {' '} + Didn't get a code? Resend the code{' '} + + + {' '} + Didn't get a code? Resend the code{' '} + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/separators/vue.md b/static/usage/v8/input-otp/separators/vue.md new file mode 100644 index 00000000000..6130e23e9b9 --- /dev/null +++ b/static/usage/v8/input-otp/separators/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/shape/angular/example_component_html.md b/static/usage/v8/input-otp/shape/angular/example_component_html.md new file mode 100644 index 00000000000..1f81f9cc5fe --- /dev/null +++ b/static/usage/v8/input-otp/shape/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Round + Soft + Rectangular +``` diff --git a/static/usage/v8/input-otp/shape/angular/example_component_ts.md b/static/usage/v8/input-otp/shape/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/shape/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/shape/demo.html b/static/usage/v8/input-otp/shape/demo.html new file mode 100644 index 00000000000..6338c565e93 --- /dev/null +++ b/static/usage/v8/input-otp/shape/demo.html @@ -0,0 +1,37 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Round + Soft + Rectangular +
+ + + + diff --git a/static/usage/v8/input-otp/shape/index.md b/static/usage/v8/input-otp/shape/index.md new file mode 100644 index 00000000000..fe35766a39c --- /dev/null +++ b/static/usage/v8/input-otp/shape/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/shape/javascript.md b/static/usage/v8/input-otp/shape/javascript.md new file mode 100644 index 00000000000..1f81f9cc5fe --- /dev/null +++ b/static/usage/v8/input-otp/shape/javascript.md @@ -0,0 +1,5 @@ +```html + Round + Soft + Rectangular +``` diff --git a/static/usage/v8/input-otp/shape/react.md b/static/usage/v8/input-otp/shape/react.md new file mode 100644 index 00000000000..da104a6231e --- /dev/null +++ b/static/usage/v8/input-otp/shape/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Round + Soft + Rectangular + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/shape/vue.md b/static/usage/v8/input-otp/shape/vue.md new file mode 100644 index 00000000000..3d5e70d516a --- /dev/null +++ b/static/usage/v8/input-otp/shape/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/size/angular/example_component_html.md b/static/usage/v8/input-otp/size/angular/example_component_html.md new file mode 100644 index 00000000000..340cbf8f58e --- /dev/null +++ b/static/usage/v8/input-otp/size/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Small + Medium + Large +``` diff --git a/static/usage/v8/input-otp/size/angular/example_component_ts.md b/static/usage/v8/input-otp/size/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/size/demo.html b/static/usage/v8/input-otp/size/demo.html new file mode 100644 index 00000000000..f0bf625232b --- /dev/null +++ b/static/usage/v8/input-otp/size/demo.html @@ -0,0 +1,37 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Small + Medium + Large +
+ + + + diff --git a/static/usage/v8/input-otp/size/index.md b/static/usage/v8/input-otp/size/index.md new file mode 100644 index 00000000000..6e2905e4b10 --- /dev/null +++ b/static/usage/v8/input-otp/size/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/size/javascript.md b/static/usage/v8/input-otp/size/javascript.md new file mode 100644 index 00000000000..340cbf8f58e --- /dev/null +++ b/static/usage/v8/input-otp/size/javascript.md @@ -0,0 +1,5 @@ +```html + Small + Medium + Large +``` diff --git a/static/usage/v8/input-otp/size/react.md b/static/usage/v8/input-otp/size/react.md new file mode 100644 index 00000000000..a48763ca483 --- /dev/null +++ b/static/usage/v8/input-otp/size/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Small + Medium + Large + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/size/vue.md b/static/usage/v8/input-otp/size/vue.md new file mode 100644 index 00000000000..97b45f6de2a --- /dev/null +++ b/static/usage/v8/input-otp/size/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/states/angular/example_component_html.md b/static/usage/v8/input-otp/states/angular/example_component_html.md new file mode 100644 index 00000000000..a482162948b --- /dev/null +++ b/static/usage/v8/input-otp/states/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + Disabled + Readonly +
+ {{ getValidationText('first') }} + {{ getValidationText('second') }} +
+``` diff --git a/static/usage/v8/input-otp/states/angular/example_component_ts.md b/static/usage/v8/input-otp/states/angular/example_component_ts.md new file mode 100644 index 00000000000..893336d9a34 --- /dev/null +++ b/static/usage/v8/input-otp/states/angular/example_component_ts.md @@ -0,0 +1,65 @@ +```ts +import { Component, OnInit } from '@angular/core'; +import { + FormBuilder, + FormGroup, + FormsModule, + ReactiveFormsModule, + Validators, + AbstractControl, + ValidationErrors, +} from '@angular/forms'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +function otpRequiredLength(length: number) { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value; + if (!value || value.toString().length !== length) { + return { otpLength: true }; + } + return null; + }; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp, ReactiveFormsModule, FormsModule], +}) +export class ExampleComponent implements OnInit { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + first: [12, [Validators.required, otpRequiredLength(4)]], + second: [1234, [Validators.required, otpRequiredLength(4)]], + }); + } + + ngOnInit() { + this.markFormGroupTouched(this.myForm); + } + + markFormGroupTouched(formGroup: FormGroup) { + Object.keys(formGroup.controls).forEach((key) => { + const control = formGroup.get(key); + if (control) { + control.markAsTouched(); + } + }); + } + + getValidationText(controlName: string): string { + const control = this.myForm.get(controlName); + if (!control) return ''; + + if (control.valid && control.value) { + return 'Valid'; + } else if (control.invalid && control.touched) { + return 'Invalid'; + } + return ''; + } +} +``` diff --git a/static/usage/v8/input-otp/states/demo.html b/static/usage/v8/input-otp/states/demo.html new file mode 100644 index 00000000000..a6fedd5a031 --- /dev/null +++ b/static/usage/v8/input-otp/states/demo.html @@ -0,0 +1,75 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Disabled + Readonly + + +
+ + + + + + diff --git a/static/usage/v8/input-otp/states/index.md b/static/usage/v8/input-otp/states/index.md new file mode 100644 index 00000000000..86e62525c96 --- /dev/null +++ b/static/usage/v8/input-otp/states/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/states/javascript.md b/static/usage/v8/input-otp/states/javascript.md new file mode 100644 index 00000000000..8c5576b0420 --- /dev/null +++ b/static/usage/v8/input-otp/states/javascript.md @@ -0,0 +1,43 @@ +```html + Disabled + Readonly + + + + +``` diff --git a/static/usage/v8/input-otp/states/react.md b/static/usage/v8/input-otp/states/react.md new file mode 100644 index 00000000000..b532bc62625 --- /dev/null +++ b/static/usage/v8/input-otp/states/react.md @@ -0,0 +1,42 @@ +```tsx +import React, { useState } from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + const [inputs, setInputs] = useState([ + { value: '12' }, + { value: '1234' } + ]); + + const getValidationState = (value: string) => ({ + class: value.length === 4 ? 'ion-valid' : 'ion-invalid', + text: value.length === 4 ? 'Valid' : 'Invalid' + }); + + const handleInput = (index: number, value: string) => { + setInputs(prev => prev.map((input, i) => + i === index ? { ...input, value } : input + )); + }; + + return ( + <> + Disabled + Readonly + + {inputs.map((input, index) => ( + handleInput(index, e.detail.value!)} + className={`ion-touched ${index === 1 ? 'has-focus' : ''} ${getValidationState(input.value).class}`} + > + {getValidationState(input.value).text} + + ))} + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/input-otp/states/vue.md b/static/usage/v8/input-otp/states/vue.md new file mode 100644 index 00000000000..72ec224236d --- /dev/null +++ b/static/usage/v8/input-otp/states/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md b/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..eb86c698eac --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +``` diff --git a/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md b/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/theming/colors/demo.html b/static/usage/v8/input-otp/theming/colors/demo.html new file mode 100644 index 00000000000..07ab32060e9 --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/demo.html @@ -0,0 +1,44 @@ + + + + + + Badge + + + + + + + + + + + + +
+ Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v8/input-otp/theming/colors/index.md b/static/usage/v8/input-otp/theming/colors/index.md new file mode 100644 index 00000000000..df9d567e10d --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/theming/colors/javascript.md b/static/usage/v8/input-otp/theming/colors/javascript.md new file mode 100644 index 00000000000..eb86c698eac --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +``` diff --git a/static/usage/v8/input-otp/theming/colors/react.md b/static/usage/v8/input-otp/theming/colors/react.md new file mode 100644 index 00000000000..b411a3c7474 --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/theming/colors/vue.md b/static/usage/v8/input-otp/theming/colors/vue.md new file mode 100644 index 00000000000..2a25080c8ef --- /dev/null +++ b/static/usage/v8/input-otp/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..1e1c85a1143 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-input-otp.custom { + --separator-color: rgb(90, 23, 237, 0.12); + --highlight-color-focused: #5a17ed; +} + +.input-otp-fill-outline.custom { + --border-color: rgb(90, 23, 237, 0.6); + --color: #5a17ed; +} + +.input-otp-fill-solid.custom { + --border-color: rgb(90, 23, 237, 0.12); + --background: rgb(90, 23, 237, 0.12); +} +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..fdcf2fcb860 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/demo.html b/static/usage/v8/input-otp/theming/css-properties/demo.html new file mode 100644 index 00000000000..f142836e7c8 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/demo.html @@ -0,0 +1,51 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + + +
+ Didn't get a code? Resend the code + Didn't get a code? Resend the code +
+ + + + diff --git a/static/usage/v8/input-otp/theming/css-properties/index.md b/static/usage/v8/input-otp/theming/css-properties/index.md new file mode 100644 index 00000000000..a66003c1c43 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/theming/css-properties/javascript.md b/static/usage/v8/input-otp/theming/css-properties/javascript.md new file mode 100644 index 00000000000..730893a4776 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/javascript.md @@ -0,0 +1,21 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code + + +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/react/main_css.md b/static/usage/v8/input-otp/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..1e1c85a1143 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-input-otp.custom { + --separator-color: rgb(90, 23, 237, 0.12); + --highlight-color-focused: #5a17ed; +} + +.input-otp-fill-outline.custom { + --border-color: rgb(90, 23, 237, 0.6); + --color: #5a17ed; +} + +.input-otp-fill-solid.custom { + --border-color: rgb(90, 23, 237, 0.12); + --background: rgb(90, 23, 237, 0.12); +} +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md b/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..ebfd5c64d62 --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Didn't get a code? Resend the code + Didn't get a code? Resend the code + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/theming/css-properties/vue.md b/static/usage/v8/input-otp/theming/css-properties/vue.md new file mode 100644 index 00000000000..d3548a7355e --- /dev/null +++ b/static/usage/v8/input-otp/theming/css-properties/vue.md @@ -0,0 +1,28 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input-otp/type/angular/example_component_html.md b/static/usage/v8/input-otp/type/angular/example_component_html.md new file mode 100644 index 00000000000..8871303bb1f --- /dev/null +++ b/static/usage/v8/input-otp/type/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + Numbers only Letters and numbers +``` diff --git a/static/usage/v8/input-otp/type/angular/example_component_ts.md b/static/usage/v8/input-otp/type/angular/example_component_ts.md new file mode 100644 index 00000000000..1054a9eb61c --- /dev/null +++ b/static/usage/v8/input-otp/type/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/input-otp/type/demo.html b/static/usage/v8/input-otp/type/demo.html new file mode 100644 index 00000000000..f08f9e8d90f --- /dev/null +++ b/static/usage/v8/input-otp/type/demo.html @@ -0,0 +1,36 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Numbers only + Letters and numbers +
+ + + + diff --git a/static/usage/v8/input-otp/type/index.md b/static/usage/v8/input-otp/type/index.md new file mode 100644 index 00000000000..489fdeff3e3 --- /dev/null +++ b/static/usage/v8/input-otp/type/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input-otp/type/javascript.md b/static/usage/v8/input-otp/type/javascript.md new file mode 100644 index 00000000000..8871303bb1f --- /dev/null +++ b/static/usage/v8/input-otp/type/javascript.md @@ -0,0 +1,3 @@ +```html + Numbers only Letters and numbers +``` diff --git a/static/usage/v8/input-otp/type/react.md b/static/usage/v8/input-otp/type/react.md new file mode 100644 index 00000000000..6408687fe7b --- /dev/null +++ b/static/usage/v8/input-otp/type/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Numbers only + Letters and numbers + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input-otp/type/vue.md b/static/usage/v8/input-otp/type/vue.md new file mode 100644 index 00000000000..95a420f7549 --- /dev/null +++ b/static/usage/v8/input-otp/type/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` From 4ffc107df954022e61f4a4719d4048867115e827 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 19 May 2025 17:31:20 -0400 Subject: [PATCH 03/15] style: lint --- static/usage/v8/input-otp/pattern/react.md | 8 ++++++-- static/usage/v8/input-otp/states/react.md | 19 +++++++++---------- .../v8/input-otp/theming/colors/react.md | 18 +++++++++--------- .../angular/example_component_html.md | 4 +++- .../theming/css-properties/demo.html | 8 ++++++-- .../theming/css-properties/javascript.md | 4 +++- .../theming/css-properties/react/main_tsx.md | 8 ++++++-- .../input-otp/theming/css-properties/vue.md | 4 +++- 8 files changed, 45 insertions(+), 28 deletions(-) diff --git a/static/usage/v8/input-otp/pattern/react.md b/static/usage/v8/input-otp/pattern/react.md index c9d64a267bf..7a2b5c4424b 100644 --- a/static/usage/v8/input-otp/pattern/react.md +++ b/static/usage/v8/input-otp/pattern/react.md @@ -6,8 +6,12 @@ function Example() { return ( <> Numbers 1-4 only - Letters only - Letters D-L only + + Letters only + + + Letters D-L only + ); } diff --git a/static/usage/v8/input-otp/states/react.md b/static/usage/v8/input-otp/states/react.md index b532bc62625..ae310c2c1ef 100644 --- a/static/usage/v8/input-otp/states/react.md +++ b/static/usage/v8/input-otp/states/react.md @@ -3,26 +3,25 @@ import React, { useState } from 'react'; import { IonInputOtp } from '@ionic/react'; function Example() { - const [inputs, setInputs] = useState([ - { value: '12' }, - { value: '1234' } - ]); + const [inputs, setInputs] = useState([{ value: '12' }, { value: '1234' }]); const getValidationState = (value: string) => ({ class: value.length === 4 ? 'ion-valid' : 'ion-invalid', - text: value.length === 4 ? 'Valid' : 'Invalid' + text: value.length === 4 ? 'Valid' : 'Invalid', }); const handleInput = (index: number, value: string) => { - setInputs(prev => prev.map((input, i) => - i === index ? { ...input, value } : input - )); + setInputs((prev) => prev.map((input, i) => (i === index ? { ...input, value } : input))); }; return ( <> - Disabled - Readonly + + Disabled + + + Readonly + {inputs.map((input, index) => ( - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + Primary + Secondary + Tertiary + Success + >Warning + Danger + Light + Medium + Dark ); } diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md index fdcf2fcb860..b1852f16cfc 100644 --- a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,6 @@ ```html Didn't get a code? Resend the code - Didn't get a code? Resend the code + + Didn't get a code? Resend the code + ``` diff --git a/static/usage/v8/input-otp/theming/css-properties/demo.html b/static/usage/v8/input-otp/theming/css-properties/demo.html index f142836e7c8..d210b863651 100644 --- a/static/usage/v8/input-otp/theming/css-properties/demo.html +++ b/static/usage/v8/input-otp/theming/css-properties/demo.html @@ -42,8 +42,12 @@
- Didn't get a code? Resend the code - Didn't get a code? Resend the code + + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code +
diff --git a/static/usage/v8/input-otp/theming/css-properties/javascript.md b/static/usage/v8/input-otp/theming/css-properties/javascript.md index 730893a4776..01a652f035b 100644 --- a/static/usage/v8/input-otp/theming/css-properties/javascript.md +++ b/static/usage/v8/input-otp/theming/css-properties/javascript.md @@ -1,6 +1,8 @@ ```html Didn't get a code? Resend the code - Didn't get a code? Resend the code + + Didn't get a code? Resend the code +