javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(input, toggle): add escape hatch property (#26416)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-12-05 13:43:07 -05:00
committed by GitHub
parent 70b62a1b5f
commit 1278a292f3
7 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/toggle/toggle.tsx
View File

@ -89,6 +89,17 @@ export class Toggle implements ComponentInterface {
*/
@Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup.
* Ionic will only opt components in to the modern form markup when they are
* using either the `aria-label` attribute or the default slot that contains
* the label text. As a result, the `legacy` property should only be used as
* an escape hatch when you want to avoid this automatic opt-in behavior.
* Note that this property will be removed in an upcoming major release
* of Ionic, and all form components will be opted-in to using the modern form markup.
*/
@Prop() legacy?: boolean;
/**
* How to pack the label and toggle within a line.
* `'start'`: The label and toggle will appear on the left in LTR and
@ -340,6 +351,16 @@ Example: <ion-toggle>Email:</ion-toggle>
For toggles that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the toggle.`,
this.el
);
if (this.legacy) {
printIonWarning(
`ion-toggle is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
Developers can dismiss this warning by removing their usage of the "legacy" property and using the new toggle syntax.`,
this.el
);
}
this.hasLoggedDeprecationWarning = true;
}