feat(toggle): component can be used outside of ion-item (#26357)

resolves #25570, resolves #23213

BREAKING CHANGE:

The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively.
This commit is contained in:
Liam DeBeasi
2022-11-29 12:54:31 -05:00
committed by GitHub
parent 0ca6fee1d7
commit c74901c973
293 changed files with 1719 additions and 221 deletions

View File

@@ -4,8 +4,9 @@
* @internal
* @prop el: The Ionic form component to reference
*/
export const createLegacyFormController = (el: HTMLIonInputElement): LegacyFormController => {
const controlEl: HTMLIonInputElement = el;
type AllowedFormElements = HTMLIonInputElement | HTMLIonToggleElement;
export const createLegacyFormController = (el: AllowedFormElements): LegacyFormController => {
const controlEl: AllowedFormElements = el;
let legacyControl = true;
/**
@@ -13,8 +14,12 @@ export const createLegacyFormController = (el: HTMLIonInputElement): LegacyFormC
* so a deprecation warning is logged. This warning can be disabled
* by either using the new `label` property or setting `aria-label`
* on the control.
* Alternatively, components that use a slot for the label
* can check to see if the component has slotted text
* in the light DOM.
*/
const hasLabelProp = controlEl.label !== undefined;
const hasLabelProp =
(controlEl as any).label !== undefined || (controlEl.shadowRoot !== null && controlEl.textContent !== '');
const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label');
legacyControl = !hasLabelProp && !hasAriaLabelAttribute;