From 74bd05bc495480693d8b66c6e5374fd949e83e0a Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Mon, 2 Jan 2023 16:56:19 -0800
Subject: [PATCH 1/6] fix(date-picker-day): end-range is now rounded and has
 the correct box-shadow.

---
 src/components/date-picker-day/date-picker-day.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/date-picker-day/date-picker-day.scss b/src/components/date-picker-day/date-picker-day.scss
index 25230c262a1..8e8ba856a7f 100644
--- a/src/components/date-picker-day/date-picker-day.scss
+++ b/src/components/date-picker-day/date-picker-day.scss
@@ -177,12 +177,12 @@
 :host([end-of-range]:not(:focus)) {
   :not(.calcite--rtl) {
     .day {
-      box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
+      box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
     }
   }
   .calcite--rtl {
     .day {
-      box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
+      box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
     }
   }
 }
@@ -221,7 +221,7 @@
 }
 
 :host([highlighted]:not([active]:focus)) .day {
-  @apply text-color-1 rounded-none;
+  @apply text-color-1 rounded-full;
 }
 
 :host([range-hover]:not([selected])) {

From aa7cbed68071a329b5aeceeda7ee01ac93933a99 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Mon, 2 Jan 2023 17:58:46 -0800
Subject: [PATCH 2/6] Range screenshots

---
 src/components/date-picker/date-picker.stories.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index 0b86985c5c0..cea3ea8485e 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -121,16 +121,14 @@ export const range = (): string =>
     )}
   </div>`;
 
+export const range_TestOnly = (): string =>
+  html`<div style="width: 400px">
+    <calcite-date-picker scale="m" range min="2022-02-02" max="2022-02-22"></calcite-date-picker>
+  </div>`;
+
 export const rangeRTL_TestOnly = (): string =>
   html`<div style="width: 400px">
-    ${create(
-      "calcite-date-picker",
-      createAttributes({ exceptions: ["min", "range", "dir"] }).concat([
-        { name: "dir", value: "rtl" },
-        { name: "min", value: "2016-08-09" },
-        { name: "range", value: "true" }
-      ])
-    )}
+    <calcite-date-picker dir="RTL" scale="m" range min="2022-02-02" max="2022-02-22"></calcite-date-picker>
   </div>`;
 
 export const darkThemeRTL_TestOnly = (): string =>

From 7314cc451a3189723b089c0709b5dfaec072fc8b Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Mon, 2 Jan 2023 19:07:45 -0800
Subject: [PATCH 3/6] range test selection

---
 .../date-picker/date-picker.stories.ts        | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index cea3ea8485e..18032ae6f01 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -121,15 +121,24 @@ export const range = (): string =>
     )}
   </div>`;
 
-export const range_TestOnly = (): string =>
+const selectRangeString = html`
+  <script>
+    let weekDays = document.querySelector(".week-days");
+    weekDays.querySelector("calcite-date-picker-day:first-child").selected = true;
+    weekDays.querySelector("calcite-date-picker-day:last-child").selected = true;
+  </script>
+`;
+export const range = (): string =>
   html`<div style="width: 400px">
-    <calcite-date-picker scale="m" range min="2022-02-02" max="2022-02-22"></calcite-date-picker>
-  </div>`;
+      <calcite-date-picker scale="m" range></calcite-date-picker>
+    </div>
+    ${selectRangeString}`;
 
-export const rangeRTL_TestOnly = (): string =>
+export const rangeRTL = (): string =>
   html`<div style="width: 400px">
