palantir/blueprint

Add active menu styles to shortcuts for Date Range input

Open

#4,052 opened on Apr 9, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: datetimeType: enhancementhelp wanted

Description

Environment

  • Package version(s): 3.15.2
  • Browser and OS versions: Chrome

Feature request

Expose selectedShortcutIndex and onShortcutChange props to DateRange Input, similar to DateRangePicker

Examples

I'm looking to use DateRangeInput to allow selection of month(s) at a time. Usually, the users are interested in current month, and forward and backward a couple of months. Hence I'm providing them dynamic shortcuts, depending on their current month selection. Since the selected shortcut index isn't exposed, the component erroneously shows the previous month being selected. The shortcuts to months are dynamically generated, so when April is selected it looks so:

image

And when March is selected, and then re-opening it, the page loads with February selected since it is now at index 1: image

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
ReactTypeScriptBasic understanding of Blueprint components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the existing DateRangePicker implementation for similar props (see PR #3688). Locate the DateRangeInput component source code in Blueprint's date time package. Add 'selectedShortcutIndex' and 'onShortcutChange' props analogous to DateRangePicker, ensuring TypeScript types are updated and component behavior matches. Finally, update or add tests to cover the new functionality.