diff --git a/e2e/components/ComboButton/ComboButton-test.e2e.js b/e2e/components/ComboButton/ComboButton-test.e2e.js
new file mode 100644
index 000000000000..56dc75346093
--- /dev/null
+++ b/e2e/components/ComboButton/ComboButton-test.e2e.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('ComboButton', () => {
+ themes.forEach((theme) => {
+ test.describe(theme, () => {
+ test('combo-button @vrt', async ({ page }) => {
+ await snapshotStory(page, {
+ component: 'ComboButton',
+ id: 'experimental-unstable-combobutton--default',
+ theme,
+ });
+ });
+ });
+ });
+
+ test('accessibility-checker @avt', async ({ page }) => {
+ await visitStory(page, {
+ component: 'ComboButton',
+ id: 'experimental-unstable-combobutton--default',
+ globals: {
+ theme: 'white',
+ },
+ });
+ await expect(page).toHaveNoACViolations('ComboButton');
+ });
+});
diff --git a/e2e/components/MenuButton/MenuButton-test.e2e.js b/e2e/components/MenuButton/MenuButton-test.e2e.js
new file mode 100644
index 000000000000..b11456cb0ff6
--- /dev/null
+++ b/e2e/components/MenuButton/MenuButton-test.e2e.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('MenuButton', () => {
+ themes.forEach((theme) => {
+ test.describe(theme, () => {
+ test('menu-button @vrt', async ({ page }) => {
+ await snapshotStory(page, {
+ component: 'MenuButton',
+ id: 'experimental-unstable-menubutton--default',
+ theme,
+ });
+ });
+ });
+ });
+
+ test('accessibility-checker @avt', async ({ page }) => {
+ await visitStory(page, {
+ component: 'MenuButton',
+ id: 'experimental-unstable-menubutton--default',
+ globals: {
+ theme: 'white',
+ },
+ });
+ await expect(page).toHaveNoACViolations('MenuButton');
+ });
+});
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 66fd4f99be9a..5f25e5517da8 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9038,6 +9038,57 @@ Map {
"8": "cool-gray",
"9": "warm-gray",
},
+ "unstable_ComboButton" => Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": Object {
+ "isRequired": true,
+ "type": "node",
+ },
+ "className": Object {
+ "type": "string",
+ },
+ "disabled": Object {
+ "type": "bool",
+ },
+ "label": Object {
+ "isRequired": true,
+ "type": "string",
+ },
+ "onClick": Object {
+ "type": "func",
+ },
+ "size": Object {
+ "args": Array [
+ Array [
+ "sm",
+ "md",
+ "lg",
+ ],
+ ],
+ "type": "oneOf",
+ },
+ "tooltipAlign": Object {
+ "args": Array [
+ Array [
+ "top",
+ "top-left",
+ "top-right",
+ "bottom",
+ "bottom-left",
+ "bottom-right",
+ "left",
+ "right",
+ ],
+ ],
+ "type": "oneOf",
+ },
+ "translateWithId": Object {
+ "type": "func",
+ },
+ },
+ "render": [Function],
+ },
"unstable_FeatureFlags" => Object {
"propTypes": Object {
"children": Object {
@@ -9101,6 +9152,9 @@ Map {
"onClose": Object {
"type": "func",
},
+ "onOpen": Object {
+ "type": "func",
+ },
"open": Object {
"type": "bool",
},
@@ -9157,6 +9211,46 @@ Map {
},
"render": [Function],
},
+ "unstable_MenuButton" => Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": Object {
+ "isRequired": true,
+ "type": "node",
+ },
+ "className": Object {
+ "type": "string",
+ },
+ "disabled": Object {
+ "type": "bool",
+ },
+ "kind": Object {
+ "args": Array [
+ Array [
+ "primary",
+ "tertiary",
+ "ghost",
+ ],
+ ],
+ "type": "oneOf",
+ },
+ "label": Object {
+ "isRequired": true,
+ "type": "string",
+ },
+ "size": Object {
+ "args": Array [
+ Array [
+ "sm",
+ "md",
+ "lg",
+ ],
+ ],
+ "type": "oneOf",
+ },
+ },
+ "render": [Function],
+ },
"unstable_MenuItem" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index 8cf6b6628a68..475bd9305453 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -221,9 +221,11 @@ describe('Carbon Components React', () => {
"UnorderedList",
"VStack",
"types",
+ "unstable_ComboButton",
"unstable_FeatureFlags",
"unstable_LayoutDirection",
"unstable_Menu",
+ "unstable_MenuButton",
"unstable_MenuItem",
"unstable_MenuItemDivider",
"unstable_MenuItemGroup",
diff --git a/packages/react/src/components/ComboButton/ComboButton-test.js b/packages/react/src/components/ComboButton/ComboButton-test.js
new file mode 100644
index 000000000000..8ff643d1c320
--- /dev/null
+++ b/packages/react/src/components/ComboButton/ComboButton-test.js
@@ -0,0 +1,162 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { MenuItem } from '../Menu';
+
+import { ComboButton } from './';
+
+const prefix = 'cds';
+
+describe('ComboButton', () => {
+ describe('renders as expected - Component API', () => {
+ it('supports a ref on the outermost element', () => {
+ const ref = jest.fn();
+ const { container } = render(
+
+
+
+ );
+ expect(ref).toHaveBeenCalledWith(container.firstChild);
+ });
+
+ it('supports a custom class name on the outermost element', () => {
+ const { container } = render(
+
+
+
+ );
+ expect(container.firstChild).toHaveClass('test');
+ });
+
+ it('forwards additional props on the outermost element', () => {
+ const { container } = render(
+
+
+
+ );
+ expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+ });
+
+ it('renders props.label on the trigger button', () => {
+ render(
+
+
+
+ );
+ expect(screen.getAllByRole('button')[0]).toHaveTextContent(/^Test$/);
+ });
+
+ it('supports props.disabled', () => {
+ render(
+
+
+
+ );
+
+ // primary action button
+ expect(screen.getAllByRole('button')[0]).toBeDisabled();
+
+ // trigger button
+ expect(screen.getAllByRole('button')[1]).toBeDisabled();
+ });
+
+ describe('supports props.size', () => {
+ const sizes = ['sm', 'md', 'lg'];
+
+ sizes.forEach((size) => {
+ it(`size="${size}"`, () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--combo-button__container--${size}`
+ );
+ });
+ });
+ });
+
+ describe('supports props.tooltipAlign', () => {
+ const alignments = [
+ 'top',
+ 'top-left',
+ 'top-right',
+ 'bottom',
+ 'bottom-left',
+ 'bottom-right',
+ 'left',
+ 'right',
+ ];
+
+ alignments.forEach((alignment) => {
+ it(`tooltipAlign="${alignment}"`, () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container.firstChild.lastChild).toHaveClass(
+ `${prefix}--popover--${alignment}`
+ );
+ });
+ });
+ });
+
+ it('supports props.translateWithId', () => {
+ const t = () => 'test';
+
+ render(
+
+
+
+ );
+
+ const triggerButton = screen.getAllByRole('button')[1];
+ const tooltipId = triggerButton.getAttribute('aria-labelledby');
+ const tooltip = document.getElementById(tooltipId);
+
+ expect(tooltip).toHaveTextContent(t());
+ });
+ });
+
+ describe('behaves as expected', () => {
+ it('emits props.onClick on primary action click', async () => {
+ const onClick = jest.fn();
+ render(
+
+
+
+ );
+
+ expect(onClick).toHaveBeenCalledTimes(0);
+ await userEvent.click(screen.getAllByRole('button')[0]);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('opens a menu on click on the trigger button', async () => {
+ render(
+
+
+
+ );
+
+ await userEvent.click(screen.getAllByRole('button')[1]);
+
+ expect(screen.getByRole('menu')).toBeTruthy();
+ expect(screen.getByRole('menuitem')).toHaveTextContent(
+ /^Additional action$/
+ );
+ });
+ });
+});
diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx
new file mode 100644
index 000000000000..13c7627d82af
--- /dev/null
+++ b/packages/react/src/components/ComboButton/ComboButton.mdx
@@ -0,0 +1,36 @@
+import { ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+
+# ComboButton
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComboButton)
+
+
+
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+
+
+## Overview
+
+A `ComboButton` can be used to offer additional, secondary actions in a disclosed list next to the primary action. These additional actions must be `MenuItem`s passed as `children`. The primary action's label is passed as `props.label`.
+
+```jsx
+
+
+
+
+
+```
+
+## Component API
+
+
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/ComboButton/ComboButton.mdx).
diff --git a/packages/react/src/components/ComboButton/ComboButton.stories.js b/packages/react/src/components/ComboButton/ComboButton.stories.js
new file mode 100644
index 000000000000..ca696bfa0319
--- /dev/null
+++ b/packages/react/src/components/ComboButton/ComboButton.stories.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { MenuItem, MenuItemDivider } from '../Menu';
+
+import { ComboButton } from './';
+import mdx from './ComboButton.mdx';
+
+export default {
+ title: 'Experimental/unstable__ComboButton',
+ component: ComboButton,
+ subcomponents: {
+ MenuItem,
+ MenuItemDivider,
+ },
+ parameters: {
+ docs: {
+ page: mdx,
+ },
+ },
+};
+
+export const Default = () => (
+
+
+
+
+
+);
+
+export const WithDanger = () => (
+
+
+
+
+
+
+
+);
+
+export const Playground = (args) => {
+ const onClick = action('onClick (MenuItem)');
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+Playground.argTypes = {
+ children: {
+ table: {
+ disable: true,
+ },
+ },
+ className: {
+ table: {
+ disable: true,
+ },
+ },
+ translateWithId: {
+ table: {
+ disable: true,
+ },
+ },
+ label: {
+ defaultValue: 'Primary action',
+ },
+};
+
+Playground.args = {
+ onClick: action('onClick'),
+};
diff --git a/packages/react/src/components/ComboButton/docs/overview.mdx b/packages/react/src/components/ComboButton/docs/overview.mdx
new file mode 100644
index 000000000000..fa1ff29e53f9
--- /dev/null
+++ b/packages/react/src/components/ComboButton/docs/overview.mdx
@@ -0,0 +1,13 @@
+## Live demo
+
+
diff --git a/packages/react/src/components/ComboButton/index.js b/packages/react/src/components/ComboButton/index.js
new file mode 100644
index 000000000000..85ed51b55c6c
--- /dev/null
+++ b/packages/react/src/components/ComboButton/index.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { ChevronDown } from '@carbon/icons-react';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Menu } from '../Menu';
+
+import { useAttachedMenu } from '../../internal/useAttachedMenu';
+import { useId } from '../../internal/useId';
+import { useMergedRefs } from '../../internal/useMergedRefs';
+import { usePrefix } from '../../internal/usePrefix';
+
+const spacing = 4; // top and bottom spacing between the button and the menu. in px
+const defaultTranslations = {
+ 'carbon.combo-button.additional-actions': 'Additional actions',
+};
+
+function defaultTranslateWithId(messageId) {
+ return defaultTranslations[messageId];
+}
+
+const ComboButton = React.forwardRef(function ComboButton(
+ {
+ children,
+ className,
+ disabled,
+ label,
+ onClick,
+ size = 'lg',
+ tooltipAlign,
+ translateWithId: t = defaultTranslateWithId,
+ ...rest
+ },
+ forwardRef
+) {
+ const id = useId('combobutton');
+ const prefix = usePrefix();
+
+ const containerRef = useRef(null);
+ const menuRef = useRef(null);
+ const ref = useMergedRefs([forwardRef, containerRef]);
+ const [width, setWidth] = useState(0);
+ const {
+ open,
+ x,
+ y,
+ handleClick: hookOnClick,
+ handleMousedown: handleTriggerMousedown,
+ handleClose,
+ } = useAttachedMenu(containerRef);
+
+ function handleTriggerClick() {
+ if (containerRef.current) {
+ const { width: w } = containerRef.current.getBoundingClientRect();
+ setWidth(w);
+ hookOnClick();
+ }
+ }
+
+ function handlePrimaryActionClick(e) {
+ if (onClick) {
+ onClick(e);
+ }
+ }
+
+ function handleOpen() {
+ menuRef.current.style.width = `${width}px`;
+ }
+
+ const containerClasses = classNames(
+ `${prefix}--combo-button__container`,
+ `${prefix}--combo-button__container--${size}`,
+ {
+ [`${prefix}--combo-button__container--open`]: open,
+ },
+ className
+ );
+
+ const primaryActionClasses = classNames(
+ `${prefix}--combo-button__primary-action`
+ );
+ const triggerClasses = classNames(`${prefix}--combo-button__trigger`);
+
+ return (
+
+
+
+
+
+
+
+
+