diff --git a/packages/uui-base/lib/mixins/LabelMixin.ts b/packages/uui-base/lib/mixins/LabelMixin.ts index f4d90e923..96f38627b 100644 --- a/packages/uui-base/lib/mixins/LabelMixin.ts +++ b/packages/uui-base/lib/mixins/LabelMixin.ts @@ -48,18 +48,9 @@ export const LabelMixin = >( 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 index 8d8513995..5bf0a2ec8 100644 --- 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} - + label=${props.label} + >${props.slot} `; }; diff --git a/packages/uui-button/lib/uui-button.test.ts b/packages/uui-button/lib/uui-button.test.ts index 25eb06e7f..ff8f52965 100644 --- 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`   `, + html` `, ); 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 index 3470ca8e1..fddd2bf82 100644 --- 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} - + ?checked=${props.checked} + >${props.slot} `; AAAOverview.storyName = 'Overview';