Complete Menu selects implementation #1661

Westbrook · 2021-07-28T12:15:42Z

Description

Allow <sp-menu> elements to manage their own selection via selects="single|multiple|inherit". By default, an <sp-menu> element will take no selection, as it has previously. A selects value of single or multiple will make this element a selection root and manage the selection of <sp-menu-item> children and descendants of [selects="inherit"] children. When a Menu element has selects="inherit", it's <sp-menu-item> descendants will participate in the selection of the nearest ancestor with selects="single|multiple". Each Menu root that manages a selection will dispatch change events outlining updates to its value. In this way, multiple selection roots inside of a non-selecting <sp-menu> parent can manage these changes via event delegation, as seen here.

Single - Demo

spectrum-web-components/packages/menu/stories/menu.stories.ts

Lines 56 to 64 in a1a2ab3

    
                   <sp-menu selects="single"> 
        
                       <sp-menu-item selected>Deselect</sp-menu-item> 
        
                       <sp-menu-item>Select Inverse</sp-menu-item> 
        
                       <sp-menu-item>Feather...</sp-menu-item> 
        
                       <sp-menu-item>Select and Mask...</sp-menu-item> 
        
                       <sp-menu-divider></sp-menu-divider> 
        
                       <sp-menu-item>Save Selection</sp-menu-item> 
        
                       <sp-menu-item disabled>Make Work Path</sp-menu-item> 
        
                   </sp-menu>

Multiple - Demo

spectrum-web-components/packages/menu/stories/menu.stories.ts

Lines 82 to 90 in a1a2ab3

    
                   <sp-menu selects="multiple"> 
        
                       <sp-menu-item>Deselect</sp-menu-item> 
        
                       <sp-menu-item>Select Inverse</sp-menu-item> 
        
                       <sp-menu-item selected>Feather...</sp-menu-item> 
        
                       <sp-menu-item>Select and Mask...</sp-menu-item> 
        
                       <sp-menu-divider></sp-menu-divider> 
        
                       <sp-menu-item selected>Save Selection</sp-menu-item> 
        
                       <sp-menu-item disabled>Make Work Path</sp-menu-item> 
        
                   </sp-menu>

Inherit - Demo

spectrum-web-components/packages/menu/stories/menu-group.stories.ts

Lines 130 to 149 in a1a2ab3

    
                       <sp-menu label="Groceries" selects="multiple"> 
        
                           <sp-menu-group label="Juice" selects="inherit"> 
        
                               <sp-menu-item selected>Orange</sp-menu-item> 
        
                               <sp-menu-item selected>Apple</sp-menu-item> 
        
                               <sp-menu-item>Grape</sp-menu-item> 
        
                           </sp-menu-group> 
        
                           <sp-menu-divider></sp-menu-divider> 
        
                           <sp-menu-group label="Vegetables" selects="inherit"> 
        
                               <sp-menu-item>Carrots</sp-menu-item> 
        
                               <sp-menu-item selected>Summer Squash</sp-menu-item> 
        
                               <sp-menu-item>Zuccini</sp-menu-item> 
        
                           </sp-menu-group> 
        
                           <sp-menu-divider></sp-menu-divider> 
        
                           <sp-menu-group label="Dry Goods" selects="inherit"> 
        
                               <sp-menu-item>Ceral</sp-menu-item> 
        
                               <sp-menu-item selected>Flour</sp-menu-item> 
        
                               <sp-menu-item>Salt</sp-menu-item> 
        
                               <sp-menu-item>Sugar</sp-menu-item> 
        
                           </sp-menu-group> 
        
                       </sp-menu>

Complex - Demo

spectrum-web-components/packages/menu/stories/menu-group.stories.ts

