Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(menu): allow menu-item to support arbitrary element as the submenu root #4720

Merged
merged 8 commits into from
Sep 11, 2024

Conversation

TarunAdobe
Copy link
Contributor

Description

Allow using non-menu-item components as submenu.

Related issue(s)

Motivation and context

Using arbitrary components as submenu items and clicking them produces the TypeError:
Cannot read properties of undefined (reading 'selectionRoot') in Menu.handlePointerBasedSelection

How has this been tested?

  • Added a test and it passed.

  • Did it pass in Desktop?

  • Did it pass in Mobile?

  • Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@TarunAdobe TarunAdobe requested a review from a team as a code owner September 4, 2024 07:12
Copy link

github-actions bot commented Sep 4, 2024

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Copy link

github-actions bot commented Sep 4, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.99 1
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 226.331 kB 214.348 kB 🏆 214.469 kB
Scripts 55.85 kB 49.789 kB 🏆 49.922 kB
Stylesheet 34.379 kB 30.122 kB 🏆 30.132 kB
Document 6.206 kB 5.445 kB 🏆 5.455 kB
Font 126.941 kB 126.641 kB 126.612 kB 🏆

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

@TarunAdobe TarunAdobe changed the title fix(menu): allow menu-item to support custom elements as root of submenu fix(menu-item): allow menu-item to support arbitrary element the as root of submenu Sep 4, 2024
@coveralls
Copy link
Collaborator

coveralls commented Sep 4, 2024

Pull Request Test Coverage Report for Build 10733312755

Details

  • 2 of 2 (100.0%) changed or added relevant lines in 1 file are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.002%) to 98.205%

Totals Coverage Status
Change from base Build 10718063455: 0.002%
Covered Lines: 32515
Relevant Lines: 32946

💛 - Coveralls

@TarunAdobe TarunAdobe changed the title fix(menu-item): allow menu-item to support arbitrary element the as root of submenu fix(menu): allow menu-item to support arbitrary element submenu root Sep 4, 2024
@TarunAdobe TarunAdobe changed the title fix(menu): allow menu-item to support arbitrary element submenu root fix(menu): allow menu-item to support arbitrary element as the submenu root Sep 4, 2024
@Rajdeepc
Copy link
Contributor

Rajdeepc commented Sep 4, 2024

Great Start! Can you also create a storybook link for this usage?

Copy link

github-actions bot commented Sep 4, 2024

Tachometer results

Chrome

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 669 kB 136.72ms - 139.70ms - faster ✔
5% - 8%
6.91ms - 11.43ms
branch 646 kB 145.69ms - 149.08ms slower ❌
5% - 8%
6.91ms - 11.43ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 623 kB 64.90ms - 66.32ms - faster ✔
6% - 9%
4.17ms - 6.18ms
branch 599 kB 70.07ms - 71.50ms slower ❌
6% - 9%
4.17ms - 6.18ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 622 kB 63.41ms - 64.63ms - faster ✔
6% - 9%
4.25ms - 5.99ms
branch 598 kB 68.51ms - 69.77ms slower ❌
7% - 9%
4.25ms - 5.99ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 813 kB 1879.25ms - 1882.25ms - unsure 🔍
-0% - +0%
-2.35ms - +1.83ms
branch 789 kB 1879.55ms - 1882.46ms unsure 🔍
-0% - +0%
-1.83ms - +2.35ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 812 kB 1874.57ms - 1876.77ms - unsure 🔍
-0% - -0%
-4.79ms - -1.17ms
branch 787 kB 1877.21ms - 1880.09ms unsure 🔍
+0% - +0%
+1.17ms - +4.79ms
-

breadcrumbs permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 686 kB 478.83ms - 483.89ms - faster ✔
1% - 3%
4.75ms - 12.87ms
branch 662 kB 487.00ms - 493.34ms slower ❌
1% - 3%
4.75ms - 12.87ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 730 kB 36.91ms - 37.38ms - faster ✔
1% - 3%
0.38ms - 1.11ms
branch 705 kB 37.62ms - 38.17ms slower ❌
1% - 3%
0.38ms - 1.11ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 730 kB 380.11ms - 385.65ms - faster ✔
2% - 4%
8.98ms - 16.28ms
branch 706 kB 393.14ms - 397.88ms slower ❌
2% - 4%
8.98ms - 16.28ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 494 kB 205.86ms - 210.21ms - faster ✔
1% - 4%
1.32ms - 8.56ms
branch 471 kB 210.08ms - 215.87ms slower ❌
1% - 4%
1.32ms - 8.56ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 536 kB 508.27ms - 515.16ms - faster ✔
2% - 4%
9.21ms - 20.38ms
branch 512 kB 522.11ms - 530.91ms slower ❌
2% - 4%
9.21ms - 20.38ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 747 kB 1863.37ms - 1868.08ms - unsure 🔍
-0% - +0%
-5.16ms - +1.18ms
branch 723 kB 1865.60ms - 1869.83ms unsure 🔍
-0% - +0%
-1.18ms - +5.16ms
-
Firefox

