Merge pull request #5112 from cardstack/cs-11364-context-button

Use shared ContextButton for the Adorn overlay menu and select buttons

Author: lukemelia

packages/host/app/components/adorn/adorn-select-checkmark.gts

@@ -0,0 +1,72 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+// The Adorn selection-chip artwork as standalone Icon components, so the
+// selection control can be a shared boxel-ui ContextButton: the consumer
+// passes the empty variant when unselected and the checked variant when
+// selected via `@icon`, and ContextButton supplies the button chrome
+// (standard sizing, toggle / aria-pressed, hover background).
+//
+// Both are two-color composites (teal chip background, highlight-foreground
+// circle, teal check), so — like boxel-ui's SelectionCheckmark — they read
+// their colors from CSS variables rather than `currentColor`. The chip
+// background honors `--adorn-chip-bg` (falling back to the inherited
+// `--adorn-accent-light`) so it can be themed independently of the label,
+// matching the original AdornSelectChip. They are authored as
+// `TemplateOnlyComponent`s whose root is an `<svg>`, so they satisfy the
+// boxel-ui `Icon` type (`ComponentLike<{ Element: SVGSVGElement }>`) where
+// passed to `@icon`.
+interface Signature {
+  Element: SVGSVGElement;
+}
+
+// Empty (unselected): teal rounded-square chip with a hollow circle.
+export const AdornCheckmarkEmpty: TemplateOnlyComponent<Signature> = <template>
+  <svg
+    viewBox='0 0 20 20'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    ...attributes
+  >
+    <rect
+      width='20'
+      height='20'
+      rx='5'
+      fill='var(--adorn-chip-bg, var(--adorn-accent-light))'
+    />
+    <circle
+      cx='10'
+      cy='10'
+      r='6.5'
+      stroke='var(--boxel-highlight-foreground)'
+      stroke-width='1.5'
+    />
+  </svg>
+</template>;
+
+// Selected: teal rounded-square chip with a filled circle and teal check.
+export const AdornCheckmarkSelected: TemplateOnlyComponent<Signature> =
+  <template>
+    <svg
+      viewBox='0 0 20 20'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      ...attributes
+    >
+      <rect
+        width='20'
+        height='20'
+        rx='5'
+        fill='var(--adorn-chip-bg, var(--adorn-accent-light))'
+      />
+      <circle cx='10' cy='10' r='7' fill='var(--boxel-highlight-foreground)' />
+      <path
+        d='M6.5 10.5L8.5 12.5L13.5 7.5'
+        stroke='var(--adorn-accent-light)'
+        stroke-width='1.5'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg>
+  </template>;

packages/host/app/components/operator-mode/operator-mode-overlays.gts

@@ -3,7 +3,6 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 
-import DotsVertical from '@cardstack/boxel-icons/dots-vertical';
 import { modifier } from 'ember-modifier';
 import { consume } from 'ember-provide-consume-context';
 import { velcro } from 'ember-velcro';
@@ -12,7 +11,7 @@ import { TrackedSet } from 'tracked-built-ins';
 import type { BoxelDropdownAPI } from '@cardstack/boxel-ui/components';
 import {
   BoxelDropdown,
-  IconButton,
+  ContextButton,
   Menu,
 } from '@cardstack/boxel-ui/components';
 