Lines 85 to 112 in a1a2ab3

    
                       <sp-menu label="Style/Color" @change=${update}> 
        
                           <sp-menu-group label="Font Style" selects="multiple" id="font"> 
        
                               <sp-menu-item value="bold" selected>Bold</sp-menu-item> 
        
                               <sp-menu-item value="italic" selected>Italic</sp-menu-item> 
        
                           </sp-menu-group> 
        
                           <sp-menu-divider></sp-menu-divider> 
        
                           <sp-menu-group label="Text Color" selects="single" id="color"> 
        
                               <sp-menu-item value="black">Black</sp-menu-item> 
        
                               <sp-menu-item value="blue" selected>Blue</sp-menu-item> 
        
                               <sp-menu-item value="red">Red</sp-menu-item> 
        
                               <sp-menu-item value="green">Green</sp-menu-item> 
        
                           </sp-menu-group> 
        
                           <sp-menu-divider></sp-menu-divider> 
        
                           <sp-menu-group 
        
                               label="Text Decoration" 
        
                               selects="single" 
        
                               id="decoration" 
        
                           > 
        
                               <sp-menu-item value="none">None</sp-menu-item> 
        
                               <sp-menu-item value="overline" selected> 
        
                                   Overline 
        
                               </sp-menu-item> 
        
                               <sp-menu-item value="line-through"> 
        
                                   Line-through 
        
                               </sp-menu-item> 
        
                               <sp-menu-item value="underline">Underline</sp-menu-item> 
        
                           </sp-menu-group> 
        
                       </sp-menu>

<sp-menu> now manages selection inside of <sp-picker> elements
surfaces selects attribute on <sp-action-menu> so that it can choose whether to take a selection of not. THIS IS A BREAKING CHANGE!
<sp-picker> will validate selects to single when set for all derivative elements, preventing the application of multiple. This should be added in follow up work.
<sp-menu-group> is now an extension of <sp-menu> simplifying the code there
corrects header correlation in <sp-menu-group> to ensure availability in the accessibility tree.
<sp-split-button> no longer takes a selection in type="more", correcting the visual delivery there
flips Alex's initial implementation where each Menu had a data representation of all of it's Menu Items to a data model of each Menu have access to it's Menu Items so that there was only a single representation of their state allowing for the event cycle there not to require new Event()s in each Menu Item
the above leverages events extended from Event rather than CustomEvents
Mentioning here (as well as below) that I need to add some documentation to various READMEs, but with so much functionality here, I wanted to get an official PR open for reviewers while I did so.

Related Issue

fixes #350
fixes #715
fixes #1189
fixes #1505

Motivation and Context

Menus need the ability to do much more than look pretty, and as the basis of a number of other UIs in the ecosystem they can reduce code duplication my having a central selection management implementation.

How Has This Been Tested?

lots of unit tests
lots of VRTs
lots of manual

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

github-actions · 2021-07-28T12:18:25Z

Branch Preview URLs

When a visual regression test fails (or has previously failed while working on this branch), its results will be avaialable at the associated URL below:

github-actions · 2021-07-28T12:33:28Z

Tachometer results for changed packages

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	312 kB	20.81ms - 23.45ms	-	unsure 🔍 -3% - +13% -0.60ms - +2.72ms
branch	310 kB	20.06ms - 22.07ms	unsure 🔍 -12% - +2% -2.72ms - +0.60ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	773 kB	411.49ms - 421.10ms	-	unsure 🔍 -0% - +3% -0.53ms - +13.03ms
branch	784 kB	405.26ms - 414.83ms	unsure 🔍 -3% - +0% -13.03ms - +0.53ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	515 kB	305.30ms - 314.36ms	-	faster ✔ 14% - 18% 52.69ms - 68.73ms
branch	526 kB	363.92ms - 377.16ms	slower ❌ 17% - 22% 52.69ms - 68.73ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	765 kB	745.68ms - 769.43ms	-	slower ❌ 0% - 5% 0.54ms - 34.84ms
branch	775 kB	727.49ms - 752.23ms	faster ✔ 0% - 5% 0.54ms - 34.84ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	315 kB	36.28ms - 39.12ms	-	unsure 🔍 -2% - +7% -0.88ms - +2.66ms
branch	313 kB	35.76ms - 37.87ms	unsure 🔍 -7% - +2% -2.66ms - +0.88ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	784 kB	2253.61ms - 2277.93ms	-	faster ✔ 6% - 8% 142.71ms - 187.37ms
branch	795 kB	2412.09ms - 2449.53ms	slower ❌ 6% - 8% 142.71ms - 187.37ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
remote	318 kB	30.61ms - 31.77ms	-	unsure 🔍 -2% - +3% -0.52ms - +0.90ms
branch	316 kB	30.60ms - 31.41ms	unsure 🔍 -3% - +2% -0.90ms - +0.52ms	-