-    <calcite-date-picker dir="RTL" scale="m" range min="2022-02-02" max="2022-02-22"></calcite-date-picker>
-  </div>`;
+      <calcite-date-picker dir="RTL" scale="m" range></calcite-date-picker>
+    </div>
+    ${selectRangeString}`;
 
 export const darkThemeRTL_TestOnly = (): string =>
   html`<div style="width: 400px">

From 16b8d4cae9c59e9ac7c07f9f7a7378868c5c60ee Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Mon, 2 Jan 2023 19:12:06 -0800
Subject: [PATCH 4/6] cleanup

---
 src/components/date-picker/date-picker.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index 18032ae6f01..559d1f9247c 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -128,13 +128,13 @@ const selectRangeString = html`
     weekDays.querySelector("calcite-date-picker-day:last-child").selected = true;
   </script>
 `;
-export const range = (): string =>
+export const range_TestOnly = (): string =>
   html`<div style="width: 400px">
       <calcite-date-picker scale="m" range></calcite-date-picker>
     </div>
     ${selectRangeString}`;
 
-export const rangeRTL = (): string =>
+export const rangeRTL_TestOnly = (): string =>
   html`<div style="width: 400px">
       <calcite-date-picker dir="RTL" scale="m" range></calcite-date-picker>
     </div>

From 5f9f8a77f3b19887bf1af37784326351360d4a3c Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 19 Jan 2023 15:50:17 -0800
Subject: [PATCH 5/6] WIP: fix white box shadow to work for start & end ranges
 for both RTL and LTR

---
 .../date-picker-day/date-picker-day.scss         | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/date-picker-day/date-picker-day.scss b/src/components/date-picker-day/date-picker-day.scss
index 8e8ba856a7f..66a85427c2d 100644
--- a/src/components/date-picker-day/date-picker-day.scss
+++ b/src/components/date-picker-day/date-picker-day.scss
@@ -161,19 +161,7 @@
   }
 }
 
-:host([start-of-range]:not(:focus)) {
-  :not(.calcite--rtl) {
-    .day {
-      box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
-    }
-  }
-  .calcite--rtl {
-    .day {
-      box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
-    }
-  }
-}
-
+:host([start-of-range]:not(:focus)),
 :host([end-of-range]:not(:focus)) {
   :not(.calcite--rtl) {
     .day {
@@ -182,7 +170,7 @@
   }
   .calcite--rtl {
     .day {
-      box-shadow: 0 0 0 -2px var(--calcite-ui-foreground-1);
+      box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
     }
   }
 }

From 8ae5c0c474f0786dc81bc16e1636f48f820b87c5 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 19 Jan 2023 18:39:27 -0800
Subject: [PATCH 6/6] WIP: cleanup

---
 .../date-picker-day/date-picker-day.scss      |  2 +-
 .../date-picker/date-picker.stories.ts        | 21 ++++---------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/date-picker-day/date-picker-day.scss b/src/components/date-picker-day/date-picker-day.scss
index 66a85427c2d..9fb65531b22 100644
--- a/src/components/date-picker-day/date-picker-day.scss
+++ b/src/components/date-picker-day/date-picker-day.scss
@@ -209,7 +209,7 @@
 }
 
 :host([highlighted]:not([active]:focus)) .day {
-  @apply text-color-1 rounded-full;
+  @apply text-color-1;
 }
 
 :host([range-hover]:not([selected])) {
diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index 9b17fc3ac10..c81431648ef 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -121,24 +121,11 @@ export const range = (): string =>
     )}
   </div>`;
 
-const selectRangeString = html`
-  <script>
-    let weekDays = document.querySelector(".week-days");
-    weekDays.querySelector("calcite-date-picker-day:first-child").selected = true;
-    weekDays.querySelector("calcite-date-picker-day:last-child").selected = true;
-  </script>
+export const rangeRTL_TestOnly = (): string => html`
+  <div style="width: 400px">
+    <calcite-date-picker dir="rtl" range></calcite-date-picker>
+  </div>
 `;
-export const range_TestOnly = (): string =>
-  html`<div style="width: 400px">
-      <calcite-date-picker scale="m" range></calcite-date-picker>
-    </div>
-    ${selectRangeString}`;
-
-export const rangeRTL_TestOnly = (): string =>
-  html`<div style="width: 400px">
-      <calcite-date-picker dir="RTL" scale="m" range></calcite-date-picker>
-    </div>
-    ${selectRangeString}`;
 
 export const darkModeRTL_TestOnly = (): string =>
   html`<div style="width: 400px">