docs(input): notes about appropriate uses of counter (#3109)

* docs(input): note deprecated properties --------- Co-authored-by: Brandy Carney <[email protected]>
ionic-team · Sep 8, 2023 · bb90741 · bb90741 · vercel · Sep 8, 2023
1 parent 288a265
commit bb90741
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 0 deletions.
diff --git 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';
 
 <Counter />
 
+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';
+
+<CounterAlignment />
+
 ## 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
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+ <ion-item>
+ <ion-input label="Text input" placeholder="Enter text"></ion-input>
+ </ion-item>
+
+ <div class="ion-padding-start">
+ <ion-input label="Counter input" [counter]="true" maxlength="20"></ion-input>
+ </div>
+</ion-list>
+```
diff --git a/static/usage/v7/input/counter-alignment/demo.html b/static/usage/v7/input/counter-alignment/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Input</title>
+ <link rel="stylesheet" href="../../../common.css" />
+ <script src="../../../common.js"></script>
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+ </head>
+
+ <body>
+ <ion-app>
+ <ion-content>
+ <div class="container">
+ <ion-list>
+ <ion-item>
+ <ion-input label="Text input" placeholder="Enter text"></ion-input>
+ </ion-item>
+
+ <div class="ion-padding-start">
+ <ion-input label="Counter input" counter="true" maxlength="20"></ion-input>
+ </div>
+ </ion-list>
+ </div>
+ </ion-content>
+ </ion-app>
+ </body>
+</html>
diff --git a/static/usage/v7/input/counter-alignment/index.md 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';
+
+<Playground
+ version="7"
+ code={{
+ javascript,
+ react,
+ vue,
+ angular,
+ }}
+ src="usage/v7/input/counter-alignment/demo.html"
+/>
diff --git a/static/usage/v7/input/counter-alignment/javascript.md b/static/usage/v7/input/counter-alignment/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+ <ion-item>
+ <ion-input label="Text input" placeholder="Enter text"></ion-input>
+ </ion-item>
+
+ <div class="ion-padding-start">
+ <ion-input label="Counter input" counter="true" maxlength="20"></ion-input>
+ </div>
+</ion-list>
+```
diff --git a/static/usage/v7/input/counter-alignment/react.md 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 (
+ <>
+ <IonList>
+ <IonItem>
+ <IonInput label="Text input" placeholder="Enter text"></IonInput>
+ </IonItem>
+
+ <div className="ion-padding-start">
+ <IonInput label="Counter input" counter={true} maxlength={20}></IonInput>
+ </div>
+ </IonList>
+ </>
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/input/counter-alignment/vue.md b/static/usage/v7/input/counter-alignment/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+ <ion-list>
+ <ion-item>
+ <ion-input label="Text input" placeholder="Enter text"></ion-input>
+ </ion-item>
+
+ <div class="ion-padding-start">
+ <ion-input label="Counter input" :counter="true" maxlength="20"></ion-input>
+ </div>
+ </ion-list>
+</template>
+
+<script lang="ts" setup>
+ import { IonInput, IonItem, IonList } from '@ionic/vue';
+</script>
+```