fix(atomic): don't remove field-condition, hide it instead (#6623)

Co-authored-by: developer-experience-bot[bot] <91079284+developer-experience-bot[bot]@users.noreply.github.com>

Author: alexprudhomme

packages/atomic/src/components/search/atomic-field-condition/atomic-field-condition.spec.ts

@@ -43,79 +43,84 @@ describe('atomic-field-condition', () => {
   };
 
   it('should render its content when no conditions are defined', async () => {
-    const {content} = await renderFieldCondition();
+    const {element, content} = await renderFieldCondition();
+    expect(element?.hidden).toBe(false);
     expect(content).toBeInTheDocument();
   });
 
   it('should render its content when an if-defined condition is met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element, content} = await renderFieldCondition({
       ifDefined: 'author',
       resultState: {raw: {author: 'John Doe'}},
     });
 
+    expect(element?.hidden).toBe(false);
     expect(content).toBeInTheDocument();
   });
 
   it('should not render its content when an if-defined condition is not met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element} = await renderFieldCondition({
       ifDefined: 'author',
       resultState: {raw: {}},
     });
 
-    expect(content).toBeUndefined();
+    expect(element?.hidden).toBe(true);
   });
 
   it('should render its content when an if-not-defined condition is met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element, content} = await renderFieldCondition({
       ifNotDefined: 'author',
       resultState: {raw: {}},
     });
 
+    expect(element?.hidden).toBe(false);
     expect(content).toBeInTheDocument();
   });
 
   it('should not render its content when an if-not-defined condition is not met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element} = await renderFieldCondition({
       ifNotDefined: 'author',
       resultState: {raw: {author: 'John Doe'}},
     });
 
-    expect(content).toBeUndefined();
+    expect(element?.hidden).toBe(true);
   });
 
   it('should render its content when a must-match condition is met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element, content} = await renderFieldCondition({
       mustMatch: {filetype: ['pdf']},
       resultState: {raw: {filetype: 'pdf'}},
     });
 
+    expect(element?.hidden).toBe(false);
     expect(content).toBeInTheDocument();
   });
 
   it('should not render its content when a must-match condition is not met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element} = await renderFieldCondition({
       mustMatch: {filetype: ['pdf']},
       resultState: {raw: {filetype: 'docx'}},
     });
 
-    expect(content).toBeUndefined();
+    expect(element?.hidden).toBe(true);
   });
 
   it('should render its content when a must-not-match condition is met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element, content} = await renderFieldCondition({
       mustNotMatch: {filetype: ['docx']},
       resultState: {raw: {filetype: 'pdf'}},
     });
 
+    expect(element?.hidden).toBe(false);
     expect(content).toBeInTheDocument();
   });
 
   it('should not render its content when a must-not-match condition is not met', async () => {
-    const {content} = await renderFieldCondition({
+    const {element} = await renderFieldCondition({
       mustNotMatch: {filetype: ['docx']},
       resultState: {raw: {filetype: 'docx'}},
     });
 
-    expect(content).toBeUndefined();
+    expect(element?.hidden).toBe(true);
   });
 });

packages/atomic/src/components/search/atomic-field-condition/atomic-field-condition.ts

@@ -85,7 +85,10 @@ export class AtomicFieldCondition
     const result = this.getResult();
 
     if (!result || !this.conditions.every((condition) => condition(result))) {
-      this.remove();
+      // TODO: Replace this.hidden = true with this.remove() once all Search components are migrated from Stencil to Lit.
+      // Currently using hidden to avoid breaking Stencil initialization event system in mixed Stencil/Lit component trees.
+      this.hidden = true;
+      return html``;
     }
 
     return html`<slot></slot>`;

packages/atomic/src/utils/custom-element-tags.ts

@@ -49,6 +49,7 @@ export const ATOMIC_CUSTOM_ELEMENT_TAGS = new Set<string>([
   'atomic-layout-section',
   'atomic-load-more-results',
   'atomic-modal',
+  'atomic-no-results',
   'atomic-numeric-range',
   'atomic-pager',
   'atomic-product',