14087842060

Committed 26 Mar 2025 03:57PM CUT coverage: 98.002%. Remained the same

Build # 14087842060

Build Type

Pull #5151

github

Committed by

web-flow

Commit Message

Merge 6f34d3a20 into aff3bc808

Pull Request Pull Request #5151: chore: remove local stylelint-header for published version

Run Details

5324 of 5620 branches covered (94.73%)

Branch coverage included in aggregate %.

33713 of 34213 relevant lines covered (98.54%)

644.78 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.84

/packages/action-menu/src/ActionMenu.ts

/*
Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

import {
    CSSResultArray,
    html,
    PropertyValues,
    TemplateResult,
} from '@spectrum-web-components/base';
import { state } from '@spectrum-web-components/base/src/decorators.js';
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
import { property } from '@spectrum-web-components/base/src/decorators.js';
import { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';
import '@spectrum-web-components/action-button/sp-action-button.js';
import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
import actionMenuStyles from './action-menu.css.js';
import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';

/**
 * @element sp-action-menu
 *
 * @slot - menu items to be listed in the Action Menu
 * @slot icon - The icon to use for the Action Menu
 * @slot label - The label to use for the Action Menu
 * @slot label-only - The label to use for the Action Menu (no icon space reserved)
 * @slot tooltip - Tooltip to be applied to the Action Button
 * @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.
 */
