-
Notifications
You must be signed in to change notification settings - Fork 358
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(DatePicker/CalendarMonth): better range styling when some dates are disabled #10398
fix(DatePicker/CalendarMonth): better range styling when some dates are disabled #10398
Conversation
Preview: https://patternfly-react-pr-10398.surge.sh A11y report: https://patternfly-react-pr-10398-a11y.surge.sh |
const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current); | ||
|
||
const getElementToFocus = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you add a comment here to just explain the purpose of this function? I think this all looks good but I'm also finding the complexity of all this stuff pretty hard to follow 😂
@@ -412,8 +412,8 @@ export const CalendarMonth = ({ | |||
isAdjacentMonth && styles.modifiers.adjacentMonth, | |||
isToday && styles.modifiers.current, | |||
(isSelected || isRangeStart) && styles.modifiers.selected, | |||
!isValid && styles.modifiers.disabled, | |||
(isInRange || isRangeStart || isRangeEnd) && styles.modifiers.inRange, | |||
!isValid && !(isInRange || isRangeStart || isRangeEnd || isSelected) && styles.modifiers.disabled, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is due to the docs building error resolved in #10416, it looks fine locally.
EDIT: I rebased and the example looks good now
631b76f
to
62b23bd
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Latest build looks good when using the validator mentioned in the issue
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
* docs(Page): add example showing different type prop variants (#10352) * docs(Page): add example showing different type prop variants * docs(Page): make text color white in "subnav" section * docs(Page): rename IDs in example * docs(Table): update column management example to use link button for Cancel action (#10459) * feat(Modal): support ReactNode type for 'title' prop * fix(DatePicker/CalendarMonth): better range styling when some dates are disabled (#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description * feat(MenuToggle): add OUIA support * docs(menu-toggle): Adds docs for split button examples. (#10268) * docs(menu-toggle): Adds docs for split button examples. * Update names of split toggle examples. * Add description list basic demo (#10184) * add description list basic demo * fix DashboardWrapper not found issue * implement review comments * add divider and size * update content * fixed layout issues * Convert demo application to Vite * Upgrade Testing Library dependencies to latest version * upgrade to latest version * upgrade to latest version * upgrade to latest version * chore(deps): replace camel-case with change-case * Masthead: add demo that includes horizontal nav * chore: use protocol for workspace dependencies * chore(deps): upgrade to the latest version * chore(deps): upgrade to the latest version * chore(deps): upgrade to the latest version * chore(deps): remove unused dependency * chore(deps): upgrade to the latest version * chore(deps): ugprade Jest to latest version * chore(deps): upgrade to the latest version * chore(deps): upgrade dependencies to the latest version * chore(deps): upgrade to the latest version * chore(deps): update dependencies * update yarn file * more deps fixes * more deps * fix(build): get our custom TS transformers working again (#10477) * fix(build): get our custom TS transformers working again * chore(deps): Update lock file * Update lock file * chore(deps): Update yarn lock * fix demo app * cherry pick yarn changes * update yarn.lock * updatw snapshots * fix demo app * feat(templates): toggle props & improvements (#10473) * feat(templates): toggle props & improvements * remove toggleContent from typeahead template * update template names * update tests * added SimpleSelect tests * fix yarnlock * fix(CodeEditor) support Mac and PC shortcuts in example (#10472) * updatee lock file --------- Co-authored-by: adamviktora <84135613+adamviktora@users.noreply.github.com> Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Co-authored-by: Ajay Pratap <ajay.pratap233@gmail.com> Co-authored-by: Austin Sullivan <ausulliv@redhat.com> Co-authored-by: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Co-authored-by: Dominik Petřík <77832970+Dominik-Petrik@users.noreply.github.com>
Closes #9933
rangeStart
) may be disabled with thevalidators
propdateProp
first (rangeEnd) over rangeStart. If no dateProp is given, tries to autofocus therangeStart
over todayRelated to discussion on the working session - I decided not to attempt to find a closest focusable date, neither to add the prop to customize which month should be open. It might be useful only in rare use case like having a validator that disables large amount of dates (and it could complicate things more than be useful). - but let me know if it is something we might want to add