feat(menu): add multi-select and switch (#2152)

* feat(menu): add multi select story and example

* fix(menu): use emphasized checkboxes

* feat(menu): add variant with switch actions

* chore(menu): update mods

* chore(menu): remove controls from storybook

remove selection control
remove isDisabled control from top level

* chore(menu): add checkbox dependency and update docs

* chore(menu): add switch dependency and update docs

update classnames to match

* fix(menu): fix typo in story for checkbox class name

* chore(menu): fix hover and focus for actions in WHCM

* chore(menu): fix linter errors

use logical properties
fix case of class name

* feat(menu): make full menu item clickable for multi select

* chore(menu): update stories to reflect changes to multi select

* chore(menu): fix conditional to not add label if collapsible

components/menu/index.css

@@ -34,6 +34,9 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
   --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
 
+  --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
+  --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
+
   --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
   --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
   --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
@@ -200,6 +203,7 @@ 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;
@@ -210,6 +214,22 @@ governing permissions and limitations under the License.
       forced-color-adjust: none;
     }
 
+    .spectrum-Menu-item:hover, .spectrum-Menu-item:focus {
+
+      .spectrum-Menu-itemCheckbox {
+        --highcontrast-checkbox-highlight-color-hover: ButtonText;
+        --highcontrast-checkbox-highlight-color-default: ButtonText;
+      }
+
+      .spectrum-Menu-itemSwitch {
+        --highcontrast-switch-handle-border-color-hover: ButtonText;
+        --highcontrast-switch-handle-border-color-selected-default: ButtonText;
+        --highcontrast-switch-handle-border-color-selected-hover: ButtonText;
+        --highcontrast-switch-background-color-selected-default: ButtonText;
+        --highcontrast-switch-background-color-selected-hover: ButtonText;
+      }
+    }
+
     .spectrum-Menu-item--drillIn.is-open {
       --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color);
       --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color);
@@ -321,6 +341,28 @@ governing permissions and limitations under the License.
 
   margin: 0;
   text-decoration: none;
+
+  .spectrum-Menu-itemCheckbox {
+    --mod-checkbox-top-to-text: 0;
+    --mod-checkbox-text-to-control: 0;
+    min-block-size: 0;
+
+    .spectrum-Checkbox-box {
+      margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));
+
+      margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox));
+      margin-block-end: 0;
+    }
+  }
+
+  .spectrum-Menu-itemSwitch {
+    min-block-size: 0;
+
+    .spectrum-Switch-switch {
+      margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));;
+      margin-block-end: 0;
+    }
+  }
 }
 
 .spectrum-Menu-item {
@@ -506,12 +548,14 @@ governing permissions and limitations under the License.
   align-self: start;
 }
 
