feat(action-menu): added static attribute support

packages/action-menu/src/ActionMenu.ts

@@ -43,6 +43,9 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
     @property({ type: String })
     public override selects: undefined | 'single' = undefined;
 
+    @property({ type: String, reflect: true })
+    public static: 'white' | 'black' | undefined = undefined;
+
     protected override listRole: 'listbox' | 'menu' = 'menu';
     protected override itemRole = 'menuitem';
     private get hasLabel(): boolean {
@@ -66,6 +69,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
             <sp-action-button
                 ?quiet=${this.quiet}
                 ?selected=${this.open}
+                static=${ifDefined(this.static || undefined)}
                 aria-haspopup="true"
                 aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
                 aria-expanded=${this.open ? 'true' : 'false'}

packages/action-menu/stories/action-menu.stories.ts

@@ -18,13 +18,15 @@ import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
 import { ActionMenuMarkup } from './';
+import { makeOverBackground } from '../../button/stories/index.js';
 
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 import type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';
 
 export default {
     component: 'sp-action-menu',
     title: 'Action menu',
+    decorators: [makeOverBackground()],
     argTypes: {
         disabled: {
             name: 'disabled',
@@ -112,6 +114,19 @@ export default {
                 type: 'boolean',
             },
         },
+        staticValue: {
+            name: 'static',
+            type: { name: 'string', required: false },
+            description: 'The visual static variant to apply to the button.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: undefined },
+            },
+            control: {
+                type: 'select',
+                options: ['white', 'black', undefined],
+            },
+        },
     },
     args: {
         visibleLabel: 'More Actions',
@@ -120,6 +135,7 @@ export default {
         quiet: false,
         tooltipDescription: '',
         tooltipPlacement: 'bottom',
+        static: undefined,
     },
 };
 
@@ -131,6 +147,7 @@ interface StoryArgs {
     selects?: 'single';
     selected?: boolean;
     quiet?: boolean;
+    stati?: 'white' | 'black';
     tooltipDescription?: string | 'none';
     tooltipPlacement?: string | 'none';
 }
@@ -140,6 +157,18 @@ const Template = (args: StoryArgs = {}): TemplateResult =>
 
 export const Default = (args: StoryArgs = {}): TemplateResult => Template(args);
 
+export const staticWhite = (args: StoryArgs = {}): TemplateResult =>
+    Template(args);
+staticWhite.args = {
+    staticValue: 'white',
+};
+
+export const staticBlack = (args: StoryArgs = {}): TemplateResult =>
+    Template(args);
+staticBlack.args = {
+    staticValue: 'black',
+};
+
 export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);
 quiet.args = {
     quiet: true,

packages/action-menu/stories/index.ts

@@ -9,6 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
@@ -23,6 +24,7 @@ export const ActionMenuMarkup = ({
     disabled = false,
     open = false,
     quiet = false,
+    staticValue = '',
     visibleLabel = '',
     customIcon = '' as string | TemplateResult,
     size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
@@ -37,6 +39,7 @@ export const ActionMenuMarkup = ({
             ?disabled=${disabled}
             ?open=${open}
             ?quiet=${quiet}
+            static=${staticValue}
             size=${size}
             @change="${changeHandler}"
             .selects=${selects ? selects : undefined}

packages/action-menu/test/index.ts

@@ -248,6 +248,21 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
 
             expect(el.quiet).to.be.true;
         });
+        it('can be `static`', async () => {
+            const el = await actionMenuFixture();
+
+            expect(el.static == undefined).to.be.true;
+
+            el.static = 'black';
+            await elementUpdated(el);
+
+            expect(el.static == 'black').to.be.true;
+
+            el.static = 'white';
+            await elementUpdated(el);
+
+            expect(el.static == 'white').to.be.true;
+        });
         it('stay `valid`', async () => {
             const el = await actionMenuFixture();