chore: remove sp-quick-actions

INVENTORY.md

@@ -74,8 +74,6 @@ and [Spectrum Web Components](https://opensource.adobe.com/spectrum-web-componen
 | popover             | ✅                 | [📄](https://opensource.adobe.com/spectrum-css/popover.html)            | [📄](https://opensource.adobe.com/spectrum-web-components/components/popover)             |
 | progressbar         | ✅                 | [📄](https://opensource.adobe.com/spectrum-css/progressbar.html)        | [📄](https://opensource.adobe.com/spectrum-web-components/components/progress-bar)        |
 | progresscircle      | ✅                 | [📄](https://opensource.adobe.com/spectrum-css/progresscircle.html)     | [📄](https://opensource.adobe.com/spectrum-web-components/components/progress-circle)     |
-| quickaction         |                    | [📄](https://opensource.adobe.com/spectrum-css/quickaction.html)        | [📄](https://opensource.adobe.com/spectrum-web-components/components/quick-actions)       |
-| quickactions        | ✅                 |                                                                         |                                                                                           |
 | radio               | ✅                 | [📄](https://opensource.adobe.com/spectrum-css/radio.html)              | [📄](https://opensource.adobe.com/spectrum-web-components/components/radio)               |
 | radiogroup          | ✅                 |                                                                         |                                                                                           |
 | rating              | ✅                 | [📄](https://opensource.adobe.com/spectrum-css/rating.html)             | ❌                                                                                        |

packages/card/package.json

@@ -62,7 +62,6 @@
         "@spectrum-web-components/checkbox": "^0.47.2",
         "@spectrum-web-components/divider": "^0.47.2",
         "@spectrum-web-components/icons-workflow": "^0.47.2",
-        "@spectrum-web-components/quick-actions": "^0.47.2",
         "@spectrum-web-components/shared": "^0.47.2",
         "@spectrum-web-components/styles": "^0.47.2"
     },

packages/card/src/Card.ts

@@ -31,7 +31,7 @@ import '@spectrum-web-components/asset/sp-asset.js';
 
 import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
 import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
+import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/divider/sp-divider.js';
 import cardStyles from './card.css.js';
 import headingStyles from '@spectrum-web-components/styles/heading.js';
@@ -311,8 +311,8 @@ export class Card extends LikeAnchor(
                 : nothing}
             ${this.toggles
                 ? html`
-                      <sp-quick-actions
-                          class="quick-actions"
+                      <sp-popover
+                          class="checkbox-toggle"
                           @pointerdown=${this.stopPropagationOnHref}
                       >
                           <sp-checkbox
@@ -321,17 +321,17 @@ export class Card extends LikeAnchor(
                               ?checked=${this.selected}
                               tabindex="-1"
                           ></sp-checkbox>
-                      </sp-quick-actions>
+                      </sp-popover>
                   `
                 : nothing}
             ${this.variant === 'quiet' && this.size === 's'
                 ? html`
-                      <sp-quick-actions
+                      <div
                           class="spectrum-QuickActions actions"
                           @pointerdown=${this.stopPropagationOnHref}
                       >
                           <slot name="actions"></slot>
-                      </sp-quick-actions>
+                      </div>
                   `
                 : nothing}
         `;

packages/card/src/card.css

@@ -70,8 +70,12 @@ slot[name='description'] {
     height: inherit;
 }
 
-sp-quick-actions {
-    z-index: 1;
+sp-popover {
+    align-items: center;
+}
+
+.actions {
+    margin: auto;
 }
 
 /**

packages/card/src/spectrum-card.css

@@ -236,17 +236,17 @@ governing permissions and limitations under the License.
 }
 
 :host([focused]) .actions,
-:host([focused]) .quick-actions,
+:host([focused]) .checkbox-toggle,
 :host([selected]) .actions,
-:host([selected]) .quick-actions,
+:host([selected]) .checkbox-toggle,
 :host(:focus) .actions,
-:host(:focus) .quick-actions {
+:host(:focus) .checkbox-toggle {
     visibility: visible;
     opacity: 1;
     pointer-events: all;
 }
 
-.quick-actions {
+.checkbox-toggle {
     visibility: hidden;
     box-shadow: var(
             --mod-card-actions-drop-shadow-x,
@@ -749,7 +749,7 @@ governing permissions and limitations under the License.
     }
 
     :host(:hover) .actions,
-    :host(:hover) .quick-actions {
+    :host(:hover) .checkbox-toggle {
         visibility: visible;
         opacity: 1;
         pointer-events: all;

packages/card/src/spectrum-config.js

@@ -33,7 +33,7 @@ const config = {
                 converter.classToClass('spectrum-Card-content'),
                 converter.classToClass(
                     'spectrum-Card-quickActions',
-                    'quick-actions'
+                    'checkbox-toggle'
                 ),
                 converter.classToClass('spectrum-Card-actions'),
                 converter.classToClass(

packages/card/stories/card.stories.ts

@@ -63,6 +63,53 @@ export const Default = (args: StoryArgs): TemplateResult => {
 };
 Default.args = {};
 
+export const SmallQuiet = (args: StoryArgs): TemplateResult => {
+    const { onClick } = args;
+    return html`
+        <sp-card
+            heading="Card Heading"
+            subheading="JPG"
+            toggles
+            ?horizontal=${args.horizontal}
+            style="width: 200px;"
+            href="https://opensource.adobe.com/spectrum-web-components"
+            variant="quiet"
+            size="s"
+            toggles
+            @click=${(event: Event) => {
+                const composedTarget = event.composedPath()[0] as HTMLElement;
+                if (composedTarget.id !== 'like-anchor') return;
+                event.stopPropagation();
+                event.preventDefault();
+                onClick && onClick(event);
+            }}
+        >
+            <div slot="footer">
+                Footer with a
+                <sp-link href="https://google.com">link to Google</sp-link>
+            </div>
+            <sp-action-menu
+                label="More Actions"
+                slot="actions"
+                placement="bottom-end"
+                quiet
+            >
+                <sp-menu-item>Deselect</sp-menu-item>
+                <sp-menu-item>Select Inverse</sp-menu-item>
+                <sp-menu-item>Feather...</sp-menu-item>
+                <sp-menu-item>Select and Mask...</sp-menu-item>
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item>Save Selection</sp-menu-item>
+                <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            </sp-action-menu>
+            <img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
+        </sp-card>
+    `;
+};
+SmallQuiet.argTypes = {
+    onClick: { action: 'link click' },
+};
+
 export const href = (args: StoryArgs): TemplateResult => {
     const { onClick } = args;
     return html`

packages/coachmark/package.json

@@ -76,7 +76,6 @@
         "@spectrum-web-components/button-group": "^0.47.2",
         "@spectrum-web-components/icon": "^0.47.2",
         "@spectrum-web-components/icons-ui": "^0.47.2",
-        "@spectrum-web-components/quick-actions": "^0.47.2",
         "@spectrum-web-components/reactive-controllers": "^0.47.2",
         "@spectrum-web-components/shared": "^0.47.2"
     },

packages/coachmark/src/Coachmark.ts

@@ -29,7 +29,6 @@ import type { CoachmarkItem } from './CoachmarkItem.js';
 import '@spectrum-web-components/asset/sp-asset.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/button-group/sp-button-group.js';
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
 
 /**
  * @element sp-coachmark