mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 14:19:17 +08:00
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 | | --- | --- | |  |  | - [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:
@ -0,0 +1,4 @@
|
||||
@import "../../themes/native/native.globals";
|
||||
|
||||
// Input Toggle Password
|
||||
// --------------------------------------------------
|
||||
@ -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);
|
||||
}
|
||||
@ -21,8 +21,9 @@ import type { Color, TextFieldTypes } from '../../interface';
|
||||
* and we will default to MD mode.
|
||||
*/
|
||||
styleUrls: {
|
||||
ios: 'input-password-toggle.scss',
|
||||
md: 'input-password-toggle.scss',
|
||||
ios: 'input-password-toggle.common.scss',
|
||||
md: 'input-password-toggle.common.scss',
|
||||
ionic: 'input-password-toggle.ionic.scss',
|
||||
},
|
||||
shadow: true,
|
||||
})
|
||||
|
||||
@ -48,7 +48,14 @@
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { expect } from '@playwright/test';
|
||||
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('should be hidden when inside of a readonly input', async ({ page }) => {
|
||||
await page.setContent(
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 747 B |
Binary file not shown.
|
After Width: | Height: | Size: 649 B |
Binary file not shown.
|
After Width: | Height: | Size: 773 B |
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
Binary file not shown.
|
After Width: | Height: | Size: 878 B |
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
Reference in New Issue
Block a user