From d2bb3e407cb2668b5f873779297529a98eaa3dd1 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 20 Oct 2023 10:51:59 -0500 Subject: [PATCH 01/20] update slotMutationController to allow multiple slot names --- core/src/utils/slot-mutation-controller.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts index 663b781a367..3827c28f9fa 100644 --- a/core/src/utils/slot-mutation-controller.ts +++ b/core/src/utils/slot-mutation-controller.ts @@ -6,18 +6,20 @@ import { raf } from '@utils/helpers'; * This is not needed for components using native slots in the Shadow DOM. * @internal * @param el The host element to observe - * @param slotName mutationCallback will fire when nodes on this slot change + * @param slotName mutationCallback will fire when nodes on these slot(s) change * @param mutationCallback The callback to fire whenever the slotted content changes */ export const createSlotMutationController = ( el: HTMLElement, - slotName: string, + slotName: string | string[], mutationCallback: () => void ): SlotMutationController => { let hostMutationObserver: MutationObserver | undefined; let slottedContentMutationObserver: MutationObserver | undefined; if (win !== undefined && 'MutationObserver' in win) { + const slots = Array.isArray(slotName) ? slotName : [slotName]; + hostMutationObserver = new MutationObserver((entries) => { for (const entry of entries) { for (const node of entry.addedNodes) { @@ -25,7 +27,7 @@ export const createSlotMutationController = ( * Check to see if the added node * is our slotted content. */ - if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) { + if (node.nodeType === Node.ELEMENT_NODE && slots.includes((node as HTMLElement).slot)) { /** * If so, we want to watch the slotted * content itself for changes. This lets us From c000febc6e42541f12cccdacb515bb461a0a1500 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 30 Oct 2023 12:57:46 -0500 Subject: [PATCH 02/20] add slots and test HTML --- .../components/textarea/test/slot/index.html | 185 ++++++++++++++++-- core/src/components/textarea/textarea.tsx | 6 +- 2 files changed, 178 insertions(+), 13 deletions(-) diff --git a/core/src/components/textarea/test/slot/index.html b/core/src/components/textarea/test/slot/index.html index 23fe260c7c7..1e4f4b41281 100644 --- a/core/src/components/textarea/test/slot/index.html +++ b/core/src/components/textarea/test/slot/index.html @@ -51,51 +51,176 @@
-

No Fill / Start

+

No Fill / Start Label

Email *
-

Solid / Start

+

Solid / Start Label

Email *
-

Outline / Start

+

Outline / Start Label

Email *
-

No Fill / Floating

+

No Fill / Floating Label

Email *
-

Solid / Floating

+

Solid / Floating Label

Email *
-

Outline / Floating

+

Outline / Floating Label

Email *
-

Outline / Floating / Async

+

No Fill / Start Label / Buttons

+ + + + + + + + +
+ +
+

Solid / Start Label / Buttons

+ + + + + + + + +
+ +
+

Outline / Start Label / Buttons

+ + + + + + + + +
+ +
+

No Fill / Floating Label / Buttons

+ + + + + + + + +
+ +
+

Solid / Floating Label / Buttons

+ + + + + + + + +
+ +
+

Outline / Floating Label / Buttons

+ + + + + + + + +
+ +
+

No Fill / Start Label / Decorations

+ + + lbs + +
+ +
+

Solid / Start Label / Decorations

+ + + lbs + +
+ +
+

Outline / Start Label / Decorations

+ + + lbs + +
+ +
+

No Fill / Floating Label / Decorations

+ + + lbs + +
+ +
+

Solid / Floating Label / Decorations

+ + + lbs + +
+ +
+

Outline / Floating Label / Decorations

+ + + lbs + +
+ +
+

Outline / Async Label

+ +
+

Outline / Async Decorations

+ +
Add Slotted Content @@ -106,29 +231,65 @@

Outline / Floating / Async