fix: revert the function to calculate if a default slot is empty

umbraco · Jul 11, 2024 · cea165e · cea165e
1 parent b628ccb
commit cea165e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 19 deletions.
diff --git a/packages/uui-base/lib/mixins/LabelMixin.ts b/packages/uui-base/lib/mixins/LabelMixin.ts
@@ -48,18 +48,9 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
     private _labelSlotHasContent = false;
 
     private labelSlotChanged(e: Event): void {
-      const nodes = (e.target as HTMLSlotElement).assignedNodes();
-
-      if (!nodes.length) {
-        this._labelSlotHasContent = false;
-        return;
-      }
-
-      // If some nodes are not TEXT_NODE, or if one of the nodes is not empty, set the slot as having content
-      this._labelSlotHasContent = nodes.some(
-        node =>
-          node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim().length,
-      );
+      this._labelSlotHasContent =
+        (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >
+        0;
     }
 
     /**

diff --git a/packages/uui-button/lib/uui-button.story.ts b/packages/uui-button/lib/uui-button.story.ts
@@ -108,9 +108,9 @@ const Template: Story = props => {
       .rel=${props.rel}
       look=${props.look}
       color=${props.color}
-      label=${props.label}>
-      ${props.slot}
-    </uui-button>
+      label=${props.label}
+      >${props.slot}</uui-button
+    >
   `;
 };
 

diff --git a/packages/uui-button/lib/uui-button.test.ts b/packages/uui-button/lib/uui-button.test.ts
@@ -121,7 +121,7 @@ describe('UuiButton', () => {
     });
     it('label property is used when no default slot is provided', async () => {
       const element = await fixture(
-        html` <uui-button label="My label"> &nbsp; </uui-button>`,
+        html` <uui-button label="My label"></uui-button>`,
       );
       expect(element.shadowRoot?.textContent).to.include('My label');
     });

diff --git a/packages/uui-toggle/lib/uui-toggle.story.ts b/packages/uui-toggle/lib/uui-toggle.story.ts
@@ -40,9 +40,9 @@ export const AAAOverview: Story = props => html`
     .labelPosition=${props.labelPosition}
     ?disabled=${props.disabled}
     ?readonly=${props.readonly}
-    ?checked=${props.checked}>
-    ${props.slot}
-  </uui-toggle>
+    ?checked=${props.checked}
+    >${props.slot}</uui-toggle
+  >
 `;
 AAAOverview.storyName = 'Overview';