diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index 6eea007fee..f799f93013 100644 --- 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` @@ -79,6 +93,11 @@ const Template = (args: StoryArgs = {}): TemplateResult => 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 index 999a88aec5..9ec348cb5a 100644 --- 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 index 8efa24d60e..63d82d2fb2 100644 --- 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" />
Footer
- + Deselect Select Inverse Feather... @@ -181,7 +181,7 @@ Quiet cards will also accept `actions` via a named slot.
10/15/18
- + Deselect Select Inverse Feather... @@ -264,7 +264,7 @@ Or a `quiet` card: > Demo Image
Footer
- + Deselect Select Inverse Feather... diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts index 23b790ba05..d198f322d1 100644 --- 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 link to Google - + Deselect Select Inverse Feather... @@ -122,7 +122,7 @@ export const actions = (args: StoryArgs): TemplateResult => { > Demo Graphic
Footer
- + Deselect Select Inverse Feather... @@ -233,7 +233,7 @@ export const quietActions = (args: StoryArgs): TemplateResult => { > Demo Graphic
10/15/18
- + Deselect Select Inverse Feather... @@ -326,7 +326,7 @@ export const smallQuiet = (args: StoryArgs): TemplateResult => { > Demo Graphic
Footer
- + Deselect Select Inverse Feather... @@ -369,7 +369,7 @@ export const SlottedHeading = (args: StoryArgs): TemplateResult => { quiet >
Last modified on 6/17/2020, 3:37 PM
- + Deselect Select Inverse Feather... diff --git a/packages/card/test/card.test.ts b/packages/card/test/card.test.ts index ec7f4e4015..2714d0e47d 100644 --- 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 > Deselect diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts index c23bc906d5..1f5603ab2f 100644 --- 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 { @@ -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 index 1ae0eb7829..de0b5f53c9 100644 --- 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 > Account Settings My Profile diff --git a/packages/top-nav/stories/top-nav.stories.ts b/packages/top-nav/stories/top-nav.stories.ts index 99c81597b9..2767815a41 100644 --- 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 => { Page with Really Long Name - + Account Settings My Profile @@ -77,7 +81,11 @@ export const Selected = (): TemplateResult => { Page with Really Long Name - + Account Settings My Profile @@ -108,7 +116,7 @@ class WrappedTopNav extends HTMLElement { Page with Really Long Name - + Account Settings My Profile @@ -155,7 +163,7 @@ export const Modes = (): TemplateResult => { - +