Skip to content

Commit 9ca9ccd

Browse files
OS-susmitabhowmikOS-susmitabhowmik
committed
fix(datetime): fix SCSS lint errors in datetime.common.scss
1 parent 5c5f373 commit 9ca9ccd

3 files changed

Lines changed: 71 additions & 58 deletions

File tree

‎core/src/components/datetime/datetime.common.scss‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -276,9 +276,13 @@
276276
* the range-selection highlight track is positioned relative to the wrapper,
277277
* not the scroll container.
278278
*/
279-
position: relative;
280-
279+
/**
280+
* position: relative is required so that the ::before pseudo-element used for
281+
* the range-selection highlight track is positioned relative to the wrapper,
282+
* not the scroll container.
283+
*/
281284
display: flex;
285+
position: relative;
282286

283287
align-items: center;
284288
justify-content: center;
@@ -405,20 +409,20 @@
405409
* because those hide the element from the accessibility tree as well.
406410
*/
407411
:host .calendar-month-year-announce {
412+
@include padding(0px);
413+
@include margin(0px);
414+
408415
position: absolute;
409416

410417
width: 1px;
411418
height: 1px;
412419

413-
@include padding(0px);
414-
@include margin(0px);
420+
white-space: nowrap;
415421

416422
overflow: hidden;
417423

418424
clip: rect(0 0 0 0);
419425
clip-path: inset(50%);
420-
421-
white-space: nowrap;
422426
}
423427

424428
// Feature: monthNavigation="scroll" (vertical month scroll)
@@ -464,10 +468,10 @@
464468
:host(.datetime-month-navigation-scroll) .calendar-month-scroll-heading {
465469
@include padding(16px, 16px, 4px);
466470

471+
color: current-color(base);
472+
467473
font-size: 18px;
468474
font-weight: 600;
469-
470-
color: current-color(base);
471475
}
472476

473477
// Feature: monthYearPickerView="grid"
@@ -480,13 +484,13 @@
480484
* shadow part are fully preserved.
481485
*/
482486
:host .month-year-grid-container {
487+
@include padding(8px);
488+
483489
display: flex;
484490

485491
flex-direction: column;
486492

487493
overflow: auto;
488-
489-
@include padding(8px);
490494
}
491495