@@ -45,7 +44,10 @@ import {
 
 import AdornContext from '@cardstack/host/components/adorn/adorn-context';
 import AdornLabel from '@cardstack/host/components/adorn/adorn-label';
-import AdornSelectChip from '@cardstack/host/components/adorn/adorn-select-chip';
+import {
+  AdornCheckmarkEmpty,
+  AdornCheckmarkSelected,
+} from '@cardstack/host/components/adorn/adorn-select-checkmark';
 
 import { removeFileExtension } from '@cardstack/host/utils/card-search/types';
 
@@ -156,10 +158,12 @@ export default class OperatorModeOverlays extends Overlays {
                       @onClose={{this.handleMenuClose}}
                     >
                       <:trigger as |bindings|>
-                        <IconButton
-                          @icon={{DotsVertical}}
-                          class='overlay-label-menu'
-                          aria-label='Options'
+                        <ContextButton
+                          @icon='context-menu-vertical'
+                          @variant='ghost'
+                          @size='extra-small'
+                          @label='Options'
+                          type='button'
                           data-test-overlay-more-options
                           {{bindings}}
                           {{on
@@ -182,23 +186,30 @@ export default class OperatorModeOverlays extends Overlays {
                 </AdornLabel>
               {{/if}}
 
-              {{! Selection indicator — wrap the chip in a button so
-                  it can be clicked to toggle selection. }}
+              {{! Selection toggle — a ContextButton in toggle mode showing
+                  the Adorn selection-chip artwork (empty vs. checked) via
+                  @icon, so it picks up the shared standard sizing and
+                  toggle (aria-pressed) chrome while keeping the chip look. }}
               {{#if (this.isButtonDisplayed 'select' renderedCard)}}
-                <button
+                <ContextButton
+                  @isToggle={{true}}
+                  @isActive={{isSelected}}
+                  @variant='ghost'
+                  @size='extra-small'
+                  @width='1.25rem'
+                  @height='1.25rem'
+                  @icon={{if
+                    isSelected
+                    AdornCheckmarkSelected
+                    AdornCheckmarkEmpty
+                  }}
+                  @label='select card'
                   type='button'
                   class='overlay-select-button'
                   {{! @glint-ignore (glint thinks toggleSelect is not in this scope but it actually is - we check for it in the condition above) }}
                   {{on 'click' (fn @toggleSelect cardDefOrId)}}
-                  aria-label='select card'
-                  aria-pressed={{if isSelected 'true' 'false'}}
                   data-test-overlay-select={{removeFileExtension cardId}}
-                >
-                  <AdornSelectChip
-                    @selected={{isSelected}}
-                    @compact={{isCompact}}
-                  />
-                </button>
+                />
               {{/if}}
             </div>
           {{/if}}
@@ -232,31 +243,15 @@ export default class OperatorModeOverlays extends Overlays {
         pointer-events: auto;
         z-index: 1;
       }
-      .overlay-label-menu {
-        width: 1.125rem;
-        height: 1.125rem;
-        margin-inline-start: 0;
-        padding: 0.125rem;
-        border-radius: 0.25rem;
-        --icon-bg: var(--boxel-highlight-foreground);
-        --icon-color: var(--boxel-highlight-foreground);
-        --boxel-icon-button-width: 1.125rem;
-        --boxel-icon-button-height: 1.125rem;
-      }
-      .overlay-label-menu:hover {
-        background: rgba(0, 0, 0, 0.12);
-      }
-      /* Selection-toggle button: positions the AdornSelectChip in
-         the bottom-right corner of the overlay and turns it into an
-         interactive control. */
+      /* The "..." menu trigger and the selection toggle are now shared
+         ContextButtons (extra-small size, ghost variant). The menu icon
+         inherits the teal label's highlight-foreground color and the
+         hover/active background comes from the ghost variant, so the
+         rules below only carry the consumer's placement concerns. */
       .overlay-select-button {
         position: absolute;
         bottom: 0.25rem;
         right: 0.25rem;
-        padding: 0;
-        border: none;
-        background: none;
-        cursor: pointer;
         pointer-events: auto;
         z-index: 1;
       }
@@ -266,16 +261,6 @@ export default class OperatorModeOverlays extends Overlays {
       .actions-overlay.field .overlay-select-button {
         display: none;
       }
-      /* Compact-mode sizing for the operator-mode-specific elements
-         (the menu trigger and the select button). The AdornLabel /
-         AdornSelectChip primitives get their compact variant from
-         the `@compact` arg we pass to each of them directly. */
-      .actions-overlay.compact .overlay-label-menu {
-        width: 0.875rem;
-        height: 0.875rem;
-        --boxel-icon-button-width: 0.875rem;
-        --boxel-icon-button-height: 0.875rem;
-      }
       .actions-overlay.compact .overlay-select-button {
         bottom: 0.125rem;
         right: 0.125rem;