Collapse borders between buttons in outlined ButtonGroup

[ggdouglas]

Fixes #0000

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

This change applies a subset of functionality from #6966 (reverted in #7002) in order to collapse borders between Buttons in a ButtonGroup iff the outlined prop is applied on ButtonGroup. Conversely, the collapsed border behavior is not present if outlined is applied to individual buttons within the ButtonGroup. This allows consumers to either opt-in or opt-out of the collapsed border behavior. It also prevents a regression in styles to the default ButtonGroup where consumers are already using mixed variant/intent buttons within a ButtonGroup.

Example of where the collapsing border behavior does apply:

<ButtonGroup outlined={true}>
    <Button icon="floppy-disk" intent="success" text="Save" />
    <Button icon="undo" intent="primary" text="Undo" disabled={true} />
</ButtonGroup>

Examples of where the collapsing border behavior does not apply:

<ButtonGroup>
    <Button icon="floppy-disk" intent="success" text="Save" outlined={true} />
    <Button icon="undo" intent="primary" text="Undo" disabled={true} outlined={true} />
</ButtonGroup>

ButtonGroups with mixed use buttons (e.g. minimal and outlined) can also still co-exist if the variants are applied to individual Buttons:

<ButtonGroup>
    <Button icon="chevron-left" minimal={true} />
    <Button rightIcon="caret-down" outlined={true}>
        1
    </Button>
    <Button icon="chevron-right" minimal={true} />
</ButtonGroup>

Split Buttons

Additionally, this allows consumers of Blueprint to specify a split button without the double border between buttons:

<ButtonGroup outlined={true}>
    <Button text="Squash and merge" />
    <Popover
        minimal={true}
        position="bottom-left"
        content={...}
        fill={true}
    >
        <Button icon="caret-down" />
    </Popover>
</ButtonGroup>

A "split button" example has been added to the "Usage with popovers" section to demonstrate this:

Reviewers should focus on:

All possible combinations of <ButtonGroup> variants and <Button> children variants to avoid regressions in styles.

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

Collapse borders between buttons in outlined ButtonGroup

Check the box to generate changelog(s)

• Generate changelog entry

[svc-palantir-github]

Apply border collapsing behavior to buttons in outlined ButtonGroup

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

Add split button demo to ButtonGroup popover example

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ggdouglas]

Changes to this file include a subset of the same changes originally applied in #6966, but scoped only to the outlined ButtonGroup.

[ggdouglas]

Formatting changes were added here by prettier on editor save.

[svc-palantir-github]

Add split button demo to ButtonGroup popover example

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[evansjohnson]

LGTM - thanks for the docs updates to go along with this. Will approve when you're ready with the docs changes just had one small comment to consider.

[evansjohnson]

I don't think "split button" is the unique thing to call out here in the use with popovers section, maybe "menu button"?

Also not sure about allowing the action of a **Button** to be changed - pretty much anything could be done inside the popover so it feels weird to call out a specific case here. I think it would be weird if the popover just contained options that would change the wrapped button's behavior (implying it needs to be clicked again?).

[ggdouglas]

Yeah, fair! I originally modeled this after GitHub's own merge options button, which I've seen as a pretty common dropdown use pattern in other places. Totally fine with omitting this and leaving the docs as is if the example isn't adding value.

[ggdouglas]

Reverted 7776357

[svc-palantir-github]

Revert "Add split button demo to ButtonGroup popover example"

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.