najikahalsema

This is the most beautiful PR I've ever seen. Awesome job, and thanks for your hard work!

stanvladut

All the changes look great 💯

adixon-adobe

I've got a bunch of little comments, but overall this looks really awesome. Love seeing those added selects tests, and it's nice to see the simplification you made to item management.

These changes are deviously complex and inter-related so nice freaking job on this!

packages/action-menu/src/ActionMenu.ts

packages/menu/src/Menu.ts

packages/menu/src/MenuItem.ts

packages/menu/src/Menu.ts

packages/menu/src/MenuItem.ts

packages/picker/src/Picker.ts

adixon-adobe · 2021-07-29T20:44:22Z

Updates look great!

spdev3000 · 2021-07-29T20:53:04Z

Awesome PR! Thanks for the hard work here!

Westbrook added Component: Action Menu Component: Picker Component: Menu Documentation Component: Split button labels Jul 28, 2021

Westbrook requested review from adixon-adobe, najikahalsema, simshanith, spdev3000 and stanvladut July 28, 2021 12:15

najikahalsema approved these changes Jul 28, 2021

View reviewed changes

Westbrook force-pushed the menu-selects branch from a1a2ab3 to a0fea27 Compare July 28, 2021 18:50

Westbrook mentioned this pull request Jul 28, 2021

Give Keyboard Focus to the VRT Browser When Testing #1662

Merged

8 tasks

Westbrook force-pushed the next branch from de4b83f to 2a3ac86 Compare July 28, 2021 20:25

Westbrook force-pushed the menu-selects branch 2 times, most recently from 4140660 to b46119c Compare July 28, 2021 20:27

stanvladut approved these changes Jul 29, 2021

View reviewed changes

adixon-adobe requested changes Jul 29, 2021

View reviewed changes

This was referenced Jul 29, 2021

Support 'selects="multiple"' #1665

Closed

Add Spectrum Combobox Pattern #478

Closed

refactor: complete selection functionality

b42bc84

Westbrook force-pushed the menu-selects branch from 318d50b to b42bc84 Compare July 29, 2021 19:44

ci: update golden image cache

63bf1a7

adixon-adobe approved these changes Jul 29, 2021

View reviewed changes

Westbrook merged commit 8bd318a into next Jul 29, 2021

Westbrook deleted the menu-selects branch July 29, 2021 20:45

Westbrook restored the menu-selects branch July 29, 2021 20:52

Westbrook mentioned this pull request Jul 29, 2021

Menu Selects landing branch to Main #1668

Merged

Westbrook deleted the menu-selects branch July 31, 2021 19:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Complete Menu selects implementation #1661

Complete Menu selects implementation #1661

Uh oh!

Westbrook commented Jul 28, 2021 •

edited

Loading

Uh oh!

github-actions bot commented Jul 28, 2021

Uh oh!

github-actions bot commented Jul 28, 2021 •

edited

Loading

Uh oh!

najikahalsema left a comment

Uh oh!

stanvladut left a comment

Uh oh!

adixon-adobe left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adixon-adobe commented Jul 29, 2021

Uh oh!

