From 39acc4c46411fc901a39658a3a9d032aad2a75d6 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Thu, 7 Sep 2023 14:45:03 -0400 Subject: [PATCH 1/2] docs(input): note deprecated properties --- docs/api/input.md | 8 +++++ .../v7/input/counter-alignment/angular.md | 11 +++++++ .../v7/input/counter-alignment/demo.html | 30 +++++++++++++++++++ .../usage/v7/input/counter-alignment/index.md | 17 +++++++++++ .../v7/input/counter-alignment/javascript.md | 11 +++++++ .../usage/v7/input/counter-alignment/react.md | 21 +++++++++++++ .../usage/v7/input/counter-alignment/vue.md | 17 +++++++++++ 7 files changed, 115 insertions(+) create mode 100644 static/usage/v7/input/counter-alignment/angular.md create mode 100644 static/usage/v7/input/counter-alignment/demo.html create mode 100644 static/usage/v7/input/counter-alignment/index.md create mode 100644 static/usage/v7/input/counter-alignment/javascript.md create mode 100644 static/usage/v7/input/counter-alignment/react.md create mode 100644 static/usage/v7/input/counter-alignment/vue.md diff --git a/docs/api/input.md b/docs/api/input.md index e8dcc311e26..41a35b8b656 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -104,10 +104,18 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md'; The input counter is text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. +The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. + import Counter from '@site/static/usage/v7/input/counter/index.md'; +Because inputs with counters already have a bottom border, it is recommended to not put them inside an `ion-item`. You can use the `"ion-padding-start"` class to align the borders of the counter inputs with the borders of another form element that is inside an `ion-item`. + +import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md'; + + + ## Filtering User Input Developers can use the `ionInput` event to update the input value in response to user input such as a keypress. This is useful for filtering out invalid or unwanted characters. diff --git a/static/usage/v7/input/counter-alignment/angular.md b/static/usage/v7/input/counter-alignment/angular.md new file mode 100644 index 00000000000..5aea6ae5f98 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/angular.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v7/input/counter-alignment/demo.html b/static/usage/v7/input/counter-alignment/demo.html new file mode 100644 index 00000000000..18f4cd3cc94 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + diff --git a/static/usage/v7/input/counter-alignment/index.md b/static/usage/v7/input/counter-alignment/index.md new file mode 100644 index 00000000000..c590c8a24c8 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/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/input/counter-alignment/javascript.md b/static/usage/v7/input/counter-alignment/javascript.md new file mode 100644 index 00000000000..7a1a750f445 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v7/input/counter-alignment/react.md b/static/usage/v7/input/counter-alignment/react.md new file mode 100644 index 00000000000..6ca88fe2ddc --- /dev/null +++ b/static/usage/v7/input/counter-alignment/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + +
+ +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v7/input/counter-alignment/vue.md b/static/usage/v7/input/counter-alignment/vue.md new file mode 100644 index 00000000000..680d29646a0 --- /dev/null +++ b/static/usage/v7/input/counter-alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` From 77519643a4fcfd0ce43f2b550ffdccfe927368cb Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 8 Sep 2023 13:26:08 -0400 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Brandy Carney --- docs/api/input.md | 2 +- static/usage/v7/input/counter-alignment/angular.md | 2 +- static/usage/v7/input/counter-alignment/demo.html | 2 +- static/usage/v7/input/counter-alignment/javascript.md | 2 +- static/usage/v7/input/counter-alignment/react.md | 2 +- static/usage/v7/input/counter-alignment/vue.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api/input.md b/docs/api/input.md index 41a35b8b656..519963e4d9c 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -110,7 +110,7 @@ import Counter from '@site/static/usage/v7/input/counter/index.md'; -Because inputs with counters already have a bottom border, it is recommended to not put them inside an `ion-item`. You can use the `"ion-padding-start"` class to align the borders of the counter inputs with the borders of another form element that is inside an `ion-item`. +Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items. import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md'; diff --git a/static/usage/v7/input/counter-alignment/angular.md b/static/usage/v7/input/counter-alignment/angular.md index 5aea6ae5f98..c08e1cdd758 100644 --- a/static/usage/v7/input/counter-alignment/angular.md +++ b/static/usage/v7/input/counter-alignment/angular.md @@ -5,7 +5,7 @@
- +
``` diff --git a/static/usage/v7/input/counter-alignment/demo.html b/static/usage/v7/input/counter-alignment/demo.html index 18f4cd3cc94..4fb07004def 100644 --- a/static/usage/v7/input/counter-alignment/demo.html +++ b/static/usage/v7/input/counter-alignment/demo.html @@ -20,7 +20,7 @@
- +
diff --git a/static/usage/v7/input/counter-alignment/javascript.md b/static/usage/v7/input/counter-alignment/javascript.md index 7a1a750f445..3a9b526ba70 100644 --- a/static/usage/v7/input/counter-alignment/javascript.md +++ b/static/usage/v7/input/counter-alignment/javascript.md @@ -5,7 +5,7 @@
- +
``` diff --git a/static/usage/v7/input/counter-alignment/react.md b/static/usage/v7/input/counter-alignment/react.md index 6ca88fe2ddc..5687f244f0c 100644 --- a/static/usage/v7/input/counter-alignment/react.md +++ b/static/usage/v7/input/counter-alignment/react.md @@ -11,7 +11,7 @@ function Example() {
- +
diff --git a/static/usage/v7/input/counter-alignment/vue.md b/static/usage/v7/input/counter-alignment/vue.md index 680d29646a0..77c9d4b0fde 100644 --- a/static/usage/v7/input/counter-alignment/vue.md +++ b/static/usage/v7/input/counter-alignment/vue.md @@ -6,7 +6,7 @@
- +