From 177689c48e6b574d8269dafe37fcdd6164e05e73 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 31 Aug 2021 17:59:44 +0200
Subject: [PATCH] fix(Toggle): fix issue with size prop (#9546)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../src/components/Toggle/Toggle-story.js     | 35 ++++++++++++-------
 .../react/src/components/Toggle/Toggle.js     |  2 +-
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
index 22c4ca0b0068..2baa582ce14a 100644
--- a/packages/react/src/components/Toggle/Toggle-story.js
+++ b/packages/react/src/components/Toggle/Toggle-story.js
@@ -40,23 +40,34 @@ export default {
 };
 
 export const Default = () => (
+  <>
+    <Toggle
+      labelText="Toggle (md)"
+      size="md"
+      labelA="Off"
+      labelB="On"
+      defaultToggled
+      className="some-class"
+      id="toggle-1"
+    />
+    <br />
+    <Toggle
+      labelText="Toggle (sm)"
+      size="sm"
+      defaultToggled
+      className="some-class"
+      id="toggle-2"
+    />
+  </>
+);
+
+export const Playground = () => (
   <Toggle
     defaultToggled
     {...toggleProps()}
     className="some-class"
-    id="toggle-1"
+    id="toggle-3"
   />
 );
 
 Default.storyName = 'Toggle';
-
-Default.parameters = {
-  info: {
-    text: `
-        Toggles are controls that are used to quickly switch between two possible states. The example below shows
-        an uncontrolled Toggle component. To use the Toggle component as a controlled component, set the toggled property.
-        Setting the toggled property will allow you to change the value dynamically, whereas setting the defaultToggled
-        prop will only set the value initially. This example has defaultToggled set to true.
-      `,
-  },
-};
diff --git a/packages/react/src/components/Toggle/Toggle.js b/packages/react/src/components/Toggle/Toggle.js
index aafcf79b394c..3d0f09321d91 100644
--- a/packages/react/src/components/Toggle/Toggle.js
+++ b/packages/react/src/components/Toggle/Toggle.js
@@ -100,7 +100,7 @@ class Toggle extends React.Component {
     });
 
     const toggleClasses = classNames(`${prefix}--toggle-input`, {
-      [`${prefix}--toggle-input--small`]: size,
+      [`${prefix}--toggle-input--small`]: size === 'sm',
     });
 
     const checkedProps = {};