palantir/blueprint

Generically typed selection UI

Open

#6695 opened on Feb 1, 2024

View on GitHub
 (0 comments) (2 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Status: needs proposalType: feature requesthelp wanted

Description

Feature request

Would be nice to have a selection UI that works with enums. SegmentedControl is nice but the callback is always string

Examples

const options: {label: string, value: MyEnum} = {...};

const handleValueChange = (newValue: MyEnum) => {...};

... 

<SegmentedControl<MyEnum> options={options} onValueChange={handleValueChange}>
...
</SegmentedControl>

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue requests adding generic type support to the `SegmentedControl` component so that the `onValueChange` callback receives an enum type instead of always string. The example shows desired usage with `<SegmentedControl<MyEnum>`. To implement, examine the current `SegmentedControl` component in the Blueprint source (likely in `packages/core/src/components/segmented control/`). The fix involves adding a generic type parameter to the component's props interface, propagating it to the `onValueChange` handler and the `value` prop. There are no existing comments or PRs to reference, so the implementation should follow existing patterns in the codebase for generic components (e.g., `InputGroup` or other form components). The change is localized and should include updated TypeScript types and possibly a test.