export class ActionMenu extends ObserveSlotPresence(
    ObserveSlotText(PickerBase, 'label'),
    '[slot="label-only"]'
) {
    public static override get styles(): CSSResultArray {
        return [actionMenuStyles];
    }

    @property({ type: String })
    public override selects: undefined | 'single' = undefined;

    @property({ reflect: true, attribute: 'static-color' })
    public staticColor?: 'white' | 'black';

    protected override listRole: 'listbox' | 'menu' = 'menu';
    protected override itemRole = 'menuitem';
    private get hasLabel(): boolean {
        return this.slotHasContent;
    }

    @state()
    private get labelOnly(): boolean {
        return this.slotContentIsPresent;
    }

    public override handleSlottableRequest = (
        event: SlottableRequestEvent
    ): void => {
        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));
    };

    protected override get buttonContent(): TemplateResult[] {
        return [
            html`
                ${this.labelOnly
                    ? html``
                    : html`
                          <slot
                              name="icon"
                              slot="icon"
                              ?icon-only=${!this.hasLabel}
                              ?hidden=${this.labelOnly}
                          >
                              <sp-icon-more
                                  class="icon"
                                  size=${this.size}
                              ></sp-icon-more>
                          </slot>
                      `}
                <slot name="label" ?hidden=${!this.hasLabel}></slot>
                <slot name="label-only"></slot>
            `,
        ];
    }

    protected override render(): TemplateResult {
        if (this.tooltipEl) {
            this.tooltipEl.disabled = this.open;
        }
        return html`
            <sp-action-button
                aria-describedby=${DESCRIPTION_ID}
                ?quiet=${this.quiet}
                ?selected=${this.open}
                static-color=${ifDefined(this.staticColor)}
                aria-haspopup="true"
                aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
                aria-expanded=${this.open ? 'true' : 'false'}
                aria-label=${ifDefined(this.label || undefined)}
                id="button"
                class="button"
                size=${this.size}
                @blur=${this.handleButtonBlur}
                @focus=${this.handleButtonFocus}
                @keydown=${{
                    handleEvent: this.handleEnterKeydown,
                    capture: true,
                }}
                ?disabled=${this.disabled}
            >
                ${this.buttonContent}
            </sp-action-button>
            <slot
                name="tooltip"
                @slotchange=${this.handleTooltipSlotchange}
            ></slot>
            ${this.renderMenu} ${this.renderDescriptionSlot}
        `;
    }

    protected override update(changedProperties: PropertyValues<this>): void {
        if (changedProperties.has('invalid')) {
            this.invalid = false;
        }
        super.update(changedProperties);
    }

    protected override hasAccessibleLabel(): boolean {
        return (
            !!this.label ||
            !!this.getAttribute('aria-label') ||
            !!this.getAttribute('aria-labelledby') ||
            !!this.appliedLabel ||
            this.hasLabel ||
            this.labelOnly
        );
    }

    protected override warnNoLabel(): void {
        window.__swc.warn(
            this,
            `<${this.localName}> needs one of the following to be accessible:`,
            'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',
            {
                type: 'accessibility',
                issues: [
                    `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
                    'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
                    'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
                    'which will also be displayed visually as placeholder text.',
                ],
            }
        );
    }
}

1	/*	18✔
2	Copyright 2020 Adobe. All rights reserved.	18✔
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");	18✔
4	you may not use this file except in compliance with the License. You may obtain a copy	18✔
5	of the License at http://www.apache.org/licenses/LICENSE-2.0	18✔
6		18✔
7	Unless required by applicable law or agreed to in writing, software distributed under	18✔
8	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	18✔
9	OF ANY KIND, either express or implied. See the License for the specific language	18✔
10	governing permissions and limitations under the License.	18✔
11	*/	18✔
12		18✔
13	import {	18✔
14	CSSResultArray,	18✔
15	html,	18✔
16	PropertyValues,	18✔
17	TemplateResult,	18✔
18	} from '@spectrum-web-components/base';	18✔
19	import { state } from '@spectrum-web-components/base/src/decorators.js';	18✔
20	import { ifDefined } from '@spectrum-web-components/base/src/directives.js';	18✔
21	import { property } from '@spectrum-web-components/base/src/decorators.js';	18✔
22	import { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';	18✔
23	import '@spectrum-web-components/action-button/sp-action-button.js';	18✔
24	import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';	18✔
25	import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';	18✔
26	import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';	18✔
27	import actionMenuStyles from './action-menu.css.js';	18✔
28	import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';	18✔
29		18✔
30	/**	18✔
31	* @element sp-action-menu	18✔
32	*	18✔
33	* @slot - menu items to be listed in the Action Menu	18✔
34	* @slot icon - The icon to use for the Action Menu	18✔
35	* @slot label - The label to use for the Action Menu	18✔
36	* @slot label-only - The label to use for the Action Menu (no icon space reserved)	18✔
37	* @slot tooltip - Tooltip to be applied to the Action Button	18✔
38	* @attr selects - By default `sp-action-menu` does not manage a selection. If	18✔
39	* you'd like for a selection to be held by the `sp-menu` that it presents in	18✔
40	* its overlay, use `selects="single" to activate this functionality.	18✔
41	*/	18✔
42	export class ActionMenu extends ObserveSlotPresence(	18✔
43	ObserveSlotText(PickerBase, 'label'),	18✔
44	'[slot="label-only"]'	18✔
45	) {	18✔
46	public static override get styles(): CSSResultArray {	327✔
47	return [actionMenuStyles];	327✔
48	}	327✔
49		327✔
50	@property({ type: String })	327✔
51	public override selects: undefined \| 'single' = undefined;	327✔
52		327✔
53	@property({ reflect: true, attribute: 'static-color' })	327✔
54	public staticColor?: 'white' \| 'black';	327✔
55		327✔
56	protected override listRole: 'listbox' \| 'menu' = 'menu';	327✔
57	protected override itemRole = 'menuitem';	327✔
58	private get hasLabel(): boolean {	327✔
59	return this.slotHasContent;	1,206✔
60	}	1,206✔
61		327✔
62	@state()	327✔
63	private get labelOnly(): boolean {	327✔
64	return this.slotContentIsPresent;	1,834✔
65	}	1,834✔
66		327✔
67	public override handleSlottableRequest = (	327✔
68	event: SlottableRequestEvent	83✔
69	): void => {	83✔
70	this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));	83✔
71	};	83✔
72		18✔
73	protected override get buttonContent(): TemplateResult[] {	18✔
74	return [	590✔
75	html`	590✔
76	${this.labelOnly	590!
77	? html``	×
78	: html`	590✔
79	<slot	590✔
80	name="icon"	590✔
81	slot="icon"	590✔
82	?icon-only=${!this.hasLabel}	590✔
83	?hidden=${this.labelOnly}	590✔
84	>	590✔
85	<sp-icon-more	590✔
86	class="icon"	590✔
87	size=${this.size}	590✔
88	></sp-icon-more>	590✔
89	</slot>	590✔
90	`}	590✔
91	<slot name="label" ?hidden=${!this.hasLabel}></slot>	590✔
92	<slot name="label-only"></slot>	590✔
93	`,	590✔
94	];	590✔
95	}	590✔
96		18✔
97	protected override render(): TemplateResult {	18✔
98	if (this.tooltipEl) {	590✔
99	this.tooltipEl.disabled = this.open;	8✔
100	}	8✔
101	return html`	590✔
102	<sp-action-button	590✔
103	aria-describedby=${DESCRIPTION_ID}	590✔
104	?quiet=${this.quiet}	590✔
105	?selected=${this.open}	590✔
106	static-color=${ifDefined(this.staticColor)}	590✔
107	aria-haspopup="true"	590✔
108	aria-controls=${ifDefined(this.open ? 'menu' : undefined)}	590✔
109	aria-expanded=${this.open ? 'true' : 'false'}	590✔
110	aria-label=${ifDefined(this.label \|\| undefined)}	590✔
111	id="button"	590✔
112	class="button"	590✔
113	size=${this.size}	590✔
114	@blur=${this.handleButtonBlur}	590✔
115	@focus=${this.handleButtonFocus}	590✔
116	@keydown=${{	590✔
117	handleEvent: this.handleEnterKeydown,	590✔
118	capture: true,	590✔
119	}}	590✔
120	?disabled=${this.disabled}	590✔
121	>	590✔
122	${this.buttonContent}	590✔
123	</sp-action-button>	590✔
124	<slot	590✔
125	name="tooltip"	590✔
126	@slotchange=${this.handleTooltipSlotchange}	590✔
127	></slot>	590✔
128	${this.renderMenu} ${this.renderDescriptionSlot}	590✔
129	`;	590✔
130	}	590✔
131		18✔
132	protected override update(changedProperties: PropertyValues<this>): void {	18✔
133	if (changedProperties.has('invalid')) {	590✔
134	this.invalid = false;	329✔
135	}	329✔
136	super.update(changedProperties);	590✔
137	}	590✔
138		18✔
139	protected override hasAccessibleLabel(): boolean {	18✔
140	return (	579✔
141	!!this.label \|\|	579✔
142	!!this.getAttribute('aria-label') \|\|	26✔
143	!!this.getAttribute('aria-labelledby') \|\|	26✔
144	!!this.appliedLabel \|\|	26✔
145	this.hasLabel \|\|	26!
146	this.labelOnly	×
147	);	579✔
148	}	579✔
149		18✔
150	protected override warnNoLabel(): void {	18✔
151	window.__swc.warn(	×
152	this,	×
153	`<${this.localName}> needs one of the following to be accessible:`,	×
154	'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',	×
155	{	×
156	type: 'accessibility',	×
157	issues: [	×
158	`an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,	×
159	'value supplied to the "label" attribute, which will be displayed visually as placeholder text',	×
160	'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',	×
161	'which will also be displayed visually as placeholder text.',	×
162	],	×
163	}	×
164	);	×
165	}	×
166	}	18✔

adobe / spectrum-web-components / 14087842060

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous