Merge pull request #237 from qualcomm/olaf/menu-button

feat(menu): menu button & icon menu button

Author: R-Bower

.changeset/common-camels-wear.md

@@ -0,0 +1,10 @@
+---
+"@qualcomm-ui/core": minor
+"@qualcomm-ui/qds-core": minor
+"@qualcomm-ui/angular": minor
+"@qualcomm-ui/react": minor
+---
+
+feat(menu): menu button & icon menu button
+
+commit: 0508c4d

packages/common/core/src/menu/menu.machine.ts

@@ -612,7 +612,6 @@ export const menuMachine: MachineConfig<MenuSchema> = createMachine<MenuSchema>(
           placement: "bottom-start",
           ...props.positioning,
         },
-        ...props,
       }
     },
     refs() {

packages/common/qds-core/src/menu/menu.api.ts

@@ -15,6 +15,7 @@ import type {
   QdsMenuCheckboxItemControlBindings,
   QdsMenuContentBindings,
   QdsMenuDescriptionBindings,
+  QdsMenuIndicatorBindings,
   QdsMenuItemAccessoryBindings,
   QdsMenuItemBindings,
   QdsMenuItemCommandBindings,
@@ -55,6 +56,11 @@ export function createQdsMenuApi(
         "data-size": size,
       })
     },
