feat: SplitButton component

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `TextArea` component @lucivpav ([#1897](https://github.com/stardust-ui/react/pull/1897))
 - Export `bell-slash` and `bell-snooze` icon to Teams theme @musingh ([#1921](https://github.com/stardust-ui/react/pull/1921))
+- Add the `SplitButton` component @silviuavram ([#1789](https://github.com/stardust-ui/react/pull/1798))
 
 ### Documentation
 - Fix broken code editor in some doc site examples and improve error experience @levithomason ([#1906](https://github.com/stardust-ui/react/pull/1906))

docs/src/components/ComponentPlayground/ComponentPlayground.tsx

@@ -27,6 +27,7 @@ const unsupportedComponents = [
   'Portal',
   'Provider',
   'RadioGroup',
+  'SplitButton',
   'Toolbar',
   'Ref',
 ]

docs/src/examples/components/SplitButton/BestPractices/SplitButtonBestPractices.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentBestPractices from 'docs/src/components/ComponentBestPractices'
+
+const doList = [
+  'Use `aria-roledescription` with the value of `splitbutton` on the `button` slot to announce the proper semantics of the component.',
+  'Use `aria-describedby` on the `button` slot and an invisible text element to announce that the split button can be opened by Alt+ArrowDown.',
+]
+
+const dontList = []
+
+const SplitButtonBestPractices: React.FunctionComponent<{}> = () => {
+  return <ComponentBestPractices doList={doList} dontList={dontList} />
+}
+
+export default SplitButtonBestPractices

docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import { SplitButton } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: 'pdf',
+    content: 'Export to PDF',
+    icon: 'files-pdf',
+  },
+  {
+    key: 'pds',
+    content: 'Export to PDS',
+    icon: 'files-photoshop',
+  },
+  {
+    key: 'gif',
+    content: 'Export as GIF',
+    icon: 'files-gif',
+    disabled: true,
+  },
+  {
+    key: 'eps',
+    content: 'Export to EPS',
+    icon: 'files-illustrator',
+  },
+]
+
+const SplitButtonIconAndContentExampleShorthand = () => (
+  <SplitButton menu={items} button={items[0]} />
+)
+
+export default SplitButtonIconAndContentExampleShorthand

docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx

@@ -0,0 +1,21 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import { SplitButton } from '@stardust-ui/react'
+import * as React from 'react'
+
+const SplitButtonExampleToggleButtonShorthand = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open' })
+
+  return (
+    <SplitButton
+      menu={[
+        { key: 'group', content: 'New group message' },
+        { key: 'channel', content: 'New channel message' },
+      ]}
+      button="New conversation"
+      toggleButton={{ icon: open ? 'triangle-up' : 'triangle-down' }}
+      onOpenChange={(e, { open }) => setOpen(open)}
+    />
+  )
+}
+
+export default SplitButtonExampleToggleButtonShorthand

docs/src/examples/components/SplitButton/Slots/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Slots = () => (
+  <ExampleSection title="Slots">
+    <ComponentExample
+      title="Icon and Content"
+      description="A Split Button can have icon next to content."
+      examplePath="components/SplitButton/Slots/SplitButtonIconAndContentExample"
+    />
+    <ComponentExample
+      title="Toggle Button"
+      description="A Split Button can have its toggle button customized."
+      examplePath="components/SplitButton/Slots/SplitButtonToggleButtonExample"
+    />
+  </ExampleSection>
+)
+
+export default Slots

docs/src/examples/components/SplitButton/States/SplitButtonExampleDisabled.shorthand.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { SplitButton } from '@stardust-ui/react'
+
+const SplitButtonExampleDisabledShorthand = () => (
+  <SplitButton
+    disabled
+    menu={[
+      { key: 'group', content: 'New group message' },
+      { key: 'channel', content: 'New channel message' },
+    ]}
+    button="New conversation"
+  />
+)
+
+export default SplitButtonExampleDisabledShorthand

docs/src/examples/components/SplitButton/States/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Disabled"
+      description="A SplitButton can be disabled."
+      examplePath="components/SplitButton/States/SplitButtonExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States

docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { SplitButton } from '@stardust-ui/react'
+
+const SplitButtonExampleShorthand = () => (
+  <SplitButton
+    menu={[
+      { key: 'group', content: 'New group message' },
+      { key: 'channel', content: 'New channel message' },
+    ]}
+    button="New conversation"
+  />
+)
+
+export default SplitButtonExampleShorthand

docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { SplitButton } from '@stardust-ui/react'
+
+const SplitButtonExamplePrimaryShorthand = () => (
+  <SplitButton
+    menu={[
+      { key: 'group', content: 'New group message' },
+      { key: 'channel', content: 'New channel message' },
+    ]}
+    button="New conversation"
+    primary
+  />
+)
+
+export default SplitButtonExamplePrimaryShorthand

docs/src/examples/components/SplitButton/Types/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const SplitButton = () => (
+  <ExampleSection title="Split Button">
+    <ComponentExample
+      title="Split Button"
+      description="Buttons can be split into action and toggle."
+      examplePath="components/SplitButton/Types/SplitButtonExample"
+    />
+    <ComponentExample
+      title="Emphasis"
+      description="A SplitButton can be formatted to show primary level of emphasis."
+      examplePath="components/SplitButton/Types/SplitButtonExamplePrimary"
+    />
+  </ExampleSection>
+)
+
+export default SplitButton

docs/src/examples/components/SplitButton/Usage/SplitButtonMainOptionChangeExample.shorthand.tsx

@@ -0,0 +1,27 @@
+import { useNumberKnob } from '@stardust-ui/docs-components'
+import { SplitButton } from '@stardust-ui/react'
+import * as React from 'react'
+
+const items = [
+  { key: 'group', content: 'New group message' },
+  { key: 'channel', content: 'New channel message' },
+  { key: 'conversation', content: 'New conversation' },
+]
+
+const SplitButtonExampleMenuShorthand = () => {
+  const [activeIndex, setActiveIndex] = useNumberKnob({ name: 'activeIndex' })
+  const activeItem = items[activeIndex]
+
+  return (
+    <SplitButton
+      button={activeItem}
+      menu={{
+        activeIndex,
+        items,
+      }}
+      onMenuItemClick={(e, { index }) => setActiveIndex(index)}
+    />
+  )
+}
+
+export default SplitButtonExampleMenuShorthand

docs/src/examples/components/SplitButton/Usage/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Main option change"
+      description="A split button can have its main option changed based on last selection."
+      examplePath="components/SplitButton/Usage/SplitButtonMainOptionChangeExample"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/SplitButton/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import Types from './Types'
+import States from './States'
+import Slots from './Slots'
+
+const SplitButtonExamples = () => (
+  <>
+    <Types />
+    <States />
+    <Slots />
+  </>
+)
+
+export default SplitButtonExamples

packages/react/src/components/MenuButton/MenuButton.tsx

@@ -55,6 +55,14 @@ export interface MenuButtonProps extends StyledComponentProps<MenuButtonProps>,
   /** Defines whether popup is displayed. */
   open?: boolean
 
+  /**
+   * Called after user's click on a menu item.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onMenuItemClick?: ComponentEventHandler<MenuItemProps>
+
   /**
    * Event for request to change 'open' value.
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
@@ -122,6 +130,7 @@ export default class MenuButton extends AutoControlledComponent<MenuButtonProps,
       PropTypes.arrayOf(PropTypes.oneOf(['hover', 'focus', 'context'])),
     ]),
     open: PropTypes.bool,
+    onMenuItemClick: PropTypes.func,
     onOpenChange: PropTypes.func,
     position: PropTypes.oneOf(POSITIONS),
     target: PropTypes.any,
@@ -184,6 +193,7 @@ export default class MenuButton extends AutoControlledComponent<MenuButtonProps,
   handleMenuOverrides = (predefinedProps?: MenuProps) => ({
     onItemClick: (e: React.SyntheticEvent, itemProps: MenuItemProps) => {
       _.invoke(predefinedProps, 'onItemClick', e, itemProps)
+      _.invoke(this.props, 'onMenuItemClick', e, itemProps)
       if (!itemProps || !itemProps.menu) {
         // do not close if clicked on item with submenu
         this.setState({ open: false })