Skip to content

Commit

Permalink
Revert "Add split button demo to ButtonGroup popover example"
Browse files Browse the repository at this point in the history
This reverts commit c18e83c.
  • Loading branch information
ggdouglas committed Oct 2, 2024
1 parent c18e83c commit 7776357
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 53 deletions.
28 changes: 13 additions & 15 deletions packages/core/src/components/button/button-group.md
Original file line number Diff line number Diff line change
@@ -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).

Expand All @@ -26,33 +26,32 @@ The component also supports all HTML `<div>` props.

@## Usage with popovers

**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.
__Button__ elements inside a __ButtonGroup__ can trivially be wrapped with a [__Popover__](#core/components/popover) to
create complex toolbars.

@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.
- 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.

- 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.
- 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
Expand All @@ -61,7 +60,6 @@ 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import * as React from "react";

import { Alignment, Button, ButtonGroup, H5, type IconName, Menu, MenuItem, Popover, Switch } from "@blueprintjs/core";
import { Alignment, Button, ButtonGroup, H5, type IconName, Popover, Switch } from "@blueprintjs/core";
import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";

import { AlignmentSelect } from "./common/alignmentSelect";
Expand Down Expand Up @@ -70,7 +70,6 @@ export class ButtonGroupPopoverExample extends React.PureComponent<ExampleProps,
{this.renderButton("Edit", "edit")}
{this.renderButton("View", "eye-open")}
</ButtonGroup>
<SplitButtonExample {...this.state} />
</Example>
);
}
Expand All @@ -87,32 +86,3 @@ 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>
);
}
7 changes: 0 additions & 7 deletions packages/docs-app/src/styles/_examples.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,6 @@
}
}

#{example("ButtonGroupPopover")} {
.docs-example {
flex-direction: column;
gap: $pt-grid-size * 3;
}
}

#{example("CardList")} {
.docs-example > div {
flex-grow: 1;
Expand Down

0 comments on commit 7776357

Please sign in to comment.