WEB-8153: Calendar today indicator + disabled-day polish + audit cleanup#229
Open
codingwolf-at wants to merge 3 commits into
Open
WEB-8153: Calendar today indicator + disabled-day polish + audit cleanup#229codingwolf-at wants to merge 3 commits into
codingwolf-at wants to merge 3 commits into
Conversation
- Introduced a new story, TodayIndicator, demonstrating the visual representation of the current date with a 6px accent dot. - Enhanced existing tests to verify the dot's presence and dimensions when today is selected or unselected. - Updated comments to clarify the behavior of the today indicator and its interaction with selected states. - Refined styles for the today and disabled states to improve visual consistency and accessibility.
|
📚 Storybook preview: https://pr-229-propel-storybook.vamsi-906.workers.dev |
- Updated `CalendarProps` to omit additional props (`numberOfMonths`, `captionLayout`, `showWeekNumber`) that are not styled by propel tokens, ensuring layout consistency. - Introduced a stable `renderChevron` function to optimize the rendering of navigation chevrons, preventing unnecessary remounts. - Modified calendar button styles to use a shared `navButton` class for consistent disabled state representation using `aria-disabled`. - Updated stories to reflect changes in button accessibility and visual behavior when disabled.
codingwolf-at
changed the title
|
Linked to Plane Work Item(s) References This comment was auto-generated by Plane |
anmolsinghbhatia
requested changes
Jul 15, 2026
| @@ -30,12 +50,7 @@ export function Calendar(props: CalendarProps) { | |||
| classNames={calendarClassNames} | |||
There was a problem hiding this comment.
The supplied spec requires a Monday-first week order, but DayPicker defaults to Sunday and the new stories render Su first. Could we set weekStartsOn={1} here, while still allowing a deliberate consumer override?
| "[&:not([aria-selected])>button]:text-accent-primary [&>button]:font-semibold after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:size-1.5 after:rounded-full after:bg-(--txt-icon-accent-subtle)", | ||
| // Disabled days read as muted, non-interactive text — `opacity-60` on top of the disabled | ||
| // tone (the propel disabled convention) so they clearly recede from enabled days. | ||
| disabled: "[&>button]:text-disabled [&>button]:opacity-60 [&>button]:pointer-events-none", |
There was a problem hiding this comment.
The disabled-date spec uses the text/disabled token at full opacity. Adding opacity-60 makes it materially lighter than Figma; can we rely on text-disabled alone?
… state styles
- Set the calendar to start weeks on Monday by default (`weekStartsOn={1}`) to align with specifications.
- Enhanced comments to clarify the behavior of disabled day buttons, ensuring they match the design specifications without additional opacity.
- Adjusted styles for disabled days to maintain consistency with other disabled controls, improving visual clarity and accessibility.
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
2 participants
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.
Description
Adds a current-date indicator to
Calendar, sharpens the disabled-day treatment, and folds in a production-readiness audit pass ahead of locking the component.Features
icon/accent/subtledot, centered 4px above the bottom edge of the 40px day cell (Figma spec). Renders in every state, including inside a selected pill and mid-range.opacity-60on top of thetext-disabledtone so disabled days clearly recede from enabled ones (they were nearly indistinguishable before).Audit cleanup
CalendarPropsnow dropsnumberOfMonths/captionLayout/showWeekNumber.calendarClassNamesdoesn't style those layout modes, so they would have rendered with react-day-picker's unstyled default classes. Passing them is now a compile error instead of a silent broken layout.Chevronrender to module scope. It was defined inline incomponents, giving it a new identity every render, which made react-day-picker remount the chevron subtree each time.Stateselement story pinned nativedisabled, but the class dims viaaria-disabled:and react-day-picker setsaria-disabled(not nativedisabled) at the month bounds — so the dimmed nav state never actually rendered. Fixed the pinned attribute and added canary coverage (previously untested).navButtonconst, and aligned its disabled opacity50→60to match the system-wide disabled convention.Testing
vp check— clean (format, lint, types).TodayIndicator,Behavior,KeyboardNavigation(components);States/StatesCanary(elements). Canary now asserts dot geometry (6×6, bottom 4px), disabled opacity, and nav-disabled dim.Type of Change
Snapshot
Figma URL