Skip to content

feat: deprecate sp-menu in PickerBase derived classes #1237

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.

Sign up for GitHub

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

Merged
merged 12 commits into from
Mar 9, 2021
Merged

feat: deprecate sp-menu in PickerBase derived classes #1237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f7e1ad9
feat: deprecate sp-menu in PickerBase derived classes
adixon-adobe Mar 2, 2021
63f3a96
fix: renamed the file but not this
adixon-adobe Mar 2, 2021
2ac06ae
fix: remove <sp-menu> usage where deprecated
adixon-adobe Mar 2, 2021
bfcc28d
fix: split-button tests & lots of cleanup based on review feedback
adixon-adobe Mar 3, 2021
2af9161
fix: simplify optionsMenu usage and fix tests
adixon-adobe Mar 4, 2021
f6e4a6a
fix: slot documentation
adixon-adobe Mar 4, 2021
3918921
fix: hopefully fix CI
adixon-adobe Mar 4, 2021
322f5b9
fix: analyze type errors, and add deprecated syntax tests
adixon-adobe Mar 4, 2021
3d36248
fix: issues with optionsMenu & menuItems
adixon-adobe Mar 4, 2021
d9357a9
fix: analyze errors, properly this time
adixon-adobe Mar 4, 2021
f56ea7d
fix: missed ActionMenu for type changes
adixon-adobe Mar 4, 2021
108d6c6
fix: bad merge conflict resolution
adixon-adobe Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 20 additions & 30 deletions documentation/src/components/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,20 +227,18 @@ export class LayoutElement extends SpectrumElement {
value=${this.color}
@change=${this.updateColor}
>
<sp-menu>
<sp-menu-item value="lightest">
Lightest
</sp-menu-item>
<sp-menu-item value="light">
Light
</sp-menu-item>
<sp-menu-item value="dark">
Dark
</sp-menu-item>
<sp-menu-item value="darkest">
Darkest
</sp-menu-item>
</sp-menu>
<sp-menu-item value="lightest">
Lightest
</sp-menu-item>
<sp-menu-item value="light">
Light
</sp-menu-item>
<sp-menu-item value="dark">
Dark
</sp-menu-item>
<sp-menu-item value="darkest">
Darkest
</sp-menu-item>
</sp-picker>
<sp-field-label
for="theme-scale"
Expand All @@ -256,14 +254,12 @@ export class LayoutElement extends SpectrumElement {
value=${this.scale}
@change=${this.updateScale}
>
<sp-menu>
<sp-menu-item value="medium">
Medium
</sp-menu-item>
<sp-menu-item value="large">
Large
</sp-menu-item>
</sp-menu>
<sp-menu-item value="medium">
Medium
</sp-menu-item>
<sp-menu-item value="large">
Large
</sp-menu-item>
</sp-picker>
<sp-field-label
for="theme-direction"
Expand All @@ -279,14 +275,8 @@ export class LayoutElement extends SpectrumElement {
value=${this.dir}
@change=${this.updateDirection}
>
<sp-menu>
<sp-menu-item value="ltr">
LTR
</sp-menu-item>
<sp-menu-item value="rtl">
RTL
</sp-menu-item>
</sp-menu>
<sp-menu-item value="ltr">LTR</sp-menu-item>
<sp-menu-item value="rtl">RTL</sp-menu-item>
</sp-picker>
</div>
${this.renderContent()}
Expand Down
122 changes: 58 additions & 64 deletions packages/action-menu/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,25 @@ import { ActionMenu } from '@spectrum-web-components/action-menu';
```html
<sp-action-menu>
<span slot="label">More Actions</span>
<sp-menu>
<sp-menu-item>
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-item>
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-action-menu>
```

Expand All @@ -62,27 +60,25 @@ The visible label that is be provided via the default `<slot>` interface can be
<!-- prettier-ignore -->
```html
<sp-action-menu label="More Actions">
<sp-menu>
<sp-menu-item>
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-item>
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-action-menu>
```

Expand All @@ -97,30 +93,28 @@ A custom icon can be supplied via the `icon` slot in order to replace the defaul
<sp-action-menu label="More actions">
<sp-icon slot="icon" size="m"><svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18"><rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" /><path class="a" d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z" /></svg></sp-icon>
<span slot="label">Actions under the gear</span>
<sp-menu>
<sp-menu-item>
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-item>
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-action-menu>
```

## Accessibility

An `<sp-action-menu>` parent will ensure that the wrapped `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
6 changes: 4 additions & 2 deletions packages/action-menu/src/ActionMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,16 @@ import { MoreIcon } from '@spectrum-web-components/icons-workflow';
import actionMenuStyles from './action-menu.css.js';

/**
* @slot options - The menu with options that will display when the picker is open
* @element sp-action-menu
* @slot icon - The icon to use for action button
* @slot label - The label to use on for the action button
*/
export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
public static get styles(): CSSResultArray {
return [actionMenuStyles];
}

protected listRole = 'menu';
protected listRole: 'listbox' | 'menu' = 'menu';
protected itemRole = 'menuitem';
private get hasLabel(): boolean {
return this.slotHasContent;
Expand Down
28 changes: 7 additions & 21 deletions packages/action-menu/stories/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,27 +39,13 @@ export const ActionMenuMarkup = ({
<span slot="label">${visibleLabel}</span>
`
: html``}
<sp-menu>
<sp-menu-item>
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-item>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-action-menu>
`;
};
Loading