carbon-design-system · kodiakhq · Mar 14, 2023 · Feb 24, 2023 · Feb 24, 2023 · Feb 24, 2023
@@ -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)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## 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
+<ComboButton label="Primary action">
+  <MenuItem label="Second action" />
+  <MenuItem label="Third action" />
+  <MenuItem label="Fourth action" />
+</ComboButton>
+```
+
+## Component API
+
+<ArgsTable />
+
+## 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).
@@ -0,0 +1,46 @@
+/**
+ * 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 } from '../Menu';
+
+import { ComboButton } from './';
+import mdx from './ComboButton.mdx';
+
+export default {
+  title: 'Experimental/unstable__ComboButton',
+  component: ComboButton,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Playground = (args) => {
+  const onClick = action('onClick (MenuItem)');
+
+  return (
+    <ComboButton {...args}>
+      <MenuItem label="Second action" onClick={onClick} />
+      <MenuItem label="Third action" onClick={onClick} />
+      <MenuItem label="Fourth action" onClick={onClick} />
+    </ComboButton>
+  );
+};
+
+Playground.argTypes = {
+  label: {
+    defaultValue: 'Primary action',
+  },
+};
+
+Playground.args = {
+  onClick: action('onClick'),
+};
@@ -0,0 +1,13 @@
+## Live demo
+
+<StorybookDemo
+  themeSelector
+  tall
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Default',
+      variant: 'experimental-unstable-combobutton--playground'
+    },
+  ]}
+/>
@@ -0,0 +1,164 @@
+/**
+ * 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 { useId } from '../../internal/useId';
+import { usePrefix } from '../../internal/usePrefix';
+
+const defaultSize = 'md';
+const spacing = 4; // top and bottom spacing between the button and the menu. in px
+
+function ComboButton({
+  children,
+  disabled,
+  kind,
+  label,
+  onClick,
+  size = defaultSize,
+}) {
+  const id = useId('combobutton');
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState([
+    [0, 0],
+    [0, 0],
+  ]);
+  const [width, setWidth] = useState(0);
+  const containerRef = useRef(null);
+  const prefix = usePrefix();
+
+  function openMenu() {
+    if (containerRef.current) {
+      const {
+        left,
+        top,
+        right,
+        bottom,
+        width: w,
+      } = containerRef.current.getBoundingClientRect();
+      setPosition([
+        [left, right],
+        [top - spacing, bottom + spacing],
+      ]);
+      setWidth(Math.floor(w));
+    }
+
+    setOpen(true);
+  }
+
+  function closeMenu() {
+    setOpen(false);
+  }
+
+  function handleTriggerClick() {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+
+  function handleTriggerMousedown(e) {
+    // prevent default for mousedown on trigger element to avoid
+    // the "blur" event from firing on the menu as this would close
+    // it and immediately re-open since "click" event is fired after
+    // "blur" event.
+    e.preventDefault();
+  }
+
+  function handlePrimaryActionClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+  }
+
+  const containerClasses = classNames(`${prefix}--combo-button__container`, {
+    [`${prefix}--combo-button__container--open`]: open,
+  });
+
+  const triggerClasses = classNames(`${prefix}--combo-button__trigger`);
+
+  return (
+    <div className={containerClasses} ref={containerRef}>
+      <Button
+        size={size}
+        kind={kind}
+        disabled={disabled}
+        onClick={handlePrimaryActionClick}>
+        {label}
+      </Button>
+      <IconButton
+        className={triggerClasses}
+        label="Additional actions"
+        size={size}
+        kind={kind}
+        disabled={disabled}
+        aria-haspopup
+        aria-expanded={open}
+        onClick={handleTriggerClick}
+        onMouseDown={handleTriggerMousedown}
+        aria-owns={id}>
+        <ChevronDown />
+      </IconButton>
+      <Menu
+        id={id}
+        // eslint-disable-next-line react/forbid-component-props
+        style={{
+          width: `${width}px`,
+        }}
+        label="Additional actions"
+        size={size}
+        open={open}
+        onClose={closeMenu}
+        x={position[0]}
+        y={position[1]}>
+        {children}
+      </Menu>
+    </div>
+  );
+}
+
+ComboButton.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered as additional actions for this ComboButton.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Specify whether the combo button should be disabled, or not.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify the type of button to be used as the base for the primary action and the trigger button.
+   */
+  kind: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
+
+  /**
+   * Provide the label to be renderd on the primary action button.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the primary action element is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the size of the Menu.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+export { ComboButton };
@@ -2,7 +2,7 @@ import { ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 
 # useContextMenu
 
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Menu)
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ContextMenu)
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

@@ -239,6 +239,7 @@ const Menu = React.forwardRef(function Menu(
         onBlur={handleBlur}
         // eslint-disable-next-line react/forbid-dom-props
         style={{
+          ...rest.style,
           left: `${position[0]}px`,
           top: `${position[1]}px`,
         }}>

@@ -271,6 +271,7 @@ export {
   MenuItemSelectable as unstable_MenuItemSelectable,
 } from './components/Menu';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2';
+export { ComboButton as unstable_ComboButton } from './components/ComboButton';
 export {
   PageSelector as unstable_PageSelector,
   Pagination as unstable_Pagination,

@@ -12,6 +12,7 @@
 @use 'checkbox';
 @use 'code-snippet';
 @use 'combo-box';
+@use 'combo-button';
 @use 'contained-list';
 @use 'content-switcher';
 @use 'copy-button';

@@ -0,0 +1,30 @@
+//
+// 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 '../../config' as *;
+@use '../../motion' as *;
+@use '../../utilities/convert' as *;
+
+/// Combo Button styles
+/// @access public
+/// @group combo-button
+@mixin combo-button {
+  .#{$prefix}--combo-button__container {
+    display: inline-flex;
+    column-gap: rem(1px);
+  }
+
+  .#{$prefix}--combo-button__trigger svg {
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--combo-button__container--open
+    .#{$prefix}--combo-button__trigger
+    svg {
+    transform: rotate(180deg);
+  }
+}
@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@forward 'combo-button';
+@use 'combo-button';
+
+@include combo-button.combo-button;