chore(action-menu): include action menu label in stories and READMEs (#…

…4127)
adobe · Mar 5, 2024 · fd0b6a4 · fd0b6a4
1 parent e3dea14
commit fd0b6a4
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 16 deletions.
diff --git a/packages/card/README.md b/packages/card/README.md
@@ -107,7 +107,12 @@ Cards can be supplied an `actions` via a names slot.
  alt="Demo Image"
  />
  <div slot="footer">Footer</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -181,7 +186,12 @@ Quiet cards will also accept `actions` via a named slot.
  <sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
  <img alt="" slot="preview" src="https://picsum.photos/200/300" />
  <div slot="description">10/15/18</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -262,7 +272,12 @@ Or a `quiet` card:
  >
  <img src="https://picsum.photos/110" alt="Demo Image" slot="preview" />
  <div slot="footer">Footer</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>

diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts
@@ -85,7 +85,12 @@ export const href = (args: StoryArgs): TemplateResult => {
  Footer with a
  <sp-link href="https://google.com">link to Google</sp-link>
  </div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -112,7 +117,12 @@ export const actions = (args: StoryArgs): TemplateResult => {
  >
  <img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
  <div slot="footer">Footer</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -222,7 +232,12 @@ export const quietActions = (args: StoryArgs): TemplateResult => {
  >
  <img src=${portrait} alt="Demo Graphic" slot="preview" />
  <div slot="description">10/15/18</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -289,7 +304,12 @@ export const smallQuiet = (args: StoryArgs): TemplateResult => {
  >
  <img src=${portrait} alt="Demo Graphic" slot="preview" />
  <div slot="footer">Footer</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>
@@ -331,7 +351,12 @@ export const SlottedHeading = (args: StoryArgs): TemplateResult => {
  quiet
  ></sp-textfield>
  <div slot="subheading">Last modified on 6/17/2020, 3:37 PM</div>
- <sp-action-menu slot="actions" placement="bottom-end" quiet>
+ <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>

diff --git a/packages/coachmark/README.md b/packages/coachmark/README.md
@@ -56,7 +56,12 @@ Coach marks can include an `<sp-action-menu>`, which appears at the top right of
  <div slot="content">
  This is a Coachmark with nothing but text in it. Kind of lonely in here.
  </div>
- <sp-action-menu placement="bottom-end" quiet slot="actions">
+ <sp-action-menu
+ label="More Actions"
+ placement="bottom-end"
+ quiet
+ slot="actions"
+ >
  <sp-menu-item>Skip tour</sp-menu-item>
  <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>
@@ -86,7 +91,7 @@ The primary and secondary CTA buttons within the coachmark popover can be config
  <div slot="content">
  This is a Coachmark with nothing but text in it. Kind of lonely in here.
  </div>
- <sp-action-menu placement="bottom-end" quiet slot="actions">
+ <sp-action-menu label="More Actions" placement="bottom-end" quiet slot="actions">
  <sp-menu-item>Skip tour</sp-menu-item>
  <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>
@@ -137,7 +142,12 @@ Media Types allowed: `Images & Gifs`
 >
  <div slot="title">Coachmark with 16:9 image</div>
  <div slot="content">This is a Coachmark with some description</div>
- <sp-action-menu placement="bottom-end" quiet slot="actions">
+ <sp-action-menu
+ label="More Actions"
+ placement="bottom-end"
+ quiet
+ slot="actions"
+ >
  <sp-menu-item>Skip tour</sp-menu-item>
  <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>
@@ -159,7 +169,12 @@ A custom media can also be added via `<slot name="cover-photo"></slot>`
  <div slot="title">Coachmark with 16:9 image</div>
  <div slot="content">This is a Coachmark with some description</div>
  <img slot="asset" src="https://picsum.photos/id/237/200/300" alt="" />
- <sp-action-menu placement="bottom-end" quiet slot="actions">
+ <sp-action-menu
+ label="More Actions"
+ placement="bottom-end"
+ quiet
+ slot="actions"
+ >
  <sp-menu-item>Skip tour</sp-menu-item>
  <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>
@@ -182,7 +197,7 @@ The `shortcutKey` is the primary key used to trigger an interaction and are typi
  secondary-cta="Previous"
  id="coachmark-keys"
  >
- <sp-action-menu placement="bottom-end" quiet slot="actions">
+ <sp-action-menu label="More Actions" placement="bottom-end" quiet slot="actions">
  <sp-menu-item>Skip tour</sp-menu-item>
  <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>

diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
@@ -159,7 +159,11 @@ export const submenu = (): TemplateResult => {
  valueEls.second.textContent = event.target.selected[0] || '';
  };
  return html`
- <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>
+ <sp-action-menu
+ label="More Actions"
+ @change=${handleRootChange}
+ @sp-opened=${clearValues}
+ >
  <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
  <sp-menu-group
  @change=${() => console.log('group change')}

diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
@@ -346,7 +346,7 @@ export const actionGroup = ({ delayed }: Properties): TemplateResult => {
  <sp-action-button id="trigger-3" hold-affordance>
  <sp-icon-rect-select slot="icon"></sp-icon-rect-select>
  </sp-action-button>
- <sp-action-menu placement="left">
+ <sp-action-menu label="More Actions" placement="left">
  <sp-menu-group id="cms">
  <span slot="header">cms</span>
  <sp-menu-item value="updateAllSiteContent">
@@ -557,7 +557,7 @@ export const actionGroupWithFilters = ({
  Hover
  </sp-tooltip>
  </sp-action-button>
- <sp-action-menu>
+ <sp-action-menu label="More Actions">
  <sp-menu-group id="cms">
  <span slot="header">cms</span>
  <sp-menu-item value="updateAllSiteContent">