Add docs/demo examples of ButtonGroups with intents

packages/demo-app/src/examples/ButtonGroupExample.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Button, ButtonGroup, Intent } from "@blueprintjs/core";
+
+import { ExampleCard } from "./ExampleCard";
+
+export class ButtonGroupExample extends React.PureComponent {
+    public render() {
+        return (
+            <div className="example-row">
+                <ExampleCard label="ButtonGroup" width={325}>
+                    {Object.values(Intent).map(intent => (
+                        <ButtonGroup key={`${intent}-button-group`}>
+                            <Button intent={intent as Intent} icon="database" text="Queries" />
+                            <Button intent={intent as Intent} icon="function" text="Functions" />
+                            <Button intent={intent as Intent} icon="cog" text="Options" />
+                        </ButtonGroup>
+                    ))}
+                </ExampleCard>
+            </div>
+        );
+    }
+}

packages/demo-app/src/examples/Examples.tsx

@@ -21,6 +21,7 @@ import { Classes } from "@blueprintjs/core";
 
 import { BreadcrumbExample } from "./BreadcrumbExample";
 import { ButtonExample } from "./ButtonExample";
+import { ButtonGroupExample } from "./ButtonGroupExample";
 import { CalloutExample } from "./CalloutExample";
 import { CheckboxRadioExample } from "./CheckboxRadioExample";
 import { DatePickerExample } from "./DatePickerExample";
@@ -51,6 +52,7 @@ export class Examples extends React.PureComponent {
             <div className={classNames("examples-container", className)}>
                 <BreadcrumbExample />
                 <ButtonExample />
+                <ButtonGroupExample />
                 <CalloutExample />
                 <CheckboxRadioExample />
                 <DatePickerExample />

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

@@ -16,15 +16,18 @@
 
 import * as React from "react";
 
-import { Alignment, AnchorButton, Button, ButtonGroup, H5, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Alignment, AnchorButton, Button, ButtonGroup, Classes, H5, Icon, Intent, Switch } from "@blueprintjs/core";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Tooltip2 } from "@blueprintjs/popover2";
 
 import { AlignmentSelect } from "./common/alignmentSelect";
+import { IntentSelect } from "./common/intentSelect";
 
 export interface IButtonGroupExampleState {
     alignText: Alignment;
     fill: boolean;
     iconOnly: boolean;
+    intent: Intent;
     minimal: boolean;
     large: boolean;
     vertical: boolean;
@@ -35,6 +38,7 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
         alignText: Alignment.CENTER,
         fill: false,
         iconOnly: false,
+        intent: Intent.NONE,
         large: false,
         minimal: false,
         vertical: false,
@@ -44,21 +48,46 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
 
     private handleIconOnlyChange = handleBooleanChange(iconOnly => this.setState({ iconOnly }));
 
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
 
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
     private handleVerticalChange = handleBooleanChange(vertical => this.setState({ vertical }));
 
     public render() {
-        const { iconOnly, ...bgProps } = this.state;
+        const { iconOnly, intent, ...bgProps } = this.state;
+        // props for every button in the group
+        const buttonProps = { intent };
+
+        const intentLabelInfo = (
+            <Tooltip2
+                content={
+                    <span className={Classes.TEXT_SMALL}>
+                        Intents are set individually on each button <br />
+                        in the group, not the ButtonGroup wrapper.
+                    </span>
+                }
+                placement="top"
+                minimal={true}
+            >
+                <span>
+                    Intent{" "}
+                    <span style={{ padding: 2, lineHeight: "16px", verticalAlign: "top" }}>
+                        <Icon className={Classes.TEXT_MUTED} icon="info-sign" size={12} />
+                    </span>
+                </span>
+            </Tooltip2>
+        );
         const options = (
             <>
                 <H5>Props</H5>
                 <Switch checked={this.state.fill} label="Fill" onChange={this.handleFillChange} />
                 <Switch checked={this.state.large} label="Large" onChange={this.handleLargeChange} />
                 <Switch checked={this.state.minimal} label="Minimal" onChange={this.handleMinimalChange} />
                 <Switch checked={this.state.vertical} label="Vertical" onChange={this.handleVerticalChange} />
+                <IntentSelect intent={this.state.intent} label={intentLabelInfo} onChange={this.handleIntentChange} />
                 <AlignmentSelect align={this.state.alignText} onChange={this.handleAlignChange} />
                 <H5>Example</H5>
                 <Switch checked={this.state.iconOnly} label="Icons only" onChange={this.handleIconOnlyChange} />
@@ -69,11 +98,14 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
             <Example options={options} {...this.props}>
                 {/* set `minWidth` so `alignText` will have an effect when vertical */}
                 <ButtonGroup style={{ minWidth: 200 }} {...bgProps}>
-                    <Button icon="database">{!iconOnly && "Queries"}</Button>
-                    <Button icon="function">{!iconOnly && "Functions"}</Button>
-                    <AnchorButton icon="cog" rightIcon="settings">
-                        {!iconOnly && "Options"}
-                    </AnchorButton>
+                    <Button {...buttonProps} icon="database" text={iconOnly ? undefined : "Queries"} />
+                    <Button {...buttonProps} icon="function" text={iconOnly ? undefined : "Functions"} />
+                    <AnchorButton
+                        {...buttonProps}
+                        icon="cog"
+                        rightIcon="settings"
+                        text={iconOnly ? undefined : "Options"}
+                    />
                 </ButtonGroup>
             </Example>
         );

packages/docs-app/src/examples/core-examples/common/intentSelect.tsx

@@ -27,14 +27,17 @@ const INTENTS = [
 ];
 
 export interface IIntentSelectProps {
-    inline?: boolean;
     intent: Intent;
+    label?: React.ReactNode;
     onChange: React.FormEventHandler<HTMLSelectElement>;
 }
 
 export const IntentSelect: React.FC<IIntentSelectProps> = props => (
     <Label>
-        Intent
+        {props.label}
         <HTMLSelect value={props.intent} onChange={props.onChange} options={INTENTS} />
     </Label>
 );
+IntentSelect.defaultProps = {
+    label: "Intent",
+};