From 042ec45b4f4ef7a310f85464713f8d2a4f2213d0 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 5 Oct 2023 17:45:08 -0400 Subject: [PATCH] feat(menu): tray submenus Adds CSS and examples for the "Tray submenus" design in the guidelines and design file. This is for the use of Menu within Tray, to show the parent menu item at the top with a back button. Also updates some examples markup: - Remove several duplicate IDs - Remove not needed aria attributes when the label text is already wrapped by the label element (previously was resulting in screen reader reading the label twice in a row). --- components/menu/index.css | 29 ++++- components/menu/metadata/menu.yml | 204 +++++++++++++++++++----------- components/menu/metadata/mods.md | 5 + components/menu/package.json | 4 +- 4 files changed, 163 insertions(+), 79 deletions(-) diff --git a/components/menu/index.css b/components/menu/index.css index 931c6b6a776..4a570877929 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -91,6 +91,8 @@ governing permissions and limitations under the License. --spectrum-menu-checkmark-display-shown: block; --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */ --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc(( @@ -135,6 +137,8 @@ governing permissions and limitations under the License. --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); } .spectrum-Menu--sizeL { @@ -160,6 +164,8 @@ governing permissions and limitations under the License. --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); } .spectrum-Menu--sizeXL { @@ -185,6 +191,8 @@ governing permissions and limitations under the License. --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); } @media (forced-colors: active) { @@ -203,7 +211,6 @@ governing permissions and limitations under the License. --highcontrast-menu-item-selected-background-color: Highlight; --highcontrast-menu-item-selected-color: HighlightText; - @supports (color: SelectedItem) { --highcontrast-menu-item-selected-background-color: SelectedItem; --highcontrast-menu-item-selected-color: SelectedItemText; @@ -256,6 +263,7 @@ governing permissions and limitations under the License. .spectrum-Menu { display: inline-block; + inline-size: var(--mod-menu-inline-size, auto); box-sizing: border-box; margin: 0; padding: 0; @@ -431,7 +439,8 @@ governing permissions and limitations under the License. } } -.spectrum-Menu-item:focus-visible { +.spectrum-Menu-item:focus-visible, +.spectrum-Menu-back:focus-visible { box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 @@ -782,4 +791,18 @@ governing permissions and limitations under the License. color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); } } -} \ No newline at end of file +} + +/* Tray submenu */ +.spectrum-Menu-item--back { + display: flex; + flex-flow: row wrap; + align-items: center; + padding-inline-start: var(--mod-menu-back-padding-inline-start, 0); + padding-block: var(--mod-menu-back-padding-block, 0); +} + +.spectrum-Menu-backIcon { + margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); + margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); +} diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml index fbdd9c69695..92c2d0b9cd6 100644 --- a/components/menu/metadata/menu.yml +++ b/components/menu/metadata/menu.yml @@ -41,7 +41,7 @@ examples:

M

-