javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): match material design character counter (#24335)

Browse Source 
Resolves #24334
This commit is contained in:
Sean Perkins
2022-01-19 11:24:08 -05:00
committed by GitHub
parent eb7905cac9
commit 54db1a1e7c
6 changed files with 86 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/item/item.md.scss
View File

@ -471,3 +471,12 @@
--border-color: #{$item-md-input-fill-border-color-hover};
}
}
// Material Design Text Field Character Counter
// --------------------------------------------------
.item-counter {
color: #{$item-md-input-counter-color};
letter-spacing: #{$item-md-input-counter-letter-spacing};
}

5
core/src/components/item/item.md.vars.scss
View File

@ -78,6 +78,11 @@ $item-md-input-fill-border-color: $background-color-step-500 !default;
/// @prop - Color of the item border when `fill` is set and hovered
$item-md-input-fill-border-color-hover: $background-color-step-750 !default;
/// @prop - Color of the item input counter
$item-md-input-counter-color: rgba(0, 0, 0, .6) !default;
/// @prop - Letter spacing of the item input counter
$item-md-input-counter-letter-spacing: .0333333333em !default;
// Item Label
// --------------------------------------------------

10
core/src/components/item/item.scss
View File

@ -533,6 +533,16 @@ ion-ripple-effect {
z-index: 1;
}
// Item Max Length Counter
// --------------------------------------------------
.item-counter {
@include margin-horizontal(auto, null);
padding-inline-start: 16px;
white-space: nowrap;
}
// Item: Reduced Motion
// --------------------------------------------------

2
core/src/components/item/item.tsx
View File

@ -297,7 +297,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
private updateCounterOutput(inputEl: HTMLIonInputElement | HTMLIonTextareaElement) {
if (this.counter && !this.multipleInputs && inputEl?.maxlength !== undefined) {
const length = inputEl?.value?.toString().length ?? '0';
this.counterString = `${length}/${inputEl.maxlength}`;
this.counterString = `${length} / ${inputEl.maxlength}`;
}
}

19
core/src/components/item/test/counter/e2e.ts Normal file
View File

@ -0,0 +1,19 @@
import { newE2EPage } from '@stencil/core/testing';
test('item: counter', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/counter?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});
test('item: counter-rtl', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/counter?ionic:_testing=true&rtl=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

42
core/src/components/item/test/counter/index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item - Counter</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Item counter</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding-vertical">
<ion-list>
<ion-item counter="true">
<ion-label>Counter</ion-label>
<ion-input maxlength="20"></ion-input>
</ion-item>
<ion-item counter="true">
<ion-label>Counter with value</ion-label>
<ion-input maxlength="20" value="some value"></ion-input>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</html>