From 2c13599ea94273292db52e5b74374219f9c55527 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Mon, 31 Jul 2023 13:01:01 -0500
Subject: [PATCH] feat(switch): updates focus outline to be rounded (#7390)

**Related Issue:** #4633

## Summary

This PR will replace the block focus outline of `calcite-switch` with a
rounded one.

Before the change:


![25C47646-4B10-45A7-94E3-3CD884D35370_4_5005_c](https://github.com/Esri/calcite-design-system/assets/88453586/02313b88-8c2e-4f51-9b45-7b9631dff59f)


After the change:


![92B6D3BC-5B7E-4041-B424-BAB2F89E3C32_4_5005_c](https://github.com/Esri/calcite-design-system/assets/88453586/4d47a41f-dd8d-43f2-8390-1b89a9120440)
---
 .../src/components/switch/switch.scss           |  4 ++++
 .../src/components/switch/switch.stories.ts     | 17 +++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index a45fe50433b..cd3a2c843a9 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -52,6 +52,10 @@
   @apply focus-base w-auto;
 }
 
+.container {
+  @apply rounded-full;
+}
+
 .track {
   @apply bg-foreground-2
     border-color-2
diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index ec993a493de..0fbbe3843e5 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -35,3 +35,20 @@ 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 style="width:300px;height:300px; padding: 20px">
+      <calcite-switch> </calcite-switch>
+    </div>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-switch");
+        await document.querySelector("calcite-switch").setFocus();
+      })();
+    </script>
+  `;
+
+Focus_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};