Add `variant` prop to Button and ButtonGroup #7197

ggdouglas · 2025-01-24T22:19:59Z

Part of #7202

Proposed changes:

Adds a new variant prop to replace the (now deprecated) minimal and outlined props on Button/AnchorButton and ButtonGroup.

changelog-app · 2025-01-24T22:20:04Z

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

Description

Add variant prop to Button

Generate changelog in `packages/docs-app/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

Description

Add variant prop to Button

Check the box to generate changelog(s)

Generate changelog entry

svc-palantir-github · 2025-01-24T22:34:39Z

Add example and docs

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

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

svc-palantir-github · 2025-01-28T21:18:08Z

Add deprecation warnings in console

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

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

svc-palantir-github · 2025-01-28T21:49:38Z

Add "variant" prop to ButtonGroup component

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

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

svc-palantir-github · 2025-01-29T15:33:12Z

Move eslint deprecation lines for multi-line declaration

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

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

svc-palantir-github · 2025-02-04T16:29:23Z

Move eslint deprecation lines for multi-line declaration

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

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

ggdouglas · 2025-02-04T16:32:13Z

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

@@ -51,12 +65,12 @@ export const ButtonOutlinedExample: React.FC<ExampleProps> = props => {
    const code = dedent`
        <Button text="Outlined" outlined={true} />
        <Button text="Primary" outlined={true} intent="primary" />
