Merge pull request #241 from qualcomm/olaf/feat/split-button

feat: split button

Author: R-Bower

package.json

@@ -108,5 +108,5 @@
     "prettier": "3.8.3",
     "typescript": "catalog:"
   },
-  "packageManager": "pnpm@11.3.0+sha512.2c403d6594527287672b1f7056343a1f7c3634036a67ffabfcc2b3d7595d843768f8787148d1b57cf7956c90606bbd192857c363af19e96d2d0ec9ec5741d215"
+  "packageManager": "pnpm@11.5.1+sha512.93f7b57422ea7068257235b4c16eb60762eb68e1dc23723199cc739043ea9be2c4143274a399d8c6defa2b1176226d9ca1c4b63482d6200c1a8fbaa78c1d1485"
 }

packages/common/qds-core/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @qualcomm-ui/qds-core Changelog
 
+## 1.29.0
+
+Jun 4th, 2026
+
+### Features
+
+- [tag]: support controlled selected state ([f2b0d0c](https://github.com/qualcomm/qualcomm-ui/commit/f2b0d0c))
+- [menu]: add split button ([527d33e](https://github.com/qualcomm/qualcomm-ui/commit/527d33e))
+- [tag]: add aria-pressed to selectable tag ([81a24a3](https://github.com/qualcomm/qualcomm-ui/commit/81a24a3))
+
+### Code Refactoring
+
+- [button]: consolidate button-group prop resolution ([3922878](https://github.com/qualcomm/qualcomm-ui/commit/3922878))
+
+### Bug Fixes
+
+- [tag]: correct icon sizing for nested icons ([d1618e5](https://github.com/qualcomm/qualcomm-ui/commit/d1618e5))
+- [menu]: keep variant background on menu button triggers ([6892122](https://github.com/qualcomm/qualcomm-ui/commit/6892122))
+
 ## 1.28.4
 
 Jun 3rd, 2026

packages/common/qds-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualcomm-ui/qds-core",
-  "version": "1.28.4",
+  "version": "1.29.0",
   "description": "qds core components",
   "author": "Ryan Bower",
   "license": "BSD-3-Clause-Clear",

packages/common/qds-core/src/button/button-group-shared.types.ts

@@ -0,0 +1,71 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes"
+
+import type {
+  QdsButtonDensity,
+  QdsButtonEmphasis,
+  QdsButtonSize,
+  QdsButtonVariant,
+} from "./button.types"
+
+/**
+ * Props and bindings shared between button group and split button.
+ */
+
+export interface QdsButtonGroupCommonProps {
+  /**
+   * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label aria-label}
+   * attribute.
+   */
+  ["aria-label"]?: string
+
+  /**
+   * {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby aria-labelledby}
+   * attribute.
+   */
+  ["aria-labelledby"]?: string
+
+  /**
+   * The density of the buttons. Governs padding and height.
+   *
+   * @default 'default'
+   */
+  density?: QdsButtonDensity
+
+  /**
+   * Disables every button in the group.
+   *
+   * @default false
+   */
+  disabled?: boolean | undefined
+
+  /**
+   * The emphasis of the buttons in the group.
+   */
+  emphasis?: QdsButtonEmphasis
+
+  /**
+   * The size of the buttons in the group.
+   *
+   * @default 'md'
+   */
+  size?: QdsButtonSize
+
+  /**
+   * The variant of the buttons in the group.
+   */
+  variant?: QdsButtonVariant
+}
+
+export interface QdsButtonGroupCommonBindings {
+  "aria-label"?: string
+  "aria-labelledby"?: string
+  "data-density": QdsButtonDensity
+  "data-disabled": BooleanDataAttr
+  "data-emphasis"?: QdsButtonEmphasis
+  "data-size": QdsButtonSize
+  "data-variant"?: QdsButtonVariant
+  role?: "group"
+}

packages/common/qds-core/src/button/button-group.api.ts

@@ -11,6 +11,35 @@ import type {
   QdsButtonGroupBindings,
 } from "./button-group.types"
 import {buttonClasses} from "./button.classes"
+import type {QdsButtonApiProps} from "./button.types"
+
+export type ResolvableButtonGroupProps = Pick<
+  QdsButtonGroupApiProps,
+  keyof QdsButtonGroupApiProps & keyof QdsButtonApiProps
+>
+
+/**
+ * Merges button-group context values with a button's own props.
+ *
+ * `density`, `disabled`, and `size` are non-overridable (group wins).
+ * `emphasis` and `variant` are overridable per-button (button wins).
+ */
+export function resolveButtonPropsWithGroup<
+  T extends ResolvableButtonGroupProps,
+>(group: ResolvableButtonGroupProps | undefined, base: T): T {
+  if (!group) {
+    return base
+  }
+  const {density, disabled, emphasis, size, variant} = group
+  return {
+    ...base,
+    density: density ?? base.density,
+    disabled: disabled ?? base.disabled,
+    emphasis: base.emphasis ?? emphasis,
+    size: size ?? base.size,
+    variant: base.variant ?? variant,
+  }
+}
 
 const parts = buttonGroupAnatomy.parts
 

packages/common/qds-core/src/button/button-group.types.ts

@@ -2,52 +2,20 @@
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
 import type {AnatomyPart, AnatomyPartName} from "@qualcomm-ui/utils/anatomy"
-import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes"
 
+import type {
+  QdsButtonGroupCommonBindings,
+  QdsButtonGroupCommonProps,
+} from "./button-group-shared.types"
 import type {buttonGroupAnatomy} from "./button-group.anatomy"
 import type {buttonClasses} from "./button.classes"
-import type {
-  QdsButtonDensity,
-  QdsButtonEmphasis,
-  QdsButtonSize,
-  QdsButtonVariant,
-} from "./button.types"
 
 /**
  * The button group layouts
  */
 export type QdsButtonGroupLayout = "hug" | "start" | "end" | "fill"
 
-export interface QdsButtonGroupApiProps {
-  /**
-   * Accessible name for the button group.
-   */
-  ["aria-label"]?: string
-
-  /**
-   * Id(s) of element(s) that label the button group.
-   */
-  ["aria-labelledby"]?: string
-
-  /**
-   * The density of the button. Governs padding and height.
-   *
-   * @default 'default'
-   */
-  density?: QdsButtonDensity
-
-  /**
-   * Disables all buttons within the group.
-   *
-   * @default false
-   */
-  disabled?: boolean | undefined
-
-  /**
-   * The emphasis of the buttons in the group.
-   */
-  emphasis?: QdsButtonEmphasis
-
+export interface QdsButtonGroupApiProps extends QdsButtonGroupCommonProps {
   /**
    * The layout used to display the button group.
    * - `hug`: Content-sized; width matches the buttons only (default).
@@ -58,31 +26,13 @@ export interface QdsButtonGroupApiProps {
    * @default 'hug'
    */
   layout?: QdsButtonGroupLayout
-
-  /**
-   * The size of the buttons in the group.
-   *
-   * @default 'md'
-   */
-  size?: QdsButtonSize
-
-  /**
-   * The variant of the buttons in the group.
-   */
-  variant?: QdsButtonVariant
 }
 
 type PartName = AnatomyPartName<typeof buttonGroupAnatomy>
 interface Part<P extends PartName> extends AnatomyPart<"buttonGroup", P> {}
 
-export interface QdsButtonGroupBindings extends Part<"root"> {
-  "aria-label"?: string
-  "aria-labelledby"?: string
+export interface QdsButtonGroupBindings
+  extends Part<"root">, QdsButtonGroupCommonBindings {
   className: (typeof buttonClasses)["group"]
-  "data-disabled": BooleanDataAttr
-  "data-emphasis"?: QdsButtonEmphasis
   "data-layout": QdsButtonGroupLayout
-  "data-size"?: QdsButtonSize
-  "data-variant"?: QdsButtonVariant
-  role?: "group"
 }

packages/common/qds-core/src/button/index.ts

@@ -1,3 +1,4 @@
+export type * from "./button-group-shared.types"
 export * from "./button-group.anatomy"
 export * from "./button-group.api"
 export type * from "./button-group.types"

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

@@ -1,5 +1,8 @@
 export * from "./menu.anatomy"
 export * from "./menu-item.classes"
+export * from "./menu-split-button.anatomy"
+export * from "./menu-split-button.api"
+export type * from "./menu-split-button.types"
 export * from "./menu.api"
 export * from "./menu.classes"
 export type * from "./menu.types"

packages/common/qds-core/src/menu/menu-split-button.anatomy.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {type Anatomy, createAnatomy} from "@qualcomm-ui/utils/anatomy"
+
+const parts = ["root"] as const
+
+export const splitButtonAnatomy: Anatomy<
+  "splitButton",
+  (typeof parts)[number]
+> = createAnatomy("splitButton").parts(...parts)

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

@@ -0,0 +1,43 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {booleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import type {Explicit} from "@qualcomm-ui/utils/guard"
+import type {PropNormalizer} from "@qualcomm-ui/utils/machine"
+
+import {splitButtonAnatomy} from "./menu-split-button.anatomy"
+import type {
+  QdsSplitButtonApiProps,
+  QdsSplitButtonBindings,
+} from "./menu-split-button.types"
+import {menuClasses} from "./menu.classes"
+
+const parts = splitButtonAnatomy.parts
+
+export function getQdsSplitButtonBindings(
+  {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    density,
+    disabled,
+    emphasis,
+    size,
+    variant,
+  }: Explicit<QdsSplitButtonApiProps>,
+  normalize: PropNormalizer,
+): QdsSplitButtonBindings {
+  const hasAriaLabel = !!(ariaLabel || ariaLabelledby)
+
+  return normalize.element({
+    ...parts.root,
+    "aria-label": ariaLabel || undefined,
+    "aria-labelledby": ariaLabelledby || undefined,
+    className: menuClasses.splitButton,
+    "data-density": density || "default",
+    "data-disabled": booleanDataAttr(disabled),
+    "data-emphasis": emphasis || undefined,
+    "data-size": size || "md",
+    "data-variant": variant || undefined,
+    ...(hasAriaLabel && {role: "group"}),
+  })
+}