- change naming to adjacent-day;

Author: JoaoFerreira-FrontEnd

core/api.txt

@@ -528,8 +528,8 @@ ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
 ion-datetime,prop,readonly,boolean,false,false,false
+ion-datetime,prop,showAdjacentDays,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
-ion-datetime,prop,showDaysOutsideCurrentMonth,boolean | undefined,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false

core/src/components.d.ts

@@ -933,13 +933,13 @@ export namespace Components {
          */
         "reset": (startDate?: string) => Promise<void>;
         /**
-          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
          */
-        "showClearButton": boolean;
+        "showAdjacentDays": boolean;
         /**
-          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
+          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
-        "showDaysOutsideCurrentMonth"?: boolean;
+        "showClearButton": boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
@@ -5724,13 +5724,13 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
          */
-        "showClearButton"?: boolean;
+        "showAdjacentDays"?: boolean;
         /**
-          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
+          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
-        "showDaysOutsideCurrentMonth"?: boolean;
+        "showClearButton"?: boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */

core/src/components/datetime/datetime-interface.ts

@@ -15,7 +15,7 @@ export interface DatetimeParts {
   hour?: number;
   minute?: number;
   ampm?: 'am' | 'pm';
-  hiddenDay?: boolean;
+  adjacentDay?: boolean;
 }
 
 export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';

core/src/components/datetime/datetime.ios.scss

@@ -267,7 +267,7 @@
   color: current-color(contrast);
 }
 
