Add dropdown split example to button groups (#5131)

packages/react/src/ButtonGroup/ButtonGroup.features.stories.tsx

@@ -2,7 +2,9 @@ import React, {useState} from 'react'
 import type {Meta} from '@storybook/react'
 import ButtonGroup from './ButtonGroup'
 import {IconButton, Button} from '../Button'
-import {PlusIcon, DashIcon} from '@primer/octicons-react'
+import {PlusIcon, DashIcon, TriangleDownIcon} from '@primer/octicons-react'
+import {ActionMenu} from '../ActionMenu'
+import {ActionList} from '../ActionList'
 
 export default {
   title: 'Components/ButtonGroup/Features',
@@ -35,3 +37,39 @@ export const LoadingButtons = () => {
     </ButtonGroup>
   )
 }
+
+export const DropdownSplit = () => {
+  const actions = ['Action one', 'Action two', 'Action three']
+  const [selectedActionIndex, setSelectedActionIndex] = React.useState<number>(0)
+  const selectedAction = actions[selectedActionIndex]
+  return (
+    <ButtonGroup>
+      <Button
+        onClick={() => {
+          alert(`Activated ${selectedAction}`)
+        }}
+      >
+        {selectedAction}
+      </Button>
+      <ActionMenu>
+        <ActionMenu.Button icon={TriangleDownIcon}>More options</ActionMenu.Button>
+        <ActionMenu.Overlay>
+          <ActionList>
+            {actions.map((action, index) => {
+              return (
+                <ActionList.Item
+                  key={action}
+                  onSelect={() => {
+                    setSelectedActionIndex(index)
+                  }}
+                >
+                  {action}
+                </ActionList.Item>
+              )
+            })}
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </ButtonGroup>
+  )
+}