fix(action-menu): add a slot for Tooltip content (#3488)

* ci: update golden images hash --------- Co-authored-by: Anish Ranjan <[email protected]> Co-authored-by: Westbrook Johnson <[email protected]>
adobe · Aug 2, 2023 · 23cef3a · 23cef3a
1 parent 1ee5a6c
commit 23cef3a
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 1 deletion.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 32141e5454098a538a4ce6921c9367e2f4922f67
+        default: 0ed74a69eed08d6b68c1913c37feb81fe6dca260
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md
@@ -245,3 +245,19 @@ When `selects` is set to `single`, the `<sp-action-menu>` element will maintain
 ## Accessibility
 
 An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
+
+## Adding tootip in action menu
+
+Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.
+
+```html
+<sp-action-menu>
+    <sp-tooltip slot="tooltip" self-managed placement="bottom">
+        Content
+    </sp-tooltip>
+    <span slot="label">Available shapes</span>
+    <sp-menu-item value="shape-1-square">Square</sp-menu-item>
+    <sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
+    <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
+</sp-action-menu>
+```
diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -30,6 +30,7 @@ import actionMenuStyles from './action-menu.css.js';
  * @slot - menu items to be listed in the Action Menu
  * @slot icon - The icon to use for Action Menu
  * @slot label - The label to use on for the Action Menu
+ * @slot tooltip - Tooltip to use on for the Action menu
  * @attr selects - By default `sp-action-menu` does not manage a selection. If
  *   you'd like for a selection to be held by the `sp-menu` that it presents in
  *   its overlay, use `selects="single" to activate this functionality.
@@ -55,6 +56,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
                     <sp-icon-more class="icon"></sp-icon-more>
                 </slot>
                 <slot name="label" ?hidden=${!this.hasLabel}></slot>
+                <slot name="tooltip"></slot>
             `,
         ];
     }

diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
@@ -57,6 +57,47 @@ export default {
             },
             control: 'text',
         },
+        tooltipDescription: {
+            name: 'Tooltip Description',
+            type: { name: 'string', required: false },
+            description: 'Tooltip description',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '' },
+            },
+            control: {
+                type: 'text',
+            },
+        },
+        tooltipPlacement: {
+            name: 'Tooltip Placement',
+            type: { name: 'string', required: false },
+            description: 'Tooltip Placement.',
+            table: {
+                defaultValue: { summary: 'bottom' },
+            },
+            control: {
+                options: [
+                    'auto',
+                    'auto-start',
+                    'auto-end',
+                    'top',
+                    'bottom',
+                    'right',
+                    'left',
+                    'top-start',
+                    'top-end',
+                    'bottom-start',
+                    'bottom-end',
+                    'right-start',
+                    'right-end',
+                    'left-start',
+                    'left-end',
+                    'none',
+                ],
+                type: 'select',
+            },
+        },
         quiet: {
             name: 'quiet',
             type: { name: 'boolean', required: false },
@@ -75,6 +116,8 @@ export default {
         disabled: false,
         open: false,
         quiet: false,
+        tooltipDescription: '',
+        tooltipPlacement: 'bottom',
     },
 };
 
@@ -86,6 +129,8 @@ interface StoryArgs {
     selects?: 'single';
     selected?: boolean;
     quiet?: boolean;
+    tooltipDescription?: string | 'none';
+    tooltipPlacement?: string | 'none';
 }
 
 const Template = (args: StoryArgs = {}): TemplateResult =>
@@ -114,6 +159,15 @@ iconOnly.args = {
     visibleLabel: '',
 };
 
+export const tooltipDescriptionAndPlacement = (
+    args: StoryArgs = {}
+): TemplateResult => Template(args);
+tooltipDescriptionAndPlacement.args = {
+    tooltipDescription: 'Your tooltip string here',
+    visibleLabel: '',
+    tooltipPlacement: 'bottom',
+};
+
 export const customIcon = (args: StoryArgs): TemplateResult => Template(args);
 customIcon.args = {
     customIcon: html`

diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
@@ -15,6 +15,7 @@ import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
 
 export const ActionMenuMarkup = ({
     ariaLabel = 'More Actions',
@@ -27,6 +28,8 @@ export const ActionMenuMarkup = ({
     size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
     selects = '' as 'single',
     selected = false,
+    tooltipDescription = '',
+    tooltipPlacement = 'bottom',
 } = {}): TemplateResult => {
     return html`
         <sp-action-menu
@@ -52,6 +55,17 @@ export const ActionMenuMarkup = ({
             <sp-menu-divider></sp-menu-divider>
             <sp-menu-item>Save Selection</sp-menu-item>
             <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            ${tooltipDescription
+                ? html`
+                      <sp-tooltip
+                          slot="tooltip"
+                          self-managed
+                          placement=${tooltipPlacement}
+                      >
+                          ${tooltipDescription}
+                      </sp-tooltip>
+                  `
+                : html``}
         </sp-action-menu>
     `;
 };