feat: sets action-menu quiet to false by default, fixes #3040

adobe · Mar 17, 2023 · 001e71c · 001e71c
1 parent f6a7ece
commit 001e71c
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 17 deletions.
diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -62,7 +62,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
     protected override render(): TemplateResult {
         return html`
             <sp-action-button
-                quiet
+                ?quiet=${this.quiet}
                 ?selected=${this.open}
                 aria-haspopup="true"
                 aria-controls="popover"
@@ -85,7 +85,6 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
         if (changedProperties.has('invalid')) {
             this.invalid = false;
         }
-        this.quiet = true;
         super.update(changedProperties);
     }
 }
diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
@@ -57,11 +57,24 @@ export default {
             },
             control: 'text',
         },
+        quiet: {
+            name: 'quiet',
+            type: { name: 'boolean', required: false },
+            description: 'Quiet rendering',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
     },
     args: {
         visibleLabel: 'More Actions',
         disabled: false,
         open: false,
+        quiet: false,
     },
 };
 
@@ -72,13 +85,19 @@ interface StoryArgs {
     customIcon?: string | TemplateResult;
     selects?: 'single';
     selected?: boolean;
+    quiet?: boolean;
 }
 
 const Template = (args: StoryArgs = {}): TemplateResult =>
     ActionMenuMarkup(args);
 
 export const Default = (args: StoryArgs = {}): TemplateResult => Template(args);
 
+export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);
+quiet.args = {
+    quiet: true,
+};
+
 export const selects = (args: StoryArgs = {}): TemplateResult =>
     Template({
         ...args,

diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
@@ -21,6 +21,7 @@ export const ActionMenuMarkup = ({
     changeHandler = (() => undefined) as (event: Event) => void,
     disabled = false,
     open = false,
+    quiet = false,
     visibleLabel = '',
     customIcon = '' as string | TemplateResult,
     size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
@@ -32,6 +33,7 @@ export const ActionMenuMarkup = ({
             label=${ariaLabel}
             ?disabled=${disabled}
             ?open=${open}
+            ?quiet=${quiet}
             size=${size}
             @change="${changeHandler}"
             .selects=${selects ? selects : undefined}

diff --git a/packages/card/README.md b/packages/card/README.md
@@ -107,7 +107,7 @@ 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">
+    <sp-action-menu 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 +181,7 @@ 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">
+        <sp-action-menu 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>
@@ -264,7 +264,7 @@ 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">
+        <sp-action-menu 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
@@ -95,7 +95,7 @@ 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">
+            <sp-action-menu 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>
@@ -122,7 +122,7 @@ 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">
+            <sp-action-menu 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>
@@ -233,7 +233,7 @@ 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">
+                <sp-action-menu 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>
@@ -326,7 +326,7 @@ 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">
+                <sp-action-menu 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>
@@ -369,7 +369,7 @@ 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">
+            <sp-action-menu 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/test/card.test.ts b/packages/card/test/card.test.ts
@@ -108,6 +108,7 @@ describe('card', () => {
                         slot="actions"
                         placement="bottom-end"
                         label="More Actions"
+                        quiet
                     >
                         <sp-menu>
                             <sp-menu-item>Deselect</sp-menu-item>

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -360,9 +360,6 @@ export class PickerBase extends SizedMixin(Focusable) {
             popover.style.setProperty('--swc-menu-width', `100%`);
             return;
         }
-        if (this.quiet) return;
-        // only use `this.offsetWidth` when Standard variant
-        popover.style.setProperty('min-width', `${this.offsetWidth}px`);
     }
 
     private async closeMenu(): Promise<void> {
@@ -637,6 +634,14 @@ export class Picker extends PickerBase {
         return [pickerStyles, chevronStyles];
     }
 
+    protected override sizePopover(popover: HTMLElement): void {
+        super.sizePopover(popover);
+
+        if (this.quiet) return;
+        // only use `this.offsetWidth` when Standard variant
+        popover.style.setProperty('min-width', `${this.offsetWidth}px`);
+    }
+
     protected override onKeydown = (event: KeyboardEvent): void => {
         const { code } = event;
         this.focused = true;

diff --git a/packages/top-nav/README.md b/packages/top-nav/README.md
@@ -40,6 +40,7 @@ import { TopNav, TopNavItem } from '@spectrum-web-components/top-nav';
         label="Account"
         placement="bottom-end"
         style="margin-inline-start: auto;"
+        quiet
     >
         <sp-menu-item>Account Settings</sp-menu-item>
         <sp-menu-item>My Profile</sp-menu-item>

diff --git a/packages/top-nav/stories/top-nav.stories.ts b/packages/top-nav/stories/top-nav.stories.ts
@@ -45,7 +45,11 @@ export const Default = (): TemplateResult => {
             <sp-top-nav-item href="#page-4">
                 Page with Really Long Name
             </sp-top-nav-item>
-            <sp-action-menu label="Account" style="margin-inline-start: auto;">
+            <sp-action-menu
+                label="Account"
+                style="margin-inline-start: auto;"
+                quiet
+            >
                 <sp-icon-settings slot="icon"></sp-icon-settings>
                 <sp-menu-item>Account Settings</sp-menu-item>
                 <sp-menu-item>My Profile</sp-menu-item>
@@ -77,7 +81,11 @@ export const Selected = (): TemplateResult => {
             <sp-top-nav-item href="#page-4">
                 Page with Really Long Name
             </sp-top-nav-item>
-            <sp-action-menu label="Account" style="margin-inline-start: auto;">
+            <sp-action-menu
+                label="Account"
+                style="margin-inline-start: auto;"
+                quiet
+            >
                 <sp-icon-settings slot="icon"></sp-icon-settings>
                 <sp-menu-item>Account Settings</sp-menu-item>
                 <sp-menu-item>My Profile</sp-menu-item>
@@ -108,7 +116,7 @@ class WrappedTopNav extends HTMLElement {
                 <sp-top-nav-item href="#page-4" autofocus>
                     Page with Really Long Name
                 </sp-top-nav-item>
-                <sp-action-menu label="Account" style="margin-inline-start: auto;">
+                <sp-action-menu label="Account" style="margin-inline-start: auto;" quiet>
                     <sp-icon-settings slot="icon"></sp-icon-settings>
                     <sp-menu-item>Account Settings</sp-menu-item>
                     <sp-menu-item>My Profile</sp-menu-item>
@@ -155,7 +163,7 @@ export const Modes = (): TemplateResult => {
                 <sp-action-button label="Link">
                     <sp-icon-link slot="icon"></sp-icon-link>
                 </sp-action-button>
-                <sp-action-menu label="User">
+                <sp-action-menu label="User" quiet>
                     <sp-avatar
                         slot="icon"
                         label="User avatar"