-        <Button text="Disabled" minimal={true} disabled={true} />`;


This was a typo in the current Button outlined example (unrelated to the rest of these changes)

ggdouglas · 2025-02-04T16:34:09Z

packages/core/src/common/errors.ts

@@ -120,3 +120,11 @@ export const OVERLAY_WITH_MULTIPLE_CHILDREN_REQUIRES_CHILD_REFS =
    ns + ` <Overlay2> requires childRefs prop when rendering multiple child elements`;
 export const OVERLAY_CHILD_REQUIRES_KEY =
    ns + ` <Overlay2> requires each child element to have a unique key prop when childRefs is used`;
+
+// prop deprecation warnings


There will be quite a few other warnings related to prop deprecations in upcoming PRs, so creating a new section to house them here.

blueprint/packages/core/src/common/errors.ts

Lines 130 to 151 in 61b79df

export const BUTTON_WARN_LARGE = deprecatedSizeWarning("Button", "large");

export const BUTTON_WARN_SMALL = deprecatedSizeWarning("Button", "small");

export const BUTTON_GROUP_WARN_LARGE = deprecatedSizeWarning("ButtonGroup", "large");

export const CHECKBOX_WARN_LARGE = deprecatedSizeWarning("Checkbox", "large");

export const COMPOUND_TAG_WARN_LARGE = deprecatedSizeWarning("CompoundTagInput", "large");

export const FILE_INPUT_WARN_LARGE = deprecatedSizeWarning("FileInput", "large");

export const FILE_INPUT_WARN_SMALL = deprecatedSizeWarning("FileInput", "small");

export const INPUT_WARN_LARGE = deprecatedSizeWarning("InputGroup", "large");

export const INPUT_WARN_SMALL = deprecatedSizeWarning("InputGroup", "small");

export const MENU_WARN_LARGE = deprecatedSizeWarning("Menu", "large");

export const MENU_WARN_SMALL = deprecatedSizeWarning("Menu", "small");

export const NUMERIC_INPUT_WARN_LARGE = deprecatedSizeWarning("NumericInput", "large");

export const NUMERIC_INPUT_WARN_SMALL = deprecatedSizeWarning("NumericInput", "small");

export const RADIO_WARN_LARGE = deprecatedSizeWarning("Radio", "large");

export const SEGMENTED_CONTROL_WARN_LARGE = deprecatedSizeWarning("SegmentedControl", "large");

export const SEGMENTED_CONTROL_WARN_SMALL = deprecatedSizeWarning("SegmentedControl", "small");

export const SWITCH_WARN_LARGE = deprecatedSizeWarning("Switch", "large");

export const TABS_WARN_LARGE = deprecatedSizeWarning("Tabs", "large");

export const TAG_INPUT_WARN_LARGE = deprecatedSizeWarning("TagInput", "large");

export const TAG_WARN_LARGE = deprecatedSizeWarning("Tag", "large");

export const TEXT_AREA_WARN_LARGE = deprecatedSizeWarning("TextArea", "large");

export const TEXT_AREA_WARN_SMALL = deprecatedSizeWarning("TextArea", "small");

svc-palantir-github · 2025-02-04T16:45:10Z

Extract ButtonVariant type

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

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

svc-palantir-github · 2025-02-04T17:15:31Z

Organize jsdoc declarations

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

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

jscheiny · 2025-02-04T18:33:08Z

packages/core/src/components/button/buttons.tsx

+            [Classes.MINIMAL]: minimal || variant === "minimal",
+            [Classes.OUTLINED]: outlined || variant === "outlined",


This bit of code has some unintended side effects. I think that we should make the behavior be that variant supersedes both outlined and minimal. However, if we do the following:

<Button text="Button" variant="minimal" outlined={true} />

We end up with an outlined button instead of a minimal button as would be hoped for. The same issue occurs with ButtonGroups.

Technically, this behavior already exists between the minimal and outlined props where outlined overwrites the styles of minimal if both are applied simultaneously.

<Button text="Button" minimal={true} outlined={true} />

I think it is fair, however, that we wouldn't want to continue this behavior!

a2889bd wraps the logic into a utility function, providing the proper application of classes based on precedence. This technically changes the behavior of the presence of classes (for the case described above), but in practice it doesn't matter much since, as we've established, the outlined classes overwrite minimal anyways.

Edit: fd62b36 preserves the existing behavior

svc-palantir-github · 2025-02-04T21:01:14Z

Add comments heading up constants

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

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

svc-palantir-github · 2025-02-04T21:48:03Z

Update Button/ButtonGroup interactive examples with new variant select

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

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

svc-palantir-github · 2025-02-04T22:22:34Z

Update Button/ButtonGroup interactive examples with new variant select

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

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

svc-palantir-github · 2025-02-04T23:05:20Z

Refactor variantClass utility

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

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

svc-palantir-github · 2025-02-05T18:41:09Z

Simplify types passed to variantClass utility

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

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

jscheiny

LGTM! Excited about this change

jscheiny · 2025-02-05T20:50:51Z

packages/core/src/components/button/button-group.md

@@ -22,14 +22,29 @@ visual style, it’s recommended to apply the same `intent` to all buttons withi

 @reactCodeExample ButtonGroupIntentExample

+@## Variant
+
+Most of **ButtonGroup**'s props are also supported by [**Button**](#core/components/buttons) 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).


This bit feels a bit incongruous in this position, which is refering to a specific prop. Its also duplicated in the outlined and minimal section below. I think we should take this section and move it to the top of the page and remove it from both of these sections.

ggdouglas mentioned this pull request Jan 28, 2025

Proposal: Consolidate minimal and outlined props on Button components #7202

Open

ggdouglas changed the title ~~Add variant prop to Button~~ Add variant prop to Button and ButtonGroup Jan 28, 2025

ggdouglas force-pushed the gdouglas/proposal-button-variant branch from 723e7cc to a71f72a Compare February 4, 2025 16:15

ggdouglas commented Feb 4, 2025

View reviewed changes

ggdouglas marked this pull request as ready for review February 4, 2025 16:34

jscheiny reviewed Feb 4, 2025

View reviewed changes

ggdouglas and others added 13 commits February 4, 2025 17:05

Add variant prop to Button/AnchorButton components

b7d898d

Add example and docs

bb2658d

Add deprecation warnings in console

e0d45fe

Add "variant" prop to ButtonGroup component

234759c

Move eslint deprecation lines for multi-line declaration

86b626d

Move warning constants in errors.ts

33de37a

Extract ButtonVariant type

27d40b4

Organize jsdoc declarations

25fb9d0

Consolidate Button variant class logic into utility function

a2889bd

Include gaps in Button variant example

11d3105

Add comments heading up constants

3b50b01

Migrate all internal components from minimal to variant

297d62a

Update Button/ButtonGroup interactive examples with new variant select

cd08b19

ggdouglas force-pushed the gdouglas/proposal-button-variant branch from e96ff83 to cd08b19 Compare February 4, 2025 22:08

ggdouglas requested a review from jscheiny February 4, 2025 22:09

ggdouglas added Package: core Domain: API labels Feb 4, 2025

Refactor variantClass utility

3660d04

ggdouglas added 2 commits February 5, 2025 13:06

Preserve existing class resolution behavior for minimal/outlined props

fd62b36

Simplify types passed to variantClass utility

86746b6

ggdouglas force-pushed the gdouglas/proposal-button-variant branch from abf4155 to 86746b6 Compare February 5, 2025 18:26

jscheiny approved these changes Feb 5, 2025

View reviewed changes

jscheiny reviewed Feb 5, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `variant` prop to Button and ButtonGroup #7197

Add `variant` prop to Button and ButtonGroup #7197

ggdouglas commented Jan 24, 2025 •

edited

Loading

changelog-app bot commented Jan 24, 2025

svc-palantir-github commented Jan 24, 2025

svc-palantir-github commented Jan 28, 2025

svc-palantir-github commented Jan 28, 2025

svc-palantir-github commented Jan 29, 2025

svc-palantir-github commented Feb 4, 2025

ggdouglas Feb 4, 2025

ggdouglas Feb 4, 2025

svc-palantir-github commented Feb 4, 2025

svc-palantir-github commented Feb 4, 2025

jscheiny Feb 4, 2025

ggdouglas Feb 4, 2025 •

edited

Loading

svc-palantir-github commented Feb 4, 2025

svc-palantir-github commented Feb 4, 2025

svc-palantir-github commented Feb 4, 2025

svc-palantir-github commented Feb 4, 2025

svc-palantir-github commented Feb 5, 2025

jscheiny left a comment

jscheiny Feb 5, 2025

	export const BUTTON_WARN_LARGE = deprecatedSizeWarning("Button", "large");
	export const BUTTON_WARN_SMALL = deprecatedSizeWarning("Button", "small");
	export const BUTTON_GROUP_WARN_LARGE = deprecatedSizeWarning("ButtonGroup", "large");
	export const CHECKBOX_WARN_LARGE = deprecatedSizeWarning("Checkbox", "large");
	export const COMPOUND_TAG_WARN_LARGE = deprecatedSizeWarning("CompoundTagInput", "large");
	export const FILE_INPUT_WARN_LARGE = deprecatedSizeWarning("FileInput", "large");
	export const FILE_INPUT_WARN_SMALL = deprecatedSizeWarning("FileInput", "small");
	export const INPUT_WARN_LARGE = deprecatedSizeWarning("InputGroup", "large");
	export const INPUT_WARN_SMALL = deprecatedSizeWarning("InputGroup", "small");
	export const MENU_WARN_LARGE = deprecatedSizeWarning("Menu", "large");
	export const MENU_WARN_SMALL = deprecatedSizeWarning("Menu", "small");
	export const NUMERIC_INPUT_WARN_LARGE = deprecatedSizeWarning("NumericInput", "large");
	export const NUMERIC_INPUT_WARN_SMALL = deprecatedSizeWarning("NumericInput", "small");
	export const RADIO_WARN_LARGE = deprecatedSizeWarning("Radio", "large");
	export const SEGMENTED_CONTROL_WARN_LARGE = deprecatedSizeWarning("SegmentedControl", "large");
	export const SEGMENTED_CONTROL_WARN_SMALL = deprecatedSizeWarning("SegmentedControl", "small");
	export const SWITCH_WARN_LARGE = deprecatedSizeWarning("Switch", "large");
	export const TABS_WARN_LARGE = deprecatedSizeWarning("Tabs", "large");
	export const TAG_INPUT_WARN_LARGE = deprecatedSizeWarning("TagInput", "large");
	export const TAG_WARN_LARGE = deprecatedSizeWarning("Tag", "large");
	export const TEXT_AREA_WARN_LARGE = deprecatedSizeWarning("TextArea", "large");
	export const TEXT_AREA_WARN_SMALL = deprecatedSizeWarning("TextArea", "small");

		[Classes.MINIMAL]: minimal \|\| variant === "minimal",
		[Classes.OUTLINED]: outlined \|\| variant === "outlined",

Add variant prop to Button and ButtonGroup #7197

Are you sure you want to change the base?

Add variant prop to Button and ButtonGroup #7197

Conversation

ggdouglas commented Jan 24, 2025 • edited Loading

Part of #7202

Proposed changes:

changelog-app bot commented Jan 24, 2025

Generate changelog in packages/core/changelog/@unreleased

Generate changelog in packages/docs-app/changelog/@unreleased

svc-palantir-github commented Jan 24, 2025

Add example and docs

svc-palantir-github commented Jan 28, 2025

Add deprecation warnings in console

svc-palantir-github commented Jan 28, 2025

Add "variant" prop to ButtonGroup component

svc-palantir-github commented Jan 29, 2025

Move eslint deprecation lines for multi-line declaration

svc-palantir-github commented Feb 4, 2025

Move eslint deprecation lines for multi-line declaration

ggdouglas Feb 4, 2025

Choose a reason for hiding this comment

ggdouglas Feb 4, 2025

Choose a reason for hiding this comment

svc-palantir-github commented Feb 4, 2025

Extract ButtonVariant type

svc-palantir-github commented Feb 4, 2025

Organize jsdoc declarations

jscheiny Feb 4, 2025

Choose a reason for hiding this comment

ggdouglas Feb 4, 2025 • edited Loading

Choose a reason for hiding this comment

svc-palantir-github commented Feb 4, 2025

Add comments heading up constants

svc-palantir-github commented Feb 4, 2025

Update Button/ButtonGroup interactive examples with new variant select

svc-palantir-github commented Feb 4, 2025

Update Button/ButtonGroup interactive examples with new variant select

svc-palantir-github commented Feb 4, 2025

Refactor variantClass utility

svc-palantir-github commented Feb 5, 2025

Simplify types passed to variantClass utility

jscheiny left a comment

Choose a reason for hiding this comment

jscheiny Feb 5, 2025

Choose a reason for hiding this comment

Add `variant` prop to Button and ButtonGroup #7197

Add `variant` prop to Button and ButtonGroup #7197

ggdouglas commented Jan 24, 2025 •

edited

Loading

Generate changelog in `packages/core/changelog/@unreleased`

Generate changelog in `packages/docs-app/changelog/@unreleased`

ggdouglas Feb 4, 2025 •

edited

Loading