-:host .calendar-day.calendar-day-hidden-day:not([disabled])  {
+:host .calendar-day.calendar-day-adjacent-day:not([disabled])  {
   color: $text-color-step-700;
 
   opacity: 1;

core/src/components/datetime/datetime.md.scss

@@ -128,7 +128,7 @@
   background: current-color(base);
 }
 
-:host .calendar-day.calendar-day-hidden-day:not([disabled]) {
+:host .calendar-day.calendar-day-adjacent-day:not([disabled]) {
   color: $text-color-step-500;
 
   opacity: 1;

core/src/components/datetime/datetime.scss

@@ -364,11 +364,11 @@
   opacity: 0.4;
 }
 
-:host .calendar-day.calendar-day-hidden-day {
+:host .calendar-day.calendar-day-adjacent-day {
   opacity: 0.4;
 }
 
-.calendar-day:not(.calendar-day-hidden-day):focus {
+.calendar-day:not(.calendar-day-adjacent-day):focus {
   background: current-color(base, 0.2);
 
   box-shadow: 0px 0px 0px 4px current-color(base, 0.2);

core/src/components/datetime/datetime.tsx

@@ -816,9 +816,9 @@ export class Datetime implements ComponentInterface {
      * to grab the correct calendar-day element.
      */
     const padding = currentMonth.querySelectorAll('.calendar-day-padding');
-    const { day, hiddenDay } = this.workingParts;
+    const { day, adjacentDay } = this.workingParts;
 
-    if (day === null || hiddenDay) {
+    if (day === null || adjacentDay) {
       return;
     }
 
@@ -2232,25 +2232,25 @@ export class Datetime implements ComponentInterface {
         }}
       >
         <div class="calendar-month-grid">
-          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showDaysOutsideCurrentMonth).map(
+          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map(
             (dateObject, index) => {
-              const { day, dayOfWeek, hiddenDay } = dateObject;
-              const { el, highlightedDates, isDateEnabled, multiple, showDaysOutsideCurrentMonth } = this;
+              const { day, dayOfWeek, adjacentDay } = dateObject;
+              const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
               let _month = month;
               let _year = year;
-              if (showDaysOutsideCurrentMonth && hiddenDay && day !== null) {
+              if (showAdjacentDays && adjacentDay && day !== null) {
                 if (day > 20) {
-                  // Leading with the hidden day from the previous month
-                  // if its a hidden day and is higher than '20' (last week even in feb)
+                  // Leading with the adjacent day from the previous month
+                  // if its a adjacent day and is higher than '20' (last week even in feb)
                   if (month === 1) {
                     _year = year - 1;
                     _month = 12;
                   } else {
                     _month = month - 1;
                   }
                 } else if (day < 15) {
-                  // Leading with the hidden day from the next month
-                  // if its a hidden day and is lower than '15' (first two weeks)
+                  // Leading with the adjacent day from the next month
+                  // if its a adjacent day and is lower than '15' (first two weeks)
                   if (month === 12) {
                     _year = year + 1;
                     _month = 1;
@@ -2260,7 +2260,7 @@ export class Datetime implements ComponentInterface {
                 }
               }
 
-              const referenceParts = { month: _month, day, year: _year, hiddenDay };
+              const referenceParts = { month: _month, day, year: _year, adjacentDay };
               const isCalendarPadding = day === null;
               const {
                 isActive,
@@ -2315,19 +2315,19 @@ export class Datetime implements ComponentInterface {
                * Custom highlight styles should not override the style for selected dates,
                * nor apply to "filler days" at the start of the grid.
                */
-              if (highlightedDates !== undefined && !isActive && day !== null && !hiddenDay) {
+              if (highlightedDates !== undefined && !isActive && day !== null && !adjacentDay) {
                 dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
               }
 
               let dateParts = undefined;
 
               // "Filler days" at the beginning of the grid should not get the calendar day
               // CSS parts added to them
-              if (!isCalendarPadding && !hiddenDay) {
+              if (!isCalendarPadding && !adjacentDay) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                   isCalDayDisabled ? ' disabled' : ''
                 }`;
-              } else if (hiddenDay) {
+              } else if (adjacentDay) {
                 dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
               }
 
@@ -2363,7 +2363,7 @@ export class Datetime implements ComponentInterface {
                       'calendar-day-active': isActive,
                       'calendar-day-constrained': isCalDayConstrained,
                       'calendar-day-today': isToday,
-                      'calendar-day-hidden-day': hiddenDay,
+                      'calendar-day-adjacent-day': adjacentDay,
                     }}
                     part={dateParts}
                     aria-hidden={isCalendarPadding ? 'true' : null}
@@ -2374,7 +2374,7 @@ export class Datetime implements ComponentInterface {
                         return;
                       }
 
-                      if (hiddenDay) {
+                      if (adjacentDay) {
                         //the user selected a day outside the current month, let's not focus on this button since the month will be re-render;
                         this.el.blur();
                       }
@@ -2384,7 +2384,7 @@ export class Datetime implements ComponentInterface {
                         month: _month,
                         day,
                         year: _year,
-                        hiddenDay: hiddenDay,
+                        adjacentDay: adjacentDay,
                       });
 
                       // multiple only needs date info, so we can wipe out other fields like time
@@ -2394,7 +2394,7 @@ export class Datetime implements ComponentInterface {
                             month: _month,
                             day,
                             year: _year,
-                            hiddenDay: hiddenDay,
+                            adjacentDay: adjacentDay,
                           },
                           isActive
                         );
@@ -2404,7 +2404,7 @@ export class Datetime implements ComponentInterface {
                           month: _month,
                           day,
                           year: _year,
-                          hiddenDay: hiddenDay,
+                          adjacentDay: adjacentDay,
                         });
                       }
                     }}

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: ShowDaysOutsideCustomMonth'), () => {
+    test('with custom-grid should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const customGrid = page.locator('#custom-grid');
+      await expect(customGrid).toHaveScreenshot(screenshot(`customGrid-with-adjacent-days`));
+    });
+
+    test('should set the first day of the week correctly', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const customDatetime = page.locator('#custom-calendar-days');
+      await expect(customDatetime).toHaveScreenshot(screenshot(`custom-calendar-with-adjacent-days`));
+    });
+
+    test('with specific date disabled  should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const specificDateDisabled = page.locator('#specificDate');
+      await expect(specificDateDisabled).toHaveScreenshot(screenshot(`specificDate-with-adjacent-days`));
+    });
+
+    test('with weekends disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const weekendsDisabled = page.locator('#weekends');
+      await expect(weekendsDisabled).toHaveScreenshot(screenshot(`weekendsDisabled-with-adjacent-days`));
+    });
+
+    test('with date range disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const dateRangeDisabled = page.locator('#dateRange');
+      await expect(dateRangeDisabled).toHaveScreenshot(screenshot(`dateRangeDisabled-with-adjacent-days`));
+    });
+
+    test('with month disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const monthDisabled = page.locator('#month');
+      await expect(monthDisabled).toHaveScreenshot(screenshot(`monthDisabled-with-adjacent-days`));
+    });
+
+    test('with specific display should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const display = page.locator('#display');
+      await expect(display).toHaveScreenshot(screenshot(`display-with-adjacent-days`));
+    });
+  });
+});