Merge pull request #844 from umbraco/v1/bugfix/label-empty-textnodes

fix: label does not render if there are empty text nodes inside the default slot

Author: iOvergaard

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -47,10 +47,19 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
     @state()
     private _labelSlotHasContent = false;
 
-    private labelSlotChanged(e: any): void {
-      this._labelSlotHasContent =
-        (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length >
-        0;
+    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,
+      );
     }
 
     /**

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.content}</uui-button
-    >
+      label=${props.label}>
+      ${props.slot}
+    </uui-button>
   `;
 };
 

packages/uui-button/lib/uui-button.test.ts

@@ -119,6 +119,19 @@ describe('UuiButton', () => {
       const slot = element.shadowRoot!.querySelector('button')!;
       expect(slot).to.exist;
     });
+    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>`,
+      );
+      expect(element.shadowRoot?.textContent).to.include('My label');
+    });
+    it('default slot takes precedence over label property', async () => {
+      element.label = 'My label';
+      await elementUpdated(element);
+      const slot = element.shadowRoot!.querySelector('slot')!;
+      expect(slot.assignedNodes().length).to.equal(1);
+      expect(slot.assignedNodes()[0].textContent).to.equal('Hello uui-button');
+    });
   });
 
   describe('events', () => {

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';