From 23cef3ad0393055a9285a0292667e657bd813c59 Mon Sep 17 00:00:00 2001 From: anishAdobe <139549657+anishAdobe@users.noreply.github.com> Date: Wed, 2 Aug 2023 21:44:32 +0530 Subject: [PATCH] fix(action-menu): add a slot for Tooltip content (#3488) * ci: update golden images hash --------- Co-authored-by: Anish Ranjan Co-authored-by: Westbrook Johnson --- .circleci/config.yml | 2 +- packages/action-menu/README.md | 16 ++++++ packages/action-menu/src/ActionMenu.ts | 2 + .../stories/action-menu.stories.ts | 54 +++++++++++++++++++ packages/action-menu/stories/index.ts | 14 +++++ 5 files changed, 87 insertions(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 94b6b483bb..9bf0497046 100644 --- 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 index df4191f487..de12bfd5aa 100644 --- a/packages/action-menu/README.md +++ b/packages/action-menu/README.md @@ -245,3 +245,19 @@ When `selects` is set to `single`, the `` element will maintain ## Accessibility An `` parent will ensure that the internal `` features a role of `listbox` and contains children with the role `option`. Upon focusing the `` 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 and can be customized by using various parameters (e.g. placement, content, etc) as needed. + +```html + + + Content + + Available shapes + Square + Triangle + Parallelogram + +``` diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index b5aa70749b..c1e6643921 100644 --- 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') { + `, ]; } diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index bda0badeb9..9e5f24e21e 100644 --- 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 index 9ec348cb5a..d58192804d 100644 --- 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` Save Selection Make Work Path + ${tooltipDescription + ? html` + + ${tooltipDescription} + + ` + : html``} `; };