fix: show card content when passing text to default slot (#11209) (#11242)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/card/src/vaadin-card.js

@@ -5,6 +5,7 @@
  */
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -157,13 +158,19 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(Li
     );
     this.toggleAttribute('_hp', this.querySelector(':scope > [slot="header-prefix"]'));
     this.toggleAttribute('_hs', this.querySelector(':scope > [slot="header-suffix"]'));
-    this.toggleAttribute('_c', this.querySelector(':scope > :not([slot])'));
+    this.toggleAttribute('_c', this.__hasContent());
     this.toggleAttribute('_f', this.querySelector(':scope > [slot="footer"]'));
     if (this.__getCustomTitleElement()) {
       this.__clearStringTitle();
     }
   }
 
+  /** @private */
+  __hasContent() {
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    return slot.assignedNodes({ flatten: true }).filter((node) => !isEmptyTextNode(node)).length > 0;
+  }
+
   /** @private */
   __clearStringTitle() {
     const stringTitleElement = this.__getStringTitleElement();

packages/card/test/dom/__snapshots__/card.test.snap.js

@@ -138,6 +138,16 @@ snapshots["vaadin-card host content"] =
 `;
 /* end snapshot vaadin-card host content */
 
+snapshots["vaadin-card host text content"] = 
+`<vaadin-card
+  _c=""
+  role="region"
+>
+  Text content
+</vaadin-card>
+`;
+/* end snapshot vaadin-card host text content */
+
 snapshots["vaadin-card host footer"] = 
 `<vaadin-card
   _f=""

packages/card/test/dom/card.test.ts

@@ -109,6 +109,12 @@ describe('vaadin-card', () => {
       await expect(card).dom.to.equalSnapshot();
     });
 
+    it('text content', async () => {
+      card.appendChild(document.createTextNode('Text content'));
+      await nextUpdate(card);
+      await expect(card).dom.to.equalSnapshot();
+    });
+
     it('footer', async () => {
       const footer = document.createElement('div');
       footer.setAttribute('slot', 'footer');

packages/card/test/visual/base/card.test.js

@@ -22,7 +22,7 @@ describe('card', () => {
     div.style.padding = '20px';
   });
 
-  const cardFixture = (content) => fixtureSync(`<vaadin-card>${content}</vaadin-card>`, div);
+  const cardFixture = (content = '') => fixtureSync(`<vaadin-card>${content}</vaadin-card>`, div);
 
   const mediaFixture = (showImage, theme) => {
     const media = showImage

packages/card/test/visual/lumo/card.test.js

@@ -47,7 +47,7 @@ describe('card', () => {
     div.style.padding = '20px';
   });
 
-  const cardFixture = (content) => fixtureSync(`<vaadin-card>${content}</vaadin-card>`, div);
+  const cardFixture = (content = '') => fixtureSync(`<vaadin-card>${content}</vaadin-card>`, div);
 
   describe('slot', () => {
     it('content', async () => {