From 77763571d4711d507d4456c23cdcf12c06107296 Mon Sep 17 00:00:00 2001 From: Gregory Douglas <2968519+ggdouglas@users.noreply.github.com> Date: Wed, 2 Oct 2024 13:42:44 -0400 Subject: [PATCH] Revert "Add split button demo to ButtonGroup popover example" This reverts commit c18e83c7b28cfd3af0fd342a1176997c9b1d612d. --- .../src/components/button/button-group.md | 28 ++++++++-------- .../buttonGroupPopoverExample.tsx | 32 +------------------ packages/docs-app/src/styles/_examples.scss | 7 ---- 3 files changed, 14 insertions(+), 53 deletions(-) diff --git a/packages/core/src/components/button/button-group.md b/packages/core/src/components/button/button-group.md index 2ec296a8ec..8f6040ff76 100644 --- a/packages/core/src/components/button/button-group.md +++ b/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,25 +26,24 @@ The component also supports all HTML `
` 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. @@ -52,7 +51,7 @@ You can adjust the specific size of a button with the `flex-basis` or `width` CS 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 @@ -61,7 +60,6 @@ all buttons in the group, or set the prop on individual buttons directly.
Deprecated API: use [``](#core/components/button-group) -
CSS APIs for Blueprint components are considered deprecated, as they are verbose, error-prone, and they diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx index 3c8a973ded..bc78d975d5 100644 --- a/packages/docs-app/src/examples/core-examples/buttonGroupPopoverExample.tsx +++ b/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, 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"; @@ -70,7 +70,6 @@ export class ButtonGroupPopoverExample extends React.PureComponent - ); } @@ -87,32 +86,3 @@ export class ButtonGroupPopoverExample extends React.PureComponent 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 ( - -