From 7e256618363ebb6805c37da8ebf5d7aa08a80a0f Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 28 Jul 2023 16:30:20 -0500
Subject: [PATCH 1/8] feat(switch): updates focus outline to be rounded

---
 .../calcite-components/src/components/switch/switch.scss    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index a45fe50433b..25e348ab4aa 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -52,6 +52,11 @@
   @apply focus-base w-auto;
 }
 
+.container {
+  @apply rounded-full
+  border;
+}
+
 .track {
   @apply bg-foreground-2
     border-color-2
@@ -125,4 +130,3 @@
 }
 
 @include hidden-form-input();
-@include base-component();

From 92dfc0cbb2c4e70132be33c27e731e5ebb0ad633 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 28 Jul 2023 16:38:33 -0500
Subject: [PATCH 2/8] remove border

---
 packages/calcite-components/src/components/switch/switch.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index 25e348ab4aa..d27d73cbc68 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -53,8 +53,7 @@
 }
 
 .container {
-  @apply rounded-full
-  border;
+  @apply rounded-full;
 }
 
 .track {

From 7c8e4ded21ee2534aad0c0d948c04c962955b073 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 28 Jul 2023 16:40:08 -0500
Subject: [PATCH 3/8] revert

---
 packages/calcite-components/src/components/switch/switch.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index d27d73cbc68..cd3a2c843a9 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -129,3 +129,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();

From fedca1aaa74979555d99b2082c858d2d8658ed62 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 28 Jul 2023 18:12:34 -0500
Subject: [PATCH 4/8] add focus story

---
 .../src/components/switch/switch.stories.ts           | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index ec993a493de..f7a18c5efbc 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -35,3 +35,14 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const disabled_TestOnly = (): string => html`<calcite-switch disabled checked></calcite-switch>`;
+
+export const Focus_TestOnly = (): string =>
+  html` <div>
+    <calcite-switch> </calcite-switch>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-date-picker");
+        await document.querySelector("calcite-switch").focus();
+      })();
+    </script>
+  </div>`;

From 2f4a7116d0e5942074fe1bb24eaf36cecc716bf6 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 31 Jul 2023 10:14:07 -0500
Subject: [PATCH 5/8] clean up

---
 .../src/components/switch/switch.stories.ts                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index f7a18c5efbc..402d9a96f79 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -37,12 +37,12 @@ darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 export const disabled_TestOnly = (): string => html`<calcite-switch disabled checked></calcite-switch>`;
 
 export const Focus_TestOnly = (): string =>
-  html` <div>
+  html`
     <calcite-switch> </calcite-switch>
     <script>
       (async () => {
-        await customElements.whenDefined("calcite-date-picker");
+        await customElements.whenDefined("calcite-switch");
         await document.querySelector("calcite-switch").focus();
       })();
     </script>
-  </div>`;
+  `;

From 2f9a0ecf97d9fb051c15b1aafb5093f7c4566545 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 31 Jul 2023 10:47:52 -0500
Subject: [PATCH 6/8] adds delay for screenshot

---
 .../src/components/switch/switch.stories.ts                   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index 402d9a96f79..b99bcaf3987 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -46,3 +46,7 @@ export const Focus_TestOnly = (): string =>
       })();
     </script>
   `;
+
+Focus_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};

From fd87e1c20e746d500399c44d183aa5713a7009b3 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 31 Jul 2023 11:31:49 -0500
Subject: [PATCH 7/8] refactor

---
 .../calcite-components/src/components/switch/switch.stories.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index b99bcaf3987..472d78ce0e6 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -42,7 +42,7 @@ export const Focus_TestOnly = (): string =>
     <script>
       (async () => {
         await customElements.whenDefined("calcite-switch");
-        await document.querySelector("calcite-switch").focus();
+        await document.querySelector("calcite-switch").setFocus();
       })();
     </script>
   `;

From d13c2e88d8bd55362611dfbec8c5edde7a5ff134 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 31 Jul 2023 12:10:00 -0500
Subject: [PATCH 8/8] add wraper to screenshot test

---
 .../src/components/switch/switch.stories.ts                   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index 472d78ce0e6..0fbbe3843e5 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -38,7 +38,9 @@ export const disabled_TestOnly = (): string => html`<calcite-switch disabled che
 
 export const Focus_TestOnly = (): string =>
   html`
-    <calcite-switch> </calcite-switch>
+    <div style="width:300px;height:300px; padding: 20px">
+      <calcite-switch> </calcite-switch>
+    </div>
     <script>
       (async () => {
         await customElements.whenDefined("calcite-switch");