From 8fff65cb66790c0def9ae322d9cef590acb7c521 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 13 Dec 2022 16:32:33 -0500 Subject: [PATCH] chore(forms): add revision legacy form detection (#26477) --- core/src/utils/forms/form-controller.ts | 33 +++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts index 67b0e33641..932dc08135 100644 --- a/core/src/utils/forms/form-controller.ts +++ b/core/src/utils/forms/form-controller.ts @@ -18,8 +18,7 @@ export const createLegacyFormController = (el: AllowedFormElements): LegacyFormC * can check to see if the component has slotted text * in the light DOM. */ - const hasLabelProp = - (controlEl as any).label !== undefined || (controlEl.shadowRoot !== null && controlEl.textContent !== ''); + const hasLabelProp = (controlEl as any).label !== undefined || hasLabelSlot(controlEl); const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label'); /** @@ -38,3 +37,33 @@ export const createLegacyFormController = (el: AllowedFormElements): LegacyFormC export type LegacyFormController = { hasLegacyControl: () => boolean; }; + +const hasLabelSlot = (controlEl: HTMLElement) => { + const root = controlEl.shadowRoot; + if (root === null) { + return false; + } + + /** + * Components that have a named label slot + * also have other slots, so we need to query for + * anything that is explicitly passed to slot="label" + */ + if (NAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.querySelector('[slot="label"]') !== null) { + return true; + } + + /** + * Components that have an unnamed slot for the label + * have no other slots, so we can check the textContent + * of the element. + */ + if (UNNAMED_LABEL_SLOT_COMPONENTS.includes(controlEl.tagName) && controlEl.textContent !== '') { + return true; + } + + return false; +}; + +const NAMED_LABEL_SLOT_COMPONENTS: string[] = []; +const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE'];