fix: do not shrink the toggle when put in a small container (#1450)

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"

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)}