From b30bef54efb98bd74129acf765a08f18a37c9fa0 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Wed, 18 May 2022 19:47:36 +0000
Subject: [PATCH 1/4] [docs-app] add intent to button group example

---
 .../core-examples/buttonGroupExample.tsx      | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
index 6f4bb7331b..69453fbc68 100644
--- a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
@@ -16,15 +16,17 @@
 
 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, H5, Intent, Switch } from "@blueprintjs/core";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 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 +37,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,6 +47,8 @@ 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 }));
@@ -51,7 +56,10 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
     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 options = (
             <>
                 <H5>Props</H5>
@@ -59,6 +67,7 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
                 <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} 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 +78,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>
         );

From 38f48d28facf3278c14f8e683df996a49c9c7023 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Wed, 18 May 2022 20:06:42 +0000
Subject: [PATCH 2/4] add tooltip info about intent

---
 .../core-examples/buttonGroupExample.tsx      | 21 +++++++++++++++++--
 .../core-examples/common/intentSelect.tsx     |  7 +++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
index 69453fbc68..3183c9b280 100644
--- a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
@@ -16,8 +16,9 @@
 
 import * as React from "react";
 
-import { Alignment, AnchorButton, Button, ButtonGroup, H5, Intent, Switch } from "@blueprintjs/core";
+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";
@@ -60,6 +61,22 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
         // 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 <Icon className={Classes.TEXT_MUTED} icon="info-sign" size={12} />
+                </span>
+            </Tooltip2>
+        );
         const options = (
             <>
                 <H5>Props</H5>
@@ -67,7 +84,7 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
                 <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} onChange={this.handleIntentChange} />
+                <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} />
diff --git a/packages/docs-app/src/examples/core-examples/common/intentSelect.tsx b/packages/docs-app/src/examples/core-examples/common/intentSelect.tsx
index 3189f1eb86..fa5c1d292b 100644
--- a/packages/docs-app/src/examples/core-examples/common/intentSelect.tsx
+++ b/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",
+};

From dc3b5741968fae9bb94aa499961e8551e8d2bdc6 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Wed, 18 May 2022 20:10:45 +0000
Subject: [PATCH 3/4] Adjust position of icon

---
 .../src/examples/core-examples/buttonGroupExample.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
index 3183c9b280..6865ab0d78 100644
--- a/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/buttonGroupExample.tsx
@@ -73,7 +73,10 @@ export class ButtonGroupExample extends React.PureComponent<IExampleProps, IButt
                 minimal={true}
             >
                 <span>
-                    Intent <Icon className={Classes.TEXT_MUTED} icon="info-sign" size={12} />
+                    Intent{" "}
+                    <span style={{ padding: 2, lineHeight: "16px", verticalAlign: "top" }}>
+                        <Icon className={Classes.TEXT_MUTED} icon="info-sign" size={12} />
+                    </span>
                 </span>
             </Tooltip2>
         );

From 69bd65c61dbf8091f233e382f5e53e17498cf1f8 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Wed, 18 May 2022 20:18:21 +0000
Subject: [PATCH 4/4] Add ButtonGroupExample to demo-app

---
 .../src/examples/ButtonGroupExample.tsx       | 39 +++++++++++++++++++
 packages/demo-app/src/examples/Examples.tsx   |  2 +
 2 files changed, 41 insertions(+)
 create mode 100644 packages/demo-app/src/examples/ButtonGroupExample.tsx

diff --git a/packages/demo-app/src/examples/ButtonGroupExample.tsx b/packages/demo-app/src/examples/ButtonGroupExample.tsx
new file mode 100644
index 0000000000..045b27b131
--- /dev/null
+++ b/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>
+        );
+    }
+}
diff --git a/packages/demo-app/src/examples/Examples.tsx b/packages/demo-app/src/examples/Examples.tsx
index 2349a1fecf..55c3c67a8d 100644
--- a/packages/demo-app/src/examples/Examples.tsx
+++ b/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 />