Merge branch 'main' into glimmer-scoped-css-0.7.0

Author: backspace

packages/base/default-templates/atom.gts

@@ -1,5 +1,6 @@
 import GlimmerComponent from '@glimmer/component';
-import type { CardDef } from '../card-api';
+import { type CardDef, isCompoundField } from '../card-api';
+import { cn, not } from '@cardstack/boxel-ui/helpers';
 
 export default class DefaultAtomViewTemplate extends GlimmerComponent<{
   Args: {
@@ -8,26 +9,20 @@ export default class DefaultAtomViewTemplate extends GlimmerComponent<{
   };
 }> {
   get text() {
-    let title =
-      typeof this.args.model.title === 'string'
-        ? this.args.model.title.trim()
-        : null;
-
-    return title
-      ? title
-      : `Untitled ${this.args.model.constructor.displayName}`;
+    if (!this.args.model) {
+      return;
+    }
+    if (typeof this.args.model.title === 'string') {
+      return this.args.model.title.trim();
+    }
+    if (isCompoundField(this.args.model)) {
+      return;
+    }
+    return `Untitled ${this.args.model.constructor.displayName}`;
   }
   <template>
-    <span class='atom-default-template'>
+    <span class={{cn 'atom-default-template' empty-field=(not @model)}}>
       {{this.text}}
     </span>
-    <style scoped>
-      @layer {
-        .atom-default-template {
-          font: 600 var(--boxel-font-sm);
-          letter-spacing: var(--boxel-lsp-xs);
-        }
-      }
-    </style>
   </template>
 }

packages/experiments-realm/AtomExamples/d7aa387b-6514-47c0-ace2-7de011453e51.json

@@ -193,7 +193,7 @@
       },
       "contacts.0": {
         "links": {
-          "self": "../Customer/0e5aec99-798b-4417-9426-a338432e0ee5"
+          "self": "../Customer/1274acf3-5b66-4373-89a2-fe8106c3d586"
         }
       },
       "contacts.1": {
@@ -203,7 +203,7 @@
       },
       "contacts.2": {
         "links": {
-          "self": "../Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae"
+          "self": "../Customer/0c71bda7-f4d8-451a-97cb-567a8fa31763"
         }
       }
     },

packages/experiments-realm/atom-examples.gts

@@ -74,32 +74,20 @@ class Isolated extends Component<typeof AtomExamples> {
           <h4>Using default atom template for Pet card:</h4>
           <div>
             Pet:
-            {{#if @model.pet}}
-              <@fields.pet @format='atom' />
-            {{else}}
-              (Bug: CS-7734)
-            {{/if}}
+            <@fields.pet @format='atom' />
           </div>
           <div>
             Pets:
-            {{#if @model.pets}}
-              <@fields.pets @format='atom' />
-            {{else}}
-              (Bug: CS-7734)
-            {{/if}}
+            <@fields.pets @format='atom' />
           </div>
           <h4>Default atom template without container:</h4>
           <div>
             Pet:
-            {{#if @model.pet}}
-              <@fields.pet @format='atom' @displayContainer={{false}} />
-            {{/if}}
+            <@fields.pet @format='atom' @displayContainer={{false}} />
           </div>
           <div>
             Pets:
-            {{#if @model.pets}}
-              <@fields.pets @format='atom' @displayContainer={{false}} />
-            {{/if}}
+            <@fields.pets @format='atom' @displayContainer={{false}} />
           </div>
         </section>
         <section>

packages/host/tests/integration/components/card-basics-test.gts

@@ -1421,9 +1421,7 @@ module('Integration | card-basics', function (hooks) {
       person.firstName = '';
       person.lastName = '';
       await renderCard(loader, person, 'atom');
-      assert
-        .dom('[data-test-compound-field-component]')
-        .hasText('Untitled Person');
+      assert.dom('[data-test-compound-field-component]').hasNoText();
     });
 
     test('render user-provided atom view template', async function (assert) {
@@ -1501,6 +1499,47 @@ module('Integration | card-basics', function (hooks) {
       );
     });
 
+    test('can render empty linksTo and linksToMany fields in default atom format', async function (assert) {
+      class Pet extends CardDef {
+        @field firstName = contains(StringField);
+        @field title = contains(StringField, {
+          computeVia: function (this: Pet) {
+            return this.firstName;
+          },
+        });
+      }
+      class Person extends CardDef {
+        @field firstName = contains(StringField);
+        @field pet = linksTo(Pet);
+        @field pets = linksToMany(Pet);
+        static isolated = class Isolated extends Component<typeof this> {
+          <template>
+            <h3 data-test-person><@fields.firstName /></h3>
+            <div data-test-pet>
+              Pet:
+              <@fields.pet @format='atom' />
+            </div>
+            <div data-test-pets>
+              Pets:
+              <@fields.pets @format='atom' />
+            </div>
+          </template>
+        };
+      }
+      let hassan = new Person({ firstName: 'Hassan' });
+      await renderCard(loader, hassan, 'isolated');
+
+      assert.dom('[data-test-person]').hasText('Hassan');
+      assert.dom('[data-test-pet]').hasText('Pet:');
+      assert.dom('[data-test-pet] span').hasClass('empty-field');
+      assert.dom('[data-test-pets]').hasText('Pets:');
+      assert
+        .dom(
+          '[data-test-pets] > [data-test-plural-view="linksToMany"][data-test-plural-view-format="atom"]',
+        )
+        .hasClass('empty');
+    });
+
     test('render a containsMany composite field', async function (this: RenderingTestContext, assert) {
       class Person extends FieldDef {
         @field firstName = contains(StringField);