spdev3000 commented Jul 29, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	<sp-menu selects="single">
	<sp-menu-item selected>Deselect</sp-menu-item>
	<sp-menu-item>Select Inverse</sp-menu-item>
	<sp-menu-item>Feather...</sp-menu-item>
	<sp-menu-item>Select and Mask...</sp-menu-item>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-item>Save Selection</sp-menu-item>
	<sp-menu-item disabled>Make Work Path</sp-menu-item>
	</sp-menu>

	<sp-menu selects="multiple">
	<sp-menu-item>Deselect</sp-menu-item>
	<sp-menu-item>Select Inverse</sp-menu-item>
	<sp-menu-item selected>Feather...</sp-menu-item>
	<sp-menu-item>Select and Mask...</sp-menu-item>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-item selected>Save Selection</sp-menu-item>
	<sp-menu-item disabled>Make Work Path</sp-menu-item>
	</sp-menu>

	<sp-menu label="Groceries" selects="multiple">
	<sp-menu-group label="Juice" selects="inherit">
	<sp-menu-item selected>Orange</sp-menu-item>
	<sp-menu-item selected>Apple</sp-menu-item>
	<sp-menu-item>Grape</sp-menu-item>
	</sp-menu-group>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-group label="Vegetables" selects="inherit">
	<sp-menu-item>Carrots</sp-menu-item>
	<sp-menu-item selected>Summer Squash</sp-menu-item>
	<sp-menu-item>Zuccini</sp-menu-item>
	</sp-menu-group>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-group label="Dry Goods" selects="inherit">
	<sp-menu-item>Ceral</sp-menu-item>
	<sp-menu-item selected>Flour</sp-menu-item>
	<sp-menu-item>Salt</sp-menu-item>
	<sp-menu-item>Sugar</sp-menu-item>
	</sp-menu-group>
	</sp-menu>

	<sp-menu label="Style/Color" @change=${update}>
	<sp-menu-group label="Font Style" selects="multiple" id="font">
	<sp-menu-item value="bold" selected>Bold</sp-menu-item>
	<sp-menu-item value="italic" selected>Italic</sp-menu-item>
	</sp-menu-group>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-group label="Text Color" selects="single" id="color">
	<sp-menu-item value="black">Black</sp-menu-item>
	<sp-menu-item value="blue" selected>Blue</sp-menu-item>
	<sp-menu-item value="red">Red</sp-menu-item>
	<sp-menu-item value="green">Green</sp-menu-item>
	</sp-menu-group>
	<sp-menu-divider></sp-menu-divider>
	<sp-menu-group
	label="Text Decoration"
	selects="single"
	id="decoration"
	>
	<sp-menu-item value="none">None</sp-menu-item>
	<sp-menu-item value="overline" selected>
	Overline
	</sp-menu-item>
	<sp-menu-item value="line-through">
	Line-through
	</sp-menu-item>
	<sp-menu-item value="underline">Underline</sp-menu-item>
	</sp-menu-group>
	</sp-menu>

Complete Menu selects implementation #1661

Complete Menu selects implementation #1661

Uh oh!

Conversation

Westbrook commented Jul 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Types of changes

Checklist:

Uh oh!

github-actions bot commented Jul 28, 2021

Branch Preview URLs

Uh oh!

github-actions bot commented Jul 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results for changed packages

action-bar permalink

action-menu permalink

menu permalink

picker permalink

popover permalink

split-button permalink

tooltip permalink

Uh oh!

najikahalsema left a comment

Choose a reason for hiding this comment

Uh oh!

stanvladut left a comment

Choose a reason for hiding this comment

Uh oh!

adixon-adobe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adixon-adobe commented Jul 29, 2021

Uh oh!

spdev3000 commented Jul 29, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Westbrook commented Jul 28, 2021 •

edited

Loading

github-actions bot commented Jul 28, 2021 •

edited

Loading