+    getIndicatorBindings(): QdsMenuIndicatorBindings {
+      return normalize.element({
+        className: menuClasses.indicator,
+      })
+    },
     getItemBindings(): QdsMenuItemBindings {
       return normalize.element({
         className: menuItemClasses.root,

packages/common/qds-core/src/menu/menu.classes.ts

@@ -4,5 +4,6 @@
 export const menuClasses = {
   button: "qui-menu__button",
   content: "qui-menu__content",
+  indicator: "qui-menu__indicator",
   separator: "qui-menu__separator",
 } as const

packages/common/qds-core/src/menu/menu.types.ts

@@ -94,13 +94,18 @@ export interface QdsMenuButtonBindings {
   className: MenuClasses["button"]
 }
 
+export interface QdsMenuIndicatorBindings {
+  className: MenuClasses["indicator"]
+}
+
 export interface QdsMenuApi {
   size: QdsMenuSize
 
   // group: bindings
   getButtonBindings(): QdsMenuButtonBindings
   getCheckboxItemControlBindings(): QdsMenuCheckboxItemControlBindings
   getContentBindings(): QdsMenuContentBindings
+  getIndicatorBindings(): QdsMenuIndicatorBindings
   getItemBindings(): QdsMenuItemBindings
   getItemCommandBindings(): QdsMenuItemCommandBindings
   getItemGroupBindings(): QdsMenuItemGroupBindings

packages/common/qds-core/src/menu/qds-menu.css

@@ -1,22 +1,52 @@
 .qui-menu__button {
   background: transparent;
-  .qui-button__icon {
-    &[data-placement="end"],
-    &[data-icon-button-part="root"] {
-      transition: transform var(--animation-duration-faster) ease-out;
-    }
+  .qui-menu__indicator {
+    transition: transform var(--animation-duration-faster) ease-out;
   }
   &[data-menu-part="trigger"][data-state="open"],
   &[data-state="open"][aria-haspopup="menu"] {
-    .qui-button__icon {
-      &[data-placement="end"],
-      &[data-icon-button-part="root"] {
-        transform: rotate(180deg);
-      }
+    .qui-menu__indicator {
+      transform: rotate(180deg);
     }
   }
 }
 
+/* icon-only menu button stuff */
+
+.qui-menu__button .qui-menu__indicator {
+  &[data-size="sm"] {
+    --icon-size: 12px;
+  }
+  &[data-size="md"] {
+    --icon-size: 16px;
+  }
+  &[data-size="lg"] {
+    --icon-size: 20px;
+  }
+}
+
+.qui-menu__button[data-kind="icon"]:has(.qui-button__icon) {
+  gap: var(--spacing-10);
+  &[data-size="sm"] {
+    padding-inline: var(--spacing-70);
+    width: auto;
+  }
+  &[data-size="md"] {
+    padding-inline: var(--spacing-80);
+    width: auto;
+  }
+  &[data-size="lg"] {
+    padding-inline: var(--spacing-90);
+    width: auto;
+  }
+
+  .qui-menu__indicator {
+    --icon-size: 12px;
+  }
+}
+
+/* general stuff */
+
 .qui-menu__content {
   background: var(--color-surface-overlay);
   border: solid 1px var(--color-border-neutral-02);

packages/docs/angular-docs/src/routes/components+/menu+/_menu.mdx

@@ -22,21 +22,27 @@ import {Menu} from "@qualcomm-ui/react/menu"
 ### Item Customization
 
 ::: terms
-hotkeys
-keyboard shortcuts
-action list
-overflow menu
+hotkeys, keyboard shortcuts, action list, overflow menu
 :::
 
 Compose the menu to include icons and commands.
 
 <QdsDemo name="MenuItemCustomizationDemo" />
 
+### Menu Button
+
+::: terms
+menu trigger, dropdown button, icon menu button
+:::
+
+Use [`q-menu-button`](./#q-menu-button) for a labeled trigger and [`q-menu-icon-button`](./#q-menu-icon-button) for an icon-only trigger. Both automatically render a chevron indicator. Always provide an `aria-label` on `q-menu-icon-button` to give assistive technologies an accessible name. Control the menu position with [positioning.placement](./#positioning).
+
+<QdsDemo name="MenuButtonDemo" />
+
 ### Context Menu
 
 ::: terms
-oncontextmenu
-right-click menu
+oncontextmenu, right-click menu
 :::
 
 Demonstrates how to trigger a menu on right-click or other context events.
@@ -46,9 +52,7 @@ Demonstrates how to trigger a menu on right-click or other context events.
 ### Nested Menus
 
 ::: terms
-submenu
-cascading
-hierarchical
+submenu, cascading, hierarchical
 :::
 
 Compose nested menus by nesting `<Menu.Root>` components inside each other.
@@ -58,9 +62,7 @@ Compose nested menus by nesting `<Menu.Root>` components inside each other.
 ### Links
 
 ::: terms
-anchor
-navigation
-navigation menu
+anchor, navigation, navigation menu
 :::
 
 Menu items can be links.
@@ -82,8 +84,7 @@ There are three item types, each corresponding to one of the three types of aria
 #### Checkbox Items
 
 ::: terms
-multi-select
-toggle
+multi-select, toggle
 :::
 
 Use checkbox items when you need options that are individually selectable.
@@ -103,8 +104,7 @@ Checkbox item state is controlled individually on each item. Use the `useCheckbo
 #### Radio Group
 
 ::: terms
-single-select
-exclusive selection
+single-select, exclusive selection
 :::
 
 Radio items are grouped such that only one can be selected at a time.
@@ -114,8 +114,7 @@ Radio items are grouped such that only one can be selected at a time.
 #### Radio Group State
 
 ::: terms
-controlled radio
-radio selection
+controlled radio, radio selection
 :::
 
 Radio item state can be controlled via the [value](./#value) property on the parent `menu-radio-item-group` element.
@@ -125,11 +124,10 @@ Radio item state can be controlled via the [value](./#value) property on the par
 ### Controlled State
 
 ::: terms
-signal
-two-way binding
+signal, two-way binding
 :::
 
-The menu's visibility can be controlled via the [open](./#open), [openChanged](./#openChanged), and [defaultOpen](./#defaultOpen) properties.
+The menu's visibility can be controlled via the [`open`](./#open), [`openChanged`](./#openchanged), and [`defaultOpen`](./#default-open) properties.
 
 - Use `open` to explicitly set whether the menu is open (controlled mode).
 - Use `openChanged` to be notified when the menu requests to open or close.
@@ -142,8 +140,7 @@ In controlled mode, the `open` prop should be updated in response to `openChange
 ### Placement
 
 ::: terms
-position
-popover placement
+position, popover placement
 :::
 
 Configure the menu's placement using the [positioning.placement](./#positioning) prop.
@@ -163,9 +160,7 @@ Use the [positioning.anchorPoint](./#positioning) prop to control the anchor poi
 ### Avatar
 
 ::: terms
-profile menu
-user menu
-account dropdown
+profile menu, user menu, account dropdown
 :::
 
 Here's an example that composes the `Menu` with the [Avatar](/components/avatar) component to display a user account menu.
@@ -175,20 +170,17 @@ Here's an example that composes the `Menu` with the [Avatar](/components/avatar)
 ### Within Dialog
 
 ::: terms
-modal
-overlay composition
+modal, overlay composition
 :::
 
-When using the `Menu` inside a `Dialog`, don't render the `q-menu-positioner` within a portal element.
+When using the `Menu` inside a [Dialog](/components/dialog), don't render the `q-menu-positioner` within a portal element.
 
 <QdsDemo name="MenuWithinDialogDemo" />
 
 ### Hide When Detached
 
 ::: terms
-auto-hide
-scroll behavior
-overflow
+auto-hide, scroll behavior, overflow
 :::
 
 Use the [positioning.hideWhenDetached](./#positioning) prop to hide the menu when it's detached from the trigger.
@@ -201,6 +193,14 @@ Use the [positioning.hideWhenDetached](./#positioning) prop to hide the menu whe
 
 <TypeDocProps name="MenuComponent" />
 
+### q-menu-button
+
+<TypeDocProps name="MenuButtonComponent" />
+
+### q-menu-icon-button
+
+<TypeDocProps name="MenuIconButtonComponent" />
+
 ### q-menu-item
 
 <TypeDocProps name="MenuItemDirective" />

packages/docs/angular-docs/src/routes/components+/menu+/demos/menu-button-demo.ts

@@ -0,0 +1,75 @@
+import {Component} from "@angular/core"
+import {
+  Copy,
+  Ellipsis,
+  File,
+  FileText,
+  FolderOpen,
+  Pencil,
+  Trash2,
+} from "lucide-angular"
+
+import {MenuModule} from "@qualcomm-ui/angular/menu"
+import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
+import {PortalComponent} from "@qualcomm-ui/angular-core/portal"
+
+@Component({
+  imports: [MenuModule, PortalComponent],
+  providers: [
+    provideIcons({Copy, Ellipsis, File, FileText, FolderOpen, Pencil, Trash2}),
+  ],
+  selector: "menu-button-demo",
+  template: `
+    <div class="flex gap-2.5">
+      <q-menu [positioning]="{placement: 'bottom-end'}">
+        <button emphasis="primary" q-menu-button startIcon="File">File</button>
+        <q-portal>
+          <div q-menu-positioner>
+            <div q-menu-content>
+              <button q-menu-item value="new-text-file">
+                <div icon="FileText" q-menu-item-start-icon></div>
+                New Text File
+              </button>
+              <button q-menu-item value="new-file">
+                <div icon="File" q-menu-item-start-icon></div>
+                New File...
+              </button>
+              <button q-menu-item value="open-file">
+                <div icon="FolderOpen" q-menu-item-start-icon></div>
+                Open File...
+              </button>
+            </div>
+          </div>
+        </q-portal>
+      </q-menu>
+
+      <q-menu>
+        <button
+          aria-label="More actions"
+          emphasis="primary"
+          icon="Ellipsis"
+          q-menu-icon-button
+        ></button>
+        <q-portal>
+          <div q-menu-positioner>
+            <div q-menu-content>
+              <button q-menu-item value="rename">
+                <div icon="Pencil" q-menu-item-start-icon></div>
+                Rename
+              </button>
+              <button q-menu-item value="duplicate">
+                <div icon="Copy" q-menu-item-start-icon></div>
+                Duplicate
+              </button>
+              <button q-menu-item value="delete">
+                <div icon="Trash2" q-menu-item-start-icon></div>
+                Delete
+              </button>
+            </div>
+          </div>
+        </q-portal>
+      </q-menu>
+    </div>
+  `,
+})
+export class MenuButtonDemo {}