fix(DatePicker/CalendarMonth): better range styling when some dates are disabled #10398
Conversation
This file contains 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
|
Preview: https://patternfly-react-pr-10398.surge.sh A11y report: https://patternfly-react-pr-10398-a11y.surge.sh |
nicolethoen
reviewed
May 22, 2024
| const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current); | ||
|
|
||
| const getElementToFocus = () => { |
There was a problem hiding this comment.
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.
We may need to apply this same logic elsewhere where we're applying disabled styling/setting disabled prop. Using the validator from the issue (date > from rather than date >= from), the rangeStart date for the second datepicker doesn't have the expected styling:
There was a problem hiding this comment.
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
adamviktora
force-pushed
the
datepicker-validation
branch
from
631b76f
to
62b23bd
Compare
thatblindgeye
approved these changes
Jun 3, 2024
nicolethoen
approved these changes
Jun 3, 2024
tlabaj
pushed a commit
to tlabaj/patternfly-react
that referenced
this pull request
Jun 17, 2024
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
tlabaj
pushed a commit
to tlabaj/patternfly-react
that referenced
this pull request
Jun 17, 2024
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
tlabaj
pushed a commit
to tlabaj/patternfly-react
that referenced
this pull request
Jun 24, 2024
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
tlabaj
pushed a commit
to tlabaj/patternfly-react
that referenced
this pull request
Jun 25, 2024
…re disabled (patternfly#10398) * fix(DatePicker/CalendarMonth): range styling when disabled dates * chore(Datepicker): getElementSelectorToFocus function description
gitdallas
pushed a commit
that referenced
this pull request
Jun 25, 2024
* 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>
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.
Closes #9933
rangeStart) may be disabled with thevalidatorspropdatePropfirst (rangeEnd) over rangeStart. If no dateProp is given, tries to autofocus therangeStartover 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