Fix missing stack-item headerColor and realm-icon border properties (#2038)

* fix missing headerColor and realm-icon border properties

* rev change

* add test

* update test

Author: burieberry

packages/boxel-ui/addon/src/components/card-header/index.gts

@@ -1,4 +1,3 @@
-import { concat } from '@ember/helper';
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
@@ -37,33 +36,27 @@ export default class CardHeader extends Component<Signature> {
   get safeMoreOptionsMenuItems() {
     return this.args.moreOptionsMenuItems || [];
   }
-  get headerColor() {
-    return (
-      this.args.headerColor ||
-      getComputedStyle(document.documentElement).getPropertyValue(
-        '--boxel-light',
-      )
-    );
-  }
   <template>
     <header
       data-test-card-header
       class={{cn is-editing=(bool @onFinishEditing)}}
       {{setCssVar
-        boxel-card-header-background-color=this.headerColor
-        boxel-card-header-text-color=(getContrastColor this.headerColor)
+        boxel-card-header-background-color=@headerColor
+        boxel-card-header-text-color=(getContrastColor @headerColor)
       }}
       ...attributes
     >
       <div
         class='realm-icon-container'
-        style={{cssVar
-          boxel-realm-icon-background-color=(getContrastColor
-            this.headerColor 'transparent'
-          )
-          boxel-realm-icon-border=(concat
-            '1px solid '
-            (getContrastColor this.headerColor 'rgba(0, 0, 0, 0.15)')
+        style={{if
+          @headerColor
+          (cssVar
+            boxel-realm-icon-background-color=(getContrastColor
+              @headerColor 'transparent'
+            )
+            boxel-realm-icon-border-color=(getContrastColor
+              @headerColor 'rgba(0, 0, 0, 0.15)'
+            )
           )
         }}
       >
@@ -264,12 +257,14 @@ export default class CardHeader extends Component<Signature> {
           align-items: center;
           min-width: var(--boxel-card-header-icon-container-min-width);
           justify-content: left;
-          --boxel-realm-icon-background-color: var(--boxel-light);
-          --boxel-realm-icon-border-radius: 7px;
-        }
-        .is-editing .realm-icon-container {
-          --boxel-realm-icon-background-color: var(--boxel-light);
-          --boxel-realm-icon-border: 1px solid var(--boxel-light);
+          --boxel-realm-icon-background-color: var(
+            --realm-icon-background-color
+          );
+          --boxel-realm-icon-border-color: var(--realm-icon-border-color);
+          --boxel-realm-icon-border-radius: var(
+            --realm-icon-border-radius,
+            7px
+          );
         }
 
         .realm-icon {

packages/boxel-ui/addon/src/components/card-header/usage.gts

@@ -134,7 +134,7 @@ export default class CardHeaderUsage extends Component {
           />
           <Args.String
             @name='headerColor'
-            @description='background color of the header, defaults to boxel-light'
+            @description='background color of the header'
             @value={{this.headerColor}}
             @onInput={{fn (mut this.headerColor)}}
           />
@@ -195,15 +195,15 @@ export default class CardHeaderUsage extends Component {
           <Css.Basic
             @name='boxel-card-header-icon-container-min-width'
             @type='length'
-            @description='minimum width of the icon container; useful to set matching boxel-card-header-actions-min-width to keep the title centered opverall'
+            @description='minimum width of the icon container; useful to set matching boxel-card-header-actions-min-width to keep the title centered overall'
             @defaultValue={{this.cardHeaderIconContainerMinWidth.defaults}}
             @value={{this.cardHeaderIconContainerMinWidth.value}}
             @onInput={{this.cardHeaderIconContainerMinWidth.update}}
           />
           <Css.Basic
             @name='boxel-card-header-actions-min-width'
             @type='length'
-            @description='minimum width of the actions container; useful to set matching boxel-card-header-icon-container-min-width to keep the title centered opverall'
+            @description='minimum width of the actions container; useful to set matching boxel-card-header-icon-container-min-width to keep the title centered overall'
             @defaultValue={{this.cardHeaderActionsMinWidth.defaults}}
             @value={{this.cardHeaderActionsMinWidth.value}}
             @onInput={{this.cardHeaderActionsMinWidth.update}}

packages/host/app/components/operator-mode/stack-item.gts

@@ -624,9 +624,14 @@ export default class OperatorModeStackItem extends Component<Signature> {
               boxel-card-header-actions-min-width=(if
                 this.isBuried '50px' '95px'
               )
-              realm-icon-background=(getContrastColor
+              boxel-card-header-background-color=@item.headerColor
+              boxel-card-header-text-color=(getContrastColor @item.headerColor)
+              realm-icon-background-color=(getContrastColor
                 @item.headerColor 'transparent'
               )
+              realm-icon-border-color=(getContrastColor
+                @item.headerColor 'transparent' 'rgba(0 0 0 / 15%)'
+              )
             }}
             role={{if this.isBuried 'button' 'banner'}}
             {{on
@@ -654,7 +659,6 @@ export default class OperatorModeStackItem extends Component<Signature> {
             <CardHeader
               @cardTypeDisplayName={{this.headerTitle}}
               @cardTypeIcon={{cardTypeIcon @item.card}}
-              @headerColor={{@item.headerColor}}
               @isSaving={{this.isSaving}}
               @isTopCard={{this.isTopCard}}
               @lastSavedMessage={{this.lastSavedMsg}}
@@ -671,9 +675,16 @@ export default class OperatorModeStackItem extends Component<Signature> {
                 boxel-card-header-actions-min-width=(if
                   this.isBuried '50px' '95px'
                 )
-                realm-icon-background=(getContrastColor
+                boxel-card-header-background-color=@item.headerColor
+                boxel-card-header-text-color=(getContrastColor
+                  @item.headerColor
+                )
+                realm-icon-background-color=(getContrastColor
                   @item.headerColor 'transparent'
                 )
+                realm-icon-border-color=(getContrastColor
+                  @item.headerColor 'transparent' 'rgba(0 0 0 / 15%)'
+                )
               }}
               role={{if this.isBuried 'button' 'banner'}}
               {{on
@@ -774,6 +785,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
 
       .item.buried {
         --stack-item-header-height: 2.5rem;
+        --realm-icon-border-radius: 4px;
       }
 
       .stack-item-card {

packages/host/tests/integration/components/operator-mode-test.gts

@@ -328,6 +328,7 @@ module('Integration | operator-mode', function (hooks) {
 
     class PublishingPacket extends CardDef {
       static displayName = 'Publishing Packet';
+      static headerColor = '#6638ff'; // rgb(102, 56, 255);
       @field blogPost = linksTo(BlogPost);
       @field socialBlurb = contains(TextAreaField);
     }
@@ -351,6 +352,11 @@ module('Integration | operator-mode', function (hooks) {
       firstName: 'Alien',
       lastName: 'Bob',
     });
+    let blogPost = new BlogPost({
+      title: 'Outer Space Journey',
+      body: 'Hello world',
+      authorBio: author1,
+    });
 
     //Generate 11 person card to test recent card menu in card sheet
     let personCards: Map<String, any> = new Map<String, any>();
@@ -497,13 +503,13 @@ module('Integration | operator-mode', function (hooks) {
             firstName: 'Mark',
             lastName: 'Jackson',
           }),
-          'BlogPost/1.json': new BlogPost({
-            title: 'Outer Space Journey',
-            body: 'Hello world',
-            authorBio: author1,
-          }),
+          'BlogPost/1.json': blogPost,
           'BlogPost/2.json': new BlogPost({ title: 'Beginnings' }),
           'CardDef/1.json': new CardDef({ title: 'CardDef instance' }),
+          'PublishingPacket/story.json': new PublishingPacket({
+            title: 'Space Story',
+            blogPost,
+          }),
           '.realm.json': `{ "name": "${realmName}", "iconURL": "https://boxel-images.boxel.ai/icons/Letter-o.png" }`,
           ...Object.fromEntries(personCards),
         },
@@ -2972,7 +2978,7 @@ module('Integration | operator-mode', function (hooks) {
     assert
       .dom(`[data-test-cards-grid-item="${testRealmURL}CardDef/1"]`)
       .exists();
-    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 9 });
+    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 10 });
     assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).doesNotExist();
 
     await click('[data-test-create-new-card-button]');
@@ -2992,7 +2998,7 @@ module('Integration | operator-mode', function (hooks) {
         await click('[data-test-close-button]');
       },
     });
-    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 10 });
+    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 11 });
     assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).exists();
 
     await click('[data-test-boxel-filter-list-button="Skill"]');
@@ -3008,7 +3014,7 @@ module('Integration | operator-mode', function (hooks) {
       },
     });
 
-    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 9 });
+    assert.dom(`[data-test-boxel-filter-list-button]`).exists({ count: 10 });
     assert.dom(`[data-test-boxel-filter-list-button="Skill"]`).doesNotExist();
     assert
       .dom(`[data-test-boxel-filter-list-button="All Cards"]`)
@@ -3066,4 +3072,49 @@ module('Integration | operator-mode', function (hooks) {
       .dom(`[data-test-stack-card-index="0"]`)
       .doesNotHaveClass('opening-animation');
   });
+
+  test('stack item with custom header color does not lose the color when opening other cards in the stack', async function (assert) {
+    const cardId = `${testRealmURL}PublishingPacket/story`;
+    const customStyle = {
+      backgroundColor: 'rgb(102, 56, 255)',
+      color: 'rgb(255, 255, 255)',
+    };
+    await setCardInOperatorModeState(cardId);
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template>
+          <OperatorMode @onClose={{noop}} />
+          <CardPrerender />
+        </template>
+      },
+    );
+    assert.dom(`[data-test-stack-card="${cardId}"]`).exists();
+    assert
+      .dom(`[data-stack-card="${cardId}"] [data-test-card-header]`)
+      .hasStyle(customStyle);
+
+    await click(`[data-test-card="${testRealmURL}BlogPost/1"]`);
+    assert.dom(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`).exists();
+    assert
+      .dom(
+        `[data-stack-card="${testRealmURL}BlogPost/1"] [data-test-card-header]`,
+      )
+      .hasStyle({
+        backgroundColor: 'rgb(255, 255, 255)',
+        color: 'rgb(0, 0, 0)',
+      });
+    assert
+      .dom(`[data-stack-card="${cardId}"] [data-test-card-header]`)
+      .hasStyle(customStyle);
+
+    await click(
+      `[data-stack-card="${testRealmURL}BlogPost/1"] [data-test-close-button]`,
+    );
+    await waitFor(`[data-test-stack-card="${testRealmURL}BlogPost/1"]`, {
+      count: 0,
+    });
+    assert
+      .dom(`[data-stack-card="${cardId}"] [data-test-card-header]`)
+      .hasStyle(customStyle);
+  });
 });