feat(input-password-toggle): add ionic theme design (#29787)

Issue number: ROU-4860

---------

## What is the current behavior?
Input Password Toggle does not have styles for the ionic theme.

## What is the new behavior?
- Added color style
- Set margins

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

| Figma Design | Implemented Input Password Toggle |
| --- | --- | 
| ![Figma
Design](https://github.com/user-attachments/assets/285c4766-267b-4c73-b0fc-801b130c6fb2)
| ![Implemented
InputPasswordToggle](https://github.com/user-attachments/assets/a768cbfe-3bf4-4d49-89ce-0b142d29d3b0)
|

- [Basic
Preview](https://ionic-framework-git-rou-4860-ionic1.vercel.app/src/components/input-password-toggle/test/basic?ionic:theme=ionic)

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
José Rio
2024-08-22 16:23:15 +01:00
committed by GitHub
parent e539620880
commit 0d67c83c21
12 changed files with 28 additions and 4 deletions

View File

@ -0,0 +1,4 @@
@import "../../themes/native/native.globals";
// Input Toggle Password
// --------------------------------------------------

View File

@ -0,0 +1,12 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./input-password-toggle.common.scss";
// Ionic Input Toggle Password
// --------------------------------------------------
:host ion-button.button-has-icon-only {
--padding-end: inherit;
--color: #{globals.$ionic-color-neutral-500};
--margin-end: calc(-1 * var(--padding-end));
@include globals.margin(0, var(--margin-end), 0, 0);
}

View File

@ -21,8 +21,9 @@ import type { Color, TextFieldTypes } from '../../interface';
* and we will default to MD mode. * and we will default to MD mode.
*/ */
styleUrls: { styleUrls: {
ios: 'input-password-toggle.scss', ios: 'input-password-toggle.common.scss',
md: 'input-password-toggle.scss', md: 'input-password-toggle.common.scss',
ionic: 'input-password-toggle.ionic.scss',
}, },
shadow: true, shadow: true,
}) })

View File

@ -48,7 +48,14 @@
<div class="grid"> <div class="grid">
<div class="grid-item"> <div class="grid-item">
<h2>Default</h2> <h2>Default</h2>
<ion-input type="password" value="supersecurepassword" label="Password"> <ion-input
fill="outline"
shape="soft"
placeholder="Enter your password"
type="password"
value="supersecurepassword"
label="Password"
>
<ion-input-password-toggle slot="end"></ion-input-password-toggle> <ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input> </ion-input>
</div> </div>

View File

@ -1,7 +1,7 @@
import { expect } from '@playwright/test'; import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright'; import { configs, test } from '@utils/test/playwright';
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('input password toggle: states'), () => { test.describe(title('input password toggle: states'), () => {
test('should be hidden when inside of a readonly input', async ({ page }) => { test('should be hidden when inside of a readonly input', async ({ page }) => {
await page.setContent( await page.setContent(