[BpkScrollableCalendarGridList][BpkCalendarDate] Add minScrollable and isAnnotated props#4774
Open
Jan Bock (jan-bock) wants to merge 9 commits into
Open
[BpkScrollableCalendarGridList][BpkCalendarDate] Add minScrollable and isAnnotated props#4774Jan Bock (jan-bock) wants to merge 9 commits into
Jan Bock (jan-bock) wants to merge 9 commits into
Conversation
…d isAnnotated props Adds minScrollable?: Date to BpkScrollableCalendarGridList so consumers can extend the scrollable render range earlier than minDate without affecting the selection/blocking boundary — removes the need for FSC to hack minDate and re-block dates in a wrapper. Adds isAnnotated?: boolean to BpkCalendarDate which applies an inset ring box-shadow (accent colour) when true — removes the need for FSC to apply local SCSS via className for multi-city leg date indicators. Both props are optional and default to existing behaviour. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Jan Bock (jan-bock)
force-pushed
the
GOOSE-925-multicity-datetrail-refactor
branch
from
a7985fe to
e49a7c4
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because no GitHub Actions runner was available. Make sure your repository has a runner available to run Copilot's review, or add a copilot-setup-steps.yml file specifying one with the runs-on attribute. See the docs for more details.
Adds new optional props to extend scroll range in the scrollable calendar and to visually annotate individual dates, enabling FSC’s multi-city date picker use-cases without wrappers/overrides.
Changes:
- Add
minScrollable?: Dateto extend the rendered month range earlier thanminDatewhile keepingminDateas the blocking boundary. - Add
isAnnotated?: booleantoBpkCalendarDatewith a new--annotatedstyle and corresponding tests/snapshots.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx | Adds minScrollable and adjusts the computed start month anchor. |
| packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx | Adds a test intended to validate minScrollable behavior. |
| packages/bpk-component-calendar/src/BpkCalendarDate.tsx | Adds isAnnotated prop and applies bpk-calendar-date--annotated class. |
| packages/bpk-component-calendar/src/BpkCalendarDate.module.scss | Adds annotated ring styling suppressed for --selected. |
| packages/bpk-component-calendar/src/snapshots/BpkCalendarDate-test.tsx.snap | Updates snapshots for the new annotated variant. |
| packages/bpk-component-calendar/src/BpkCalendarDate-test.tsx | Adds tests for annotated class presence/absence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
Contributor
- Use startDate (derived from scrollAnchor) instead of minDate in the months useMemo dependency array so the list recomputes when minScrollable changes independently of minDate - Extend --annotated :not() selector to suppress the inset ring on all filled selection states (--start, --end, --single, --sameDay) not just --selected Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
…enders CalendarContainer passes props through to BpkCalendar which hardcodes DateComponent in composeCalendar — the custom component was never reaching the grid. Use withCalendarState + composeCalendar directly. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
- Use dynamic dates relative to today so the calendar opens on the current month (not Apr 2020 which is in the past) - Pass preventKeyboardFocus to suppress the --focused inset ring which was visually indistinct from --annotated in the demo Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4774 to see this build running in a browser. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Context
FSC (global-components) uses these components in a multi-city date picker where the scroll window must extend earlier than the selectable minimum (to show dates from other legs) and individual dates need a visual indicator. Previously FSC worked around the missing props by passing a modified `minDate` and re-blocking dates in a wrapper, and applying local SCSS via `className`. This PR moves both hacks into Backpack as first-class props.
Test plan
🤖 Generated with Claude Code