Ship Overlay v2

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 68bb9c038f91e9577b14802dcf923cd1dace34e7
+        default: bd0e3b059017f75117482c310263df3a3ae5404c
     wireit_cache_name:
         type: string
         default: wireit

cem-react-wrapper.config.js

@@ -32,7 +32,7 @@ export default {
     plugins: [
         defineElementPlugin(),
         reactWrapperPlugin({
-            exclude: ['StoryDecorator'],
+            exclude: ['StoryDecorator', 'TooltipOpenable'],
             outDir: '../../react',
             prettierConfig: yaml.load(
                 readFileSync(resolve('../../.prettierrc.yaml'))

package.json

@@ -31,7 +31,7 @@
         "docs:review": "alex packages/**/*.md",
         "docs:start": "yarn workspace documentation serve --watch",
         "find": "test -f custom-elements.json",
-        "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js",
+        "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js",
         "get-ready": "yarn build:clear-cache && yarn build",
         "icons": "wireit",
         "icons:ui": "wireit",
@@ -55,7 +55,7 @@
         "prepare": "husky install",
         "prestorybook": "wireit",
         "prestorybook:build": "cem analyze --outdir .storybook/",
-        "pretest:bench": "test -f test/benchmark/cli.js ||:",
+        "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:",
         "pretest:visual": "yarn build && yarn build",
         "process-icons": "wireit",
         "process-spectrum": "wireit",
@@ -68,19 +68,20 @@
         "storybook:quick": "run-p build:watch storybook:run",
         "storybook:run": "web-dev-server --config wds-storybook.config.js",
         "test": "yarn test:focus unit",
-        "test:bench": "node test/benchmark/cli.js",
+        "test:bench": "yarn build:tests && node test/benchmark/cli.js",
         "test:changed": "node ./tasks/test-changes.js",
         "test:ci": "yarn test:start",
         "test:create": "wireit",
         "test:errors": "yarn test | grep -A 32 ❌",
-        "test:focus": "yarn build && yarn test:ci --coverage --group",
+        "test:focus": "yarn build && yarn test:ci --group",
         "test:start": "web-test-runner",
         "test:visual": "yarn test:visual:ci",
         "test:visual:ci": "yarn test:start --group",
         "test:visual:clean": "yarn test:visual:clean:baseline && yarn test:visual:clean:current",
         "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline",
         "test:visual:clean:current": "rimraf test/visual/screenshots-current",
         "test:watch": "yarn test:watch:focus unit",
+        "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --",
         "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
         "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup",
         "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum",
@@ -152,7 +153,7 @@
         "gh-pages": "^4.0.0",
         "glob": "^10.3.0",
         "gunzip-maybe": "^1.4.2",
-        "husky": "^8.0.1",
+        "husky": "^8.0.3",
         "latest-version": "^7.0.0",
         "lerna": "^6.0.1",
         "lightningcss": "^1.19.0",

packages/action-button/src/ActionButton.ts

@@ -116,7 +116,6 @@ export class ActionButton extends SizedMixin(ButtonBase, {
     constructor() {
         super();
         this.addEventListener('click', this.onClick);
-        this.addEventListener('pointerdown', this.onPointerdown);
     }
 
     private onClick = (): void => {
@@ -134,10 +133,13 @@ export class ActionButton extends SizedMixin(ButtonBase, {
         }
     };
 
-    private onPointerdown(event: PointerEvent): void {
+    private handlePointerdownHoldAffordance(event: PointerEvent): void {
         if (event.button !== 0) return;
-        this.addEventListener('pointerup', this.onPointerup);
-        this.addEventListener('pointercancel', this.onPointerup);
+        this.addEventListener('pointerup', this.handlePointerupHoldAffordance);
+        this.addEventListener(
+            'pointercancel',
+            this.handlePointerupHoldAffordance
+        );
         LONGPRESS_TIMEOUT = setTimeout(() => {
             this.dispatchEvent(
                 new CustomEvent<LongpressEvent>('longpress', {
@@ -151,10 +153,16 @@ export class ActionButton extends SizedMixin(ButtonBase, {
         }, LONGPRESS_DURATION);
     }
 
-    private onPointerup(): void {
+    private handlePointerupHoldAffordance(): void {
         clearTimeout(LONGPRESS_TIMEOUT);
-        this.removeEventListener('pointerup', this.onPointerup);
-        this.removeEventListener('pointercancel', this.onPointerup);
+        this.removeEventListener(
+            'pointerup',
+            this.handlePointerupHoldAffordance
+        );
+        this.removeEventListener(
+            'pointercancel',
+            this.handlePointerupHoldAffordance
+        );
     }
 
     /**
@@ -258,6 +266,20 @@ export class ActionButton extends SizedMixin(ButtonBase, {
                 );
             }
         }
+        if (changes.has('holdAffordance')) {
+            if (this.holdAffordance) {
+                this.addEventListener(
+                    'pointerdown',
+                    this.handlePointerdownHoldAffordance
+                );
+            } else {
+                this.removeEventListener(
+                    'pointerdown',
+                    this.handlePointerdownHoldAffordance
+                );
+                this.handlePointerupHoldAffordance();
+            }
+        }
     }
 }
 

packages/action-group/src/ActionGroup.ts

@@ -194,7 +194,6 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
                 target.tabIndex = 0;
                 target.setAttribute('aria-checked', 'true');
                 this.setSelected([target.value], true);
-                target.focus();
                 break;
             }
             case 'multiple': {

packages/action-group/test/action-group.test.ts

@@ -1099,6 +1099,7 @@ describe('ActionGroup', () => {
         expect(el.selected.length).to.equal(1);
         expect(el.selected[0]).to.equal('Second');
 
+        thirdElement.focus();
         thirdElement.click();
 
         await elementUpdated(el);
@@ -1204,6 +1205,7 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
         expect(el.selected.length).to.equal(0);
 
+        thirdElement.focus();
         thirdElement.click();
 
         await elementUpdated(el);

packages/action-menu/src/ActionMenu.ts

@@ -73,13 +73,17 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
                 id="button"
                 class="button"
                 size=${this.size}
-                @blur=${this.onButtonBlur}
-                @click=${this.onButtonClick}
-                @focus=${this.onButtonFocus}
+                @blur=${this.handleButtonBlur}
+                @click=${this.handleButtonClick}
+                @keydown=${{
+                    handleEvent: this.handleEnterKeydown,
+                    capture: true,
+                }}
                 ?disabled=${this.disabled}
             >
                 ${this.buttonContent}
             </sp-action-button>
+            ${this.renderMenu}
         `;
     }
 

packages/action-menu/src/action-menu.css

@@ -18,6 +18,10 @@ governing permissions and limitations under the License.
     min-width: 0;
 }
 
+:host > sp-menu {
+    display: none;
+}
+
 ::slotted([slot='icon']) {
     flex-shrink: 0;
 }
@@ -33,7 +37,6 @@ governing permissions and limitations under the License.
 #popover {
     width: auto;
     max-width: none;
-    display: none;
 }
 
 :host([dir='ltr']) ::slotted([slot='icon']),

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

@@ -11,10 +11,12 @@ 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';
 import '@spectrum-web-components/menu/sp-menu.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 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 '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
@@ -233,7 +235,11 @@ export const controlled = (): TemplateResult => {
             </sp-menu-item>
             <sp-menu-item>
                 Show
-                <sp-menu slot="submenu">
+                <sp-menu
+                    slot="submenu"
+                    selects="multiple"
+                    @change=${(event: Event) => event.preventDefault()}
+                >
                     <sp-menu-item
                         value="grid"
                         ?selected=${state.grid}