Add split button demo to ButtonGroup popover example

packages/core/src/components/button/button-group.md

@@ -1,12 +1,12 @@
 @# Button group
 
-__ButtonGroup__ arranges multiple buttons in a horizontal or vertical group.
+**ButtonGroup** arranges multiple buttons in a horizontal or vertical group.
 
 @reactExample ButtonGroupExample
 
 @## Usage
 
-Most of __ButtonGroup__'s props are also supported by __Button__ directly; setting these props on __ButtonGroup__ will
+Most of **ButtonGroup**'s props are also supported by **Button** directly; setting these props on **ButtonGroup** will
 apply the same value to all buttons in the group. Note that most modifiers, once enabled on the group, cannot be
 overridden on child buttons (due to the cascading nature of CSS).
 
@@ -26,32 +26,33 @@ The component also supports all HTML `<div>` props.
 
 @## Usage with popovers
 
-__Button__ elements inside a __ButtonGroup__ can trivially be wrapped with a [__Popover__](#core/components/popover) to
-create complex toolbars.
+**Button** elements inside a **ButtonGroup** can be wrapped with a [**Popover**](#core/components/popover) to create
+complex toolbars or to provide split button functionality, allowing the action of a **Button** to be changed.
 
 @reactExample ButtonGroupPopoverExample
 
 @## Flex layout
 
-__ButtonGroup__ renders a CSS inline flex row (or column if vertical) and provides some modifer props for common
+**ButtonGroup** renders a CSS inline flex row (or column if vertical) and provides some modifer props for common
 flexbox patterns:
 
-- Enable the `fill` prop on a button group to make all buttons expand equally to
- fill the available space.
- - Buttons will expand horizontally by default, or vertically if the `vertical` prop is enabled.
- - Add the class `Classes.FIXED` to individual buttons to revert them to their initial sizes.
+- Enable the `fill` prop on a button group to make all buttons expand equally to
+ fill the available space.
 
-- Alternatively, enable the `fill` prop on specific buttons (instead of on the
- group) to expand them equally to fill the available space while other
- buttons retain their original sizes.
+ - Buttons will expand horizontally by default, or vertically if the `vertical` prop is enabled.
+ - Add the class `Classes.FIXED` to individual buttons to revert them to their initial sizes.
+
+- Alternatively, enable the `fill` prop on specific buttons (instead of on the
+ group) to expand them equally to fill the available space while other
+ buttons retain their original sizes.
 
 You can adjust the specific size of a button with the `flex-basis` or `width` CSS properties.
 
 @## Vertical layout
 
 Buttons in a vertical group all have the same width as the widest button in the group.
 
-Use the `alignText` prop to control icon and text alignment in the buttons. Set this prop on __ButtonGroup__ to affect
+Use the `alignText` prop to control icon and text alignment in the buttons. Set this prop on **ButtonGroup** to affect
 all buttons in the group, or set the prop on individual buttons directly.
 
 @## CSS API
@@ -60,6 +61,7 @@ all buttons in the group, or set the prop on individual buttons directly.
  <h5 class="@ns-heading">
 
 Deprecated API: use [`<ButtonGroup>`](#core/components/button-group)
+
 </h5>
 
 CSS APIs for Blueprint components are considered deprecated, as they are verbose, error-prone, and they

packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx

@@ -16,7 +16,7 @@
 
 import * as React from "react";
 
-import { Alignment, Button, ButtonGroup, H5, type IconName, Popover, Switch } from "@blueprintjs/core";
+import { Alignment, Button, ButtonGroup, H5, type IconName, Menu, MenuItem, Popover, Switch } from "@blueprintjs/core";
 import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 import { AlignmentSelect } from "./common/alignmentSelect";
@@ -70,6 +70,7 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
  {this.renderButton("Edit", "edit")}
  {this.renderButton("View", "eye-open")}
  </ButtonGroup>
+ <SplitButtonExample {...this.state} />
  </Example>
  );
  }
@@ -86,3 +87,32 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
 
  private handleAlignChange = (alignText: Alignment) => this.setState({ alignText });
 }
+
+const mergeOptions = ["Create a merge commit", "Squash and merge", "Rebase and merge"];
+
+function SplitButtonExample(props: ButtonGroupPopoverExampleState) {
+ const [selectedIndex, setSelectedIndex] = React.useState(0);
+ return (
+ <ButtonGroup {...props} aria-label="Button group with menu">
+ <Button text={mergeOptions[selectedIndex]} />
+ <Popover
+ content={
+ <Menu>
+ {mergeOptions.map((option, i) => (
+ <MenuItem
+ key={option}
+ text={option}
+ onClick={() => setSelectedIndex(i)}
+ active={i === selectedIndex}
+ />
+ ))}
+ </Menu>
+ }
+ minimal={true}
+ position="bottom-right"
+ >
+ <Button icon="caret-down" aria-label="Select merge method" />
+ </Popover>
+ </ButtonGroup>
+ );
+}

packages/docs-app/src/styles/_examples.scss

@@ -68,6 +68,13 @@
  }
 }
 
+#{example("ButtonGroupPopover")} {
+ .docs-example {
+ flex-direction: column;
+ gap: $pt-grid-size * 3;
+ }
+}
+
 #{example("CardList")} {
  .docs-example > div {
  flex-grow: 1;