492496
:host .month-year-grid {
@@ -514,11 +518,11 @@
514518
* Buttons are pushed to the inline-end so they sit at the right (LTR) / left (RTL).
515519
*/
516520
:host .month-year-grid-year-nav {
521+
@include margin-horizontal(0px);
522+
517523
display: flex;
518524

519525
justify-content: flex-end;
520-
521-
@include margin-horizontal(0px);
522526
}
523527

524528
/**
@@ -530,17 +534,16 @@
530534
}
531535

532536
:host .month-year-grid-cell {
537+
@include padding(8px, 4px);
538+
@include border-radius(8px);
539+
533540
display: flex;
534541

535542
align-items: center;
536543
justify-content: center;
537544

538-
@include padding(8px, 4px);
539-
540545
border: none;
541546

542-
border-radius: 8px;
543-
544547
background: none;
545548

546549
color: currentColor;
@@ -580,14 +583,14 @@
580583
:host .calendar-day-wrapper-range-start::before,
581584
:host .calendar-day-wrapper-in-range::before,
582585
:host .calendar-day-wrapper-range-end::before {
583-
content: '';
584-
585586
position: absolute;
586587

587588
inset-block: 0;
588589

589590
background: current-color(base, 0.15);
590591

592+
content: "";
593+
591594
z-index: 0;
592595
}
593596

‎core/src/components/datetime/datetime.tsx‎

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -784,7 +784,12 @@ export class Datetime implements ComponentInterface {
784784
*/
785785
private get rangeActiveParts(): DatetimeRangeParts | undefined {
786786
const { activeParts } = this;
787-
if (!Array.isArray(activeParts) && activeParts !== null && typeof activeParts === 'object' && 'start' in activeParts) {
787+
if (
788+
!Array.isArray(activeParts) &&
789+
activeParts !== null &&
790+
typeof activeParts === 'object' &&
791+
'start' in activeParts
792+
) {
788793
return activeParts as DatetimeRangeParts;
789794
}
790795
return undefined;
@@ -817,7 +822,9 @@ export class Datetime implements ComponentInterface {
817822
this.setWorkingParts(validatedParts);
818823

819824
if (isMultipleMode) {
820-
const activePartsArray = Array.isArray(activeParts) ? (activeParts as DatetimeParts[]) : [activeParts as DatetimeParts];
825+
const activePartsArray = Array.isArray(activeParts)
826+
? (activeParts as DatetimeParts[])
827+
: [activeParts as DatetimeParts];
821828
if (removeDate) {
822829
this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
823830
} else {
@@ -1728,15 +1735,15 @@ export class Datetime implements ComponentInterface {
17281735
};
17291736

17301737
componentWillLoad() {
1731-
const { el, formatOptions, highlightedDates, multiple, selectionMode, monthNavigation, presentation, preferWheel } = this;
1738+
const { el, formatOptions, highlightedDates, multiple, selectionMode, monthNavigation, presentation, preferWheel } =
1739+
this;
17321740

17331741
/**
17341742
* When monthYearPickerView="grid" and the presentation is month/month-year/year,
17351743
* the grid is always visible (no toggle), so we must pre-initialize the year page.
17361744
*/
17371745
if (this.monthYearPickerView === 'grid') {
1738-
this.yearGridPageStart =
1739-
Math.floor(this.workingParts.year / YEAR_GRID_PAGE_SIZE) * YEAR_GRID_PAGE_SIZE;
1746+
this.yearGridPageStart = Math.floor(this.workingParts.year / YEAR_GRID_PAGE_SIZE) * YEAR_GRID_PAGE_SIZE;
17401747
}
17411748

17421749
/**
@@ -1782,10 +1789,7 @@ export class Datetime implements ComponentInterface {
17821789
}
17831790

17841791
if (monthNavigation === 'scroll' && preferWheel) {
1785-
printIonWarning(
1786-
'[ion-datetime] - monthNavigation="scroll" has no effect when preferWheel="true".',
1787-
el
1788-
);
1792+
printIonWarning('[ion-datetime] - monthNavigation="scroll" has no effect when preferWheel="true".', el);
17891793
}
17901794

17911795
if (highlightedDates !== undefined) {
@@ -1924,8 +1928,7 @@ export class Datetime implements ComponentInterface {
19241928
* Reset the year page to the one containing the current working year
19251929
* every time the grid picker opens.
19261930
*/
1927-
this.yearGridPageStart =
1928-
Math.floor(this.workingParts.year / YEAR_GRID_PAGE_SIZE) * YEAR_GRID_PAGE_SIZE;
1931+
this.yearGridPageStart = Math.floor(this.workingParts.year / YEAR_GRID_PAGE_SIZE) * YEAR_GRID_PAGE_SIZE;
19291932
}
19301933
};
19311934

@@ -3178,7 +3181,16 @@ export class Datetime implements ComponentInterface {
31783181
* Selecting a month or year cell updates `workingParts` and closes the overlay.
31793182
*/
31803183
private renderMonthYearGrid() {
3181-
const { locale, workingParts, minParts, maxParts, parsedMonthValues, parsedYearValues, datetimePreviousIcon, datetimeNextIcon } = this;
3184+
const {
3185+
locale,
3186+
workingParts,
3187+
minParts,
3188+
maxParts,
3189+
parsedMonthValues,
3190+
parsedYearValues,
3191+
datetimePreviousIcon,
3192+
datetimeNextIcon,
3193+
} = this;
31823194

31833195
const months = getMonthColumnData(locale, workingParts, minParts, maxParts, parsedMonthValues);
31843196

@@ -3235,18 +3247,36 @@ export class Datetime implements ComponentInterface {
32353247
size="small"
32363248
disabled={prevPageDisabled}
32373249
aria-label="Previous years"
3238-
onClick={() => { this.yearGridPageStart -= YEAR_GRID_PAGE_SIZE; }}
3250+
onClick={() => {
3251+
this.yearGridPageStart -= YEAR_GRID_PAGE_SIZE;
3252+
}}
32393253
>
3240-
<ion-icon dir={hostDir} aria-hidden="true" slot="icon-only" icon={datetimePreviousIcon} lazy={false} flipRtl></ion-icon>
3254+
<ion-icon
3255+
dir={hostDir}
3256+
aria-hidden="true"
3257+
slot="icon-only"
3258+
icon={datetimePreviousIcon}
3259+
lazy={false}
3260+
flipRtl
3261+
></ion-icon>
32413262
</ion-button>
32423263
<ion-button
32433264
fill="clear"
32443265
size="small"
32453266
disabled={nextPageDisabled}
32463267
aria-label="Next years"
3247-
onClick={() => { this.yearGridPageStart += YEAR_GRID_PAGE_SIZE; }}
3268+
onClick={() => {
3269+
this.yearGridPageStart += YEAR_GRID_PAGE_SIZE;
3270+
}}
32483271
>
3249-
<ion-icon dir={hostDir} aria-hidden="true" slot="icon-only" icon={datetimeNextIcon} lazy={false} flipRtl></ion-icon>
3272+
<ion-icon
3273+
dir={hostDir}
3274+
aria-hidden="true"
3275+
slot="icon-only"
3276+
icon={datetimeNextIcon}
3277+
lazy={false}
3278+
flipRtl
3279+
></ion-icon>
32503280
</ion-button>
32513281
</div>
32523282

‎core/src/components/datetime/test/range/index.html‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -47,32 +47,17 @@
4747
<div class="grid">
4848
<div class="grid-item">
4949
<h2>No Default Value</h2>
50-
<ion-datetime
51-
locale="en-US"
52-
id="noDefaultValue"
53-
presentation="date"
54-
selection-mode="range"
55-
></ion-datetime>
50+
<ion-datetime locale="en-US" id="noDefaultValue" presentation="date" selection-mode="range"></ion-datetime>
5651
</div>
5752

5853
<div class="grid-item">
5954
<h2>With Range Value</h2>
60-
<ion-datetime
61-
locale="en-US"
62-
id="withRangeValue"
63-
presentation="date"
64-
selection-mode="range"
65-
></ion-datetime>
55+
<ion-datetime locale="en-US" id="withRangeValue" presentation="date" selection-mode="range"></ion-datetime>
6656
</div>
6757

6858
<div class="grid-item">
6959
<h2>Start Only (Partial Range)</h2>
70-
<ion-datetime
71-
locale="en-US"
72-
id="startOnly"
73-
presentation="date"
74-
selection-mode="range"
75-
></ion-datetime>
60+
<ion-datetime locale="en-US" id="startOnly" presentation="date" selection-mode="range"></ion-datetime>
7661
</div>
7762

7863
<div class="grid-item">
@@ -101,12 +86,7 @@ <h2>With Min/Max</h2>
10186

10287
<div class="grid-item">
10388
<h2>Cross-Month Range</h2>
104-
<ion-datetime
105-
locale="en-US"
106-
id="crossMonth"
107-
presentation="date"
108-
selection-mode="range"
109-
></ion-datetime>
89+
<ion-datetime locale="en-US" id="crossMonth" presentation="date" selection-mode="range"></ion-datetime>
11090
</div>
11191
</div>
11292
</ion-content>

0 commit comments

Comments
 (0)