From 6b3b63ffa6f201da721748344cc571c0523fce88 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Thu, 10 Oct 2024 13:35:26 -0400
Subject: [PATCH] fix: do not shrink the toggle when put in a small container
 (#1450)

---
 src/Toggle/Toggle.story.tsx | 15 ++++++++++++++-
 src/Toggle/ToggleButton.tsx |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/Toggle/Toggle.story.tsx b/src/Toggle/Toggle.story.tsx
index a4575e51c..27ec307e0 100644
--- a/src/Toggle/Toggle.story.tsx
+++ b/src/Toggle/Toggle.story.tsx
@@ -1,11 +1,12 @@
 import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { boolean } from "@storybook/addon-knobs";
-import { Toggle, Button } from "../index";
+import { Toggle, Button, Box } from "../index";
 import { Flex } from "../Flex";
 import dashed from "../utils/dashed";
 
 const DashedToggle = dashed(Toggle);
+const DashedBox = dashed(Box);
 
 export const WithDifferentSizes = () => (
   <Flex gap="x2" alignItems="flex-start">
@@ -112,6 +113,18 @@ WithLongText.story = {
   name: "With long text",
 };
 
+export const WithContraintWidth = () => (
+  <DashedBox width="200px" padding="x2">
+    <Toggle
+      labelText="Toggle"
+      onText="This is a long On label for the toggle component."
+      offText="This is a long Off label for the toggle component."
+      defaultToggled
+      onChange={action("on change")}
+    />
+  </DashedBox>
+);
+
 export const ControlledToggle = () => (
   <Toggle
     labelText="Controlled Toggle"
diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx
index eda84af01..484c0800e 100644
--- a/src/Toggle/ToggleButton.tsx
+++ b/src/Toggle/ToggleButton.tsx
@@ -53,6 +53,7 @@ function Switch({ children, disabled, toggled, onClick }: SwitchProps) {
   return (
     <AnimatedBox
       position="relative"
+      flexShrink={0}
       height="24px"
       width="48px"
       bg={disabled ? "grey" : getSwitchBackground(toggled)}