action-menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 669 kB 280.51ms - 287.73ms - faster ✔
10% - 12%
30.78ms - 39.62ms
branch 646 kB 316.78ms - 321.86ms slower ❌
11% - 14%
30.78ms - 39.62ms
-

test-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 623 kB 135.35ms - 138.33ms - unsure 🔍
-1% - +1%
-1.89ms - +1.89ms
branch 599 kB 135.68ms - 138.00ms unsure 🔍
-1% - +1%
-1.89ms - +1.89ms
-

test-lazy permalink

Version Bytes Avg Time vs remote vs branch
npm latest 622 kB 136.67ms - 143.77ms - unsure 🔍
-1% - +5%
-0.94ms - +7.50ms
branch 598 kB 134.65ms - 139.23ms unsure 🔍
-5% - +1%
-7.50ms - +0.94ms
-

test-open-close-directive permalink

Version Bytes Avg Time vs remote vs branch
npm latest 813 kB 1904.52ms - 1914.52ms - slower ❌
0% - 1%
0.70ms - 11.34ms
branch 789 kB 1901.68ms - 1905.32ms faster ✔
0% - 1%
0.70ms - 11.34ms
-

test-open-close permalink

Version Bytes Avg Time vs remote vs branch
npm latest 812 kB 1902.45ms - 1909.03ms - unsure 🔍
-0% - +0%
-3.54ms - +6.06ms
branch 787 kB 1900.99ms - 1907.97ms unsure 🔍
-0% - +0%
-6.06ms - +3.54ms
-

breadcrumbs permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 686 kB 782.26ms - 797.62ms - faster ✔
1% - 4%
7.72ms - 36.04ms
branch 662 kB 799.93ms - 823.71ms slower ❌
1% - 5%
7.72ms - 36.04ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 730 kB 61.61ms - 66.51ms - unsure 🔍
-1% - +7%
-0.84ms - +4.28ms
branch 705 kB 61.62ms - 63.06ms unsure 🔍
-7% - +1%
-4.28ms - +0.84ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 730 kB 729.07ms - 740.89ms - slower ❌
2% - 5%
12.09ms - 33.59ms
branch 706 kB 703.15ms - 721.13ms faster ✔
2% - 5%
12.09ms - 33.59ms
-

menu permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 494 kB 430.72ms - 441.00ms - faster ✔
0% - 4%
0.94ms - 16.26ms
branch 471 kB 438.78ms - 450.14ms slower ❌
0% - 4%
0.94ms - 16.26ms
-

picker permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 536 kB 1003.75ms - 1030.33ms - faster ✔
4% - 6%
37.65ms - 66.43ms
branch 512 kB 1063.57ms - 1074.59ms slower ❌
4% - 7%
37.65ms - 66.43ms
-

split-button permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 747 kB 1878.67ms - 1883.25ms - unsure 🔍
+0% - +0%
+0.52ms - +6.84ms
branch 723 kB 1875.11ms - 1879.45ms unsure 🔍
-0% - -0%
-6.84ms - -0.52ms
-

Rajdeepc
Rajdeepc previously approved these changes Sep 5, 2024
Copy link
Collaborator

@rubencarvalho rubencarvalho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left small comments, but overall I think this PR is great to make our component handle these cases more gracefully 👍

packages/menu/menu-item.md Outdated Show resolved Hide resolved
packages/menu/test/submenu.test.ts Outdated Show resolved Hide resolved
Co-authored-by: Rúben Carvalho <[email protected]>
@Rajdeepc Rajdeepc merged commit 4c6a0dc into main Sep 11, 2024
61 checks passed
@Rajdeepc Rajdeepc deleted the ttomar/swc-329 branch September 11, 2024 06:16
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
nikkimk pushed a commit that referenced this pull request Sep 13, 2024
…u root (#4720)

* fix(menu): allow using non-menu-item element as submenu root

* chore(menu): fixed broken test

* chore(menu): added a custom root submenu example in storybook

* chore(menu): updated docs

---------

Co-authored-by: Rúben Carvalho <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants