Skip to content

fix(datepicker): resolve visual inconsistencies with comparison ranges #18819

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Mar 13, 2020
Merged

fix(datepicker): resolve visual inconsistencies with comparison ranges #18819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 24 additions & 15 deletions src/material/datepicker/calendar-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,24 @@ $mat-calendar-range-end-body-cell-size:
cursor: pointer;
}

.mat-calendar-body-cell::before,
.mat-calendar-body-cell::after,
.mat-calendar-body-comparison-bridge-start::before {
.mat-calendar-body-cell {
// We use ::before to apply a background to the body cell, because we need to apply a border
// radius to the start/end which means that part of the element will be cut off, making
// hovering through all the cells look glitchy. We can't do it on the cell itself, because
// it's the one that has the event listener and it can't be on the cell content, because
// it always has a border radius.
content: '';
position: absolute;
top: $mat-calendar-body-cell-content-margin;
left: 0;
z-index: 0;
&::before, &::after {
content: '';
position: absolute;
top: $mat-calendar-body-cell-content-margin;
left: 0;
z-index: 0;

// We want the range background to be slightly shorter than the cell so
// that there's a gap when the range goes across multiple rows.
height: $mat-calendar-body-cell-content-size;
width: 100%;
// We want the range background to be slightly shorter than the cell so
// that there's a gap when the range goes across multiple rows.
height: $mat-calendar-body-cell-content-size;
width: 100%;
}
}

.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,
Expand Down Expand Up @@ -99,15 +99,24 @@ $mat-calendar-range-end-body-cell-size:
}
}

// Styles necessary to make RTL work.
[dir='rtl'] {
.mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after,
.mat-calendar-body-range-start.mat-calendar-body-range-end::before,
.mat-calendar-body-range-start.mat-calendar-body-range-end::after {
.mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {
@include _mat-calendar-body-range-right-radius;
}
}

// Prevents the extra overlap range indication from showing up when it's not supposed to.
.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {
// Note that the RTL selector here is redundant, but we need to keep it in order to
// raise the specificity since it can be overridden by some of the styles from above.
&, [dir='rtl'] & {
width: $mat-calendar-body-cell-content-size;
}
}

.mat-calendar-body-disabled {
cursor: default;
}
Expand Down
4 changes: 3 additions & 1 deletion src/material/datepicker/calendar-body.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,9 @@ export class MatCalendarBody implements OnChanges, OnDestroy {

if (cell) {
const value = cell.compareValue;
const hoveredValue = cell.enabled ? value : -1;

// Only set as the hovered value if we're after the start of the range.
const hoveredValue = (cell.enabled && value > this.startValue) ? value : -1;

if (hoveredValue !== this._hoveredValue) {
this._hoveredValue = hoveredValue;
Expand Down