-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: sync next with feature-8.0 (#29225)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Syncs the `next` branch with the latest from `feature-8.0`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
- Loading branch information
Showing
21 changed files
with
571 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
+55 Bytes
(100%)
...rt/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file.
152 changes: 152 additions & 0 deletions
152
core/src/components/input-password-toggle/input-password-toggle.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import type { ComponentInterface } from '@stencil/core'; | ||
| import { Component, Element, Host, Prop, h, Watch } from '@stencil/core'; | ||
| import { printIonWarning } from '@utils/logging'; | ||
| import { createColorClasses } from '@utils/theme'; | ||
| import { eyeOff, eye } from 'ionicons/icons'; | ||
|
|
||
| import { getIonMode } from '../../global/ionic-global'; | ||
| import type { Color, TextFieldTypes } from '../../interface'; | ||
|
|
||
| /** | ||
| * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. | ||
| */ | ||
| @Component({ | ||
| tag: 'ion-input-password-toggle', | ||
| /** | ||
| * Empty CSS files are required in order for the mode to be inherited to the | ||
| * inner ion-button. Otherwise, the setMode callback provided to Stencil will not get called | ||
| * and we will default to MD mode. | ||
| */ | ||
| styleUrls: { | ||
| ios: 'input-password-toggle.scss', | ||
| md: 'input-password-toggle.scss', | ||
| }, | ||
| shadow: true, | ||
| }) | ||
| export class InputPasswordToggle implements ComponentInterface { | ||
| private inputElRef!: HTMLIonInputElement | null; | ||
|
|
||
| @Element() el!: HTMLIonInputElement; | ||
|
|
||
| /** | ||
| * The color to use from your application's color palette. | ||
| * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. | ||
| * For more information on colors, see [theming](/docs/theming/basics). | ||
| */ | ||
| @Prop({ reflect: true }) color?: Color; | ||
|
|
||
| /** | ||
| * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used. | ||
| */ | ||
| @Prop() showIcon?: string; | ||
|
|
||
| /** | ||
| * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used. | ||
| */ | ||
| @Prop() hideIcon?: string; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| @Prop({ mutable: true }) type: TextFieldTypes = 'password'; | ||
|
|
||
| /** | ||
| * Whenever the input type changes we need to re-run validation to ensure the password | ||
| * toggle is being used with the correct input type. If the application changes the type | ||
| * outside of this component we also need to re-render so the correct icon is shown. | ||
| */ | ||
| @Watch('type') | ||
| onTypeChange(newValue: TextFieldTypes) { | ||
| if (newValue !== 'text' && newValue !== 'password') { | ||
| printIonWarning( | ||
| `ion-input-password-toggle only supports inputs of type "text" or "password". Input of type "${newValue}" is not compatible.`, | ||
| this.el | ||
| ); | ||
|
|
||
| return; | ||
| } | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| const { el } = this; | ||
|
|
||
| const inputElRef = (this.inputElRef = el.closest('ion-input')); | ||
|
|
||
| if (!inputElRef) { | ||
| printIonWarning( | ||
| 'No ancestor ion-input found for ion-input-password-toggle. This component must be slotted inside of an ion-input.', | ||
| el | ||
| ); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| /** | ||
| * Important: Set the type in connectedCallback because the default value | ||
| * of this.type may not always be accurate. Usually inputs have the "password" type | ||
| * but it is possible to have the input to initially have the "text" type. In that scenario | ||
| * the wrong icon will show briefly before switching to the correct icon. Setting the | ||
| * type here allows us to avoid that flicker. | ||
| */ | ||
| this.type = inputElRef.type; | ||
| } | ||
|
|
||
| disconnectedCallback() { | ||
| this.inputElRef = null; | ||
| } | ||
|
|
||
| private togglePasswordVisibility = () => { | ||
| const { inputElRef } = this; | ||
|
|
||
| if (!inputElRef) { | ||
| return; | ||
| } | ||
|
|
||
| inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text'; | ||
| }; | ||
|
|
||
| render() { | ||
| const { color, type } = this; | ||
|
|
||
| const mode = getIonMode(this); | ||
|
|
||
| const showPasswordIcon = this.showIcon ?? eye; | ||
| const hidePasswordIcon = this.hideIcon ?? eyeOff; | ||
|
|
||
| const isPasswordVisible = type === 'text'; | ||
|
|
||
| return ( | ||
| <Host | ||
| class={createColorClasses(color, { | ||
| [mode]: true, | ||
| })} | ||
| > | ||
| <ion-button | ||
| mode={mode} | ||
| color={color} | ||
| fill="clear" | ||
| shape="round" | ||
| aria-checked={isPasswordVisible ? 'true' : 'false'} | ||
| aria-label="show password" | ||
| role="switch" | ||
| type="button" | ||
| onPointerDown={(ev) => { | ||
| /** | ||
| * This prevents mobile browsers from | ||
| * blurring the input when the password toggle | ||
| * button is activated. | ||
| */ | ||
| ev.preventDefault(); | ||
| }} | ||
| onClick={this.togglePasswordVisibility} | ||
| > | ||
| <ion-icon | ||
| slot="icon-only" | ||
| aria-hidden="true" | ||
| icon={isPasswordVisible ? hidePasswordIcon : showPasswordIcon} | ||
| ></ion-icon> | ||
| </ion-button> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
23 changes: 23 additions & 0 deletions
23
core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import AxeBuilder from '@axe-core/playwright'; | ||
| import { expect } from '@playwright/test'; | ||
| import { configs, test } from '@utils/test/playwright'; | ||
|
|
||
| configs({ directions: ['ltr'] }).forEach(({ title, config }) => { | ||
| test.describe(title('input password toggle: a11y'), () => { | ||
| test('should not have accessibility violations', async ({ page }) => { | ||
| await page.setContent( | ||
| ` | ||
| <main> | ||
| <ion-input label="input" type="password"> | ||
| <ion-input-password-toggle slot="end"></ion-input-password-toggle> | ||
| </ion-input> | ||
| </main> | ||
| `, | ||
| config | ||
| ); | ||
|
|
||
| const results = await new AxeBuilder({ page }).analyze(); | ||
| expect(results.violations).toEqual([]); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.