-.spectrum-menu-itemSelection {
+.spectrum-Menu-itemSelection {
   grid-area: selectedArea;
 }
 
 .spectrum-Menu-itemLabel {
   grid-area: labelArea;
+  display: flex;
+  align-items: flex-start;
   font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
   color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
 }
@@ -522,15 +566,15 @@ governing permissions and limitations under the License.
 
 .spectrum-Menu-itemActions {
   grid-area: actionsArea;
+  align-self: start;
+  margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
 }
 
 .spectrum-Menu-chevron {
   grid-area: chevronArea;
   align-self: center;
   block-size: var(--spectrum-menu-item-checkmark-height);
-  height: var(--spectrum-menu-item-checkmark-height);
   inline-size: var(--spectrum-menu-item-checkmark-width);
-  width: var(--spectrum-menu-item-checkmark-width);
 }
 
 .spectrum-Menu-item--collapsible .spectrum-Menu-chevron {
@@ -609,6 +653,7 @@ governing permissions and limitations under the License.
   color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
   font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
   justify-self: end;
+  align-self: start;
   margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
 }
 

components/menu/metadata/menu.yml

@@ -1128,6 +1128,188 @@ examples:
           </div>
         </div>
       </div>
+  - id: multi-selection
+    name: Multi-Selection
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Without icons</h4>
+          <div class="spectrum-Examples-itemGroup">
+            <ul class="spectrum-Menu spectrum-Menu--sizeM is-selectableMultiple" role="menu">
+              <li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label1" checked>
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label1">Marquee</span>
+                </label>
+              </li>
+              <li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label2">
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label2">Add</span>
+                </label>
+              </li>
+              <li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label3">
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label3">Subtract</span>
+                </label>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">With icons</h4>
+          <div class="spectrum-Examples-itemGroup">
+            <ul class="spectrum-Menu spectrum-Menu--sizeM is-selectableMultiple" role="menu">
+              <li class="spectrum-Menu-item is-selected" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label4" checked>
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
+                    <use xlink:href="#spectrum-icon-18-Selection"></use>
+                  </svg>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label4">Marquee</span>
+                </label>
+              </li>
+              <li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label5">
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
+                    <use xlink:href="#spectrum-icon-18-SelectAdd"></use>
+                  </svg>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label5">Add</span>
+                </label>
+              </li>
+              <li class="spectrum-Menu-item is-selectable" role="menuitem" tabindex="0">
+                <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Menu-itemCheckbox">
+                  <input type="checkbox" class="spectrum-Checkbox-input" aria-labelledby="ms-label6">
+                  <span class="spectrum-Checkbox-box">
+                    <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
+                      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+                    </svg>
+                  </span>
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
+                    <use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
+                  </svg>
+                  <span class="spectrum-Checkbox-label spectrum-Menu-itemLabel" id="ms-label6">Subtract</span>
+                </label>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+  - id: with-switch
+    name: With Switch
+    markup: |
+      <div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Without icons</h4>
+          <div class="spectrum-Examples-itemGroup">
+            <ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-0">Marquee</label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0" checked>
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-1">Add</label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1">
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-2">Subtract</label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-2">
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">With icons</h4>
+          <div class="spectrum-Examples-itemGroup">
+            <ul class="spectrum-Menu spectrum-Menu--sizeM" role="menu">
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-3">
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Selection Icon">
+                    <use xlink:href="#spectrum-icon-18-Selection"></use>
+                  </svg>
+                  Marquee
+                </label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label4" id="switch-onoff-3" checked>
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-4">
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Add Icon">
+                    <use xlink:href="#spectrum-icon-18-SelectAdd"></use>
+                  </svg>
+                  Add
+                </label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label5" id="switch-onoff-4">
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+              <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+                <label class="spectrum-Switch-label spectrum-Menu-itemLabel" for="switch-onoff-5">
+                  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Select Subtract Icon">
+                    <use xlink:href="#spectrum-icon-18-SelectSubtract"></use>
+                  </svg>
+                  Subtract
+                </label>
+                <div class="spectrum-Menu-itemActions">
+                  <div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized spectrum-Menu-itemSwitch">
+                    <input type="checkbox" class="spectrum-Switch-input" aria-labelledby="label6" id="switch-onoff-5">
+                    <span class="spectrum-Switch-switch"></span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
   - id: submenu-drillin
     name: Drill-in for submenu
     description: When a menu item contains a submenu, a drill-in chevron will appear at the end of the menu item to show that a submenu is available. See the guidelines for more info on how to display submenus.

components/menu/metadata/mods.md

@@ -1,5 +1,7 @@
 | Modifiable Custom Properties                                       |
 | ------------------------------------------------------------------ |
+| `--mod-checkbox-text-to-control`                                   |
+| `--mod-checkbox-top-to-text`                                       |
 | `--mod-menu-checkmark-display`                                     |
 | `--mod-menu-checkmark-icon-color-default`                          |
 | `--mod-menu-checkmark-icon-color-down`                             |
@@ -51,6 +53,8 @@
 | `--mod-menu-item-selectable-edge-to-text-not-selected`             |
 | `--mod-menu-item-text-to-control`                                  |
 | `--mod-menu-item-top-edge-to-text`                                 |
+| `--mod-menu-item-top-to-action`                                    |
+| `--mod-menu-item-top-to-checkbox`                                  |
 | `--mod-menu-item-top-to-checkmark`                                 |
 | `--mod-menu-item-value-color-default`                              |
 | `--mod-menu-item-value-color-down`                                 |

components/menu/package.json

@@ -18,14 +18,18 @@
     "build": "gulp"
   },
   "peerDependencies": {
+    "@spectrum-css/checkbox": ">=7",
     "@spectrum-css/divider": ">=2",
     "@spectrum-css/icon": ">=3",
+    "@spectrum-css/switch": ">=4",
     "@spectrum-css/tokens": ">=11.1.0"
   },
   "devDependencies": {
+    "@spectrum-css/checkbox": "^7.0.10",
     "@spectrum-css/component-builder-simple": "^2.0.17",
     "@spectrum-css/divider": "^2.1.27",
     "@spectrum-css/icon": "^4.0.2",
+    "@spectrum-css/switch": "^4.0.6",
     "@spectrum-css/tokens": "^11.3.6",
     "gulp": "^4.0.0"
   },