From 98d32c69ca79ff20e4933b8f4626a5616f62c2c5 Mon Sep 17 00:00:00 2001
From: mkrds <mkordas@pgs-soft.com>
Date: Tue, 22 Jun 2021 11:40:53 +0200
Subject: [PATCH] feat(button-toggle): enhance button toggle visuals

Enhance ButtonToggle visuals and add new size prop
---
 cypress/fixtures/themes/themes.json           |   6 +-
 .../button-toggle-group.spec.js.snap          |  31 +-
 .../__snapshots__/button-toggle.spec.js.snap  | 107 ++++---
 .../button-toggle/button-toggle.component.js  |  15 +-
 .../button-toggle/button-toggle.d.ts          |   2 +
 .../button-toggle/button-toggle.spec.js       |  81 ++++-
 .../button-toggle/button-toggle.stories.mdx   | 303 +++++++++++++-----
 .../button-toggle/button-toggle.style.js      |  73 ++++-
 8 files changed, 439 insertions(+), 179 deletions(-)

diff --git a/cypress/fixtures/themes/themes.json b/cypress/fixtures/themes/themes.json
index 48e025421c..3af841f70b 100644
--- a/cypress/fixtures/themes/themes.json
+++ b/cypress/fixtures/themes/themes.json
@@ -1,8 +1,8 @@
 {
     "button-toggle": {
-        "mint": "rgb(0, 64, 46)",
-        "aegean": "rgb(0, 68, 114)",
-        "none": "rgb(0, 69, 0)"
+        "mint": "rgb(230, 246, 241)",
+        "aegean": "rgb(230, 241, 250)",
+        "none": "rgb(230, 245, 230)"
     },
     "common": {
         "mint": "rgb(0, 129, 93)",
diff --git a/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap b/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
index 90fe29c3ce..e75eb498df 100644
--- a/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
+++ b/src/components/button-toggle-group/__snapshots__/button-toggle-group.spec.js.snap
@@ -21,22 +21,24 @@ exports[`ButtonToggleGroup Modern theme renders correctly with default settings
 .c6 {
   display: inline-block;
   position: relative;
-  height: 38px;
+  box-sizing: border-box;
+  height: 40px;
   padding: 0 24px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid #668592;
-  font-size: 14px;
   background-color: #FFFFFF;
 }
 
-input:checked ~ .c6 {
-  color: #FFFFFF;
-  background-color: #00402E;
+.c6 .c8 {
+  color: #000000;
 }
 
-input:checked ~ .c6 .c8 {
-  color: #FFFFFF;
+input:checked ~ .c6.c6 {
+  background-color: #E6F6F1;
+  border-color: #006046;
+  cursor: auto;
 }
 
 input:focus ~ .c6 {
@@ -44,9 +46,14 @@ input:focus ~ .c6 {
   z-index: 100;
 }
 
-.c6:hover {
-  background-color: #E6F6F1;
-  border-color: #00402E;
+input:not(:checked) ~ .c6:hover {
+  background-color: #006046;
+  border-color: #006046;
+  color: #FFFFFF;
+}
+
+input:not(:checked) ~ .c6:hover .c8 {
+  color: #FFFFFF;
 }
 
 .c4 {
@@ -55,7 +62,7 @@ input:focus ~ .c6 {
 }
 
 .c4:not(:first-of-type) {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .c5 {
@@ -116,6 +123,7 @@ input:focus ~ .c6 {
           htmlFor="guid-12345"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
+          size="medium"
         >
           <div
             className="c7"
@@ -145,6 +153,7 @@ input:focus ~ .c6 {
           htmlFor="guid-12345"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
+          size="medium"
         >
           <div
             className="c7"
diff --git a/src/components/button-toggle/__snapshots__/button-toggle.spec.js.snap b/src/components/button-toggle/__snapshots__/button-toggle.spec.js.snap
index 40b6444c32..6af703efe8 100644
--- a/src/components/button-toggle/__snapshots__/button-toggle.spec.js.snap
+++ b/src/components/button-toggle/__snapshots__/button-toggle.spec.js.snap
@@ -21,22 +21,24 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
 .c2 {
   display: inline-block;
   position: relative;
-  height: 38px;
+  box-sizing: border-box;
+  height: 40px;
   padding: 0 24px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid #668592;
-  font-size: 14px;
   background-color: #FFFFFF;
 }
 
-input:checked ~ .c2 {
-  color: #FFFFFF;
-  background-color: #004500;
+.c2 .c8 {
+  color: #000000;
 }
 
-input:checked ~ .c2 .c7 {
-  color: #FFFFFF;
+input:checked ~ .c2.c2 {
+  background-color: #E6F5E6;
+  border-color: #006300;
+  cursor: auto;
 }
 
 input:focus ~ .c2 {
@@ -44,9 +46,14 @@ input:focus ~ .c2 {
   z-index: 100;
 }
 
-.c2:hover {
-  background-color: #E6F5E6;
-  border-color: #004500;
+input:not(:checked) ~ .c2:hover {
+  background-color: #006300;
+  border-color: #006300;
+  color: #FFFFFF;
+}
+
+input:not(:checked) ~ .c2:hover .c8 {
+  color: #FFFFFF;
 }
 
 .c5 .c3 {
@@ -61,13 +68,19 @@ input:focus ~ .c2 {
   flex-direction: column;
 }
 
+.c7 .c3 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 .c0 {
   display: inline-block;
   vertical-align: middle;
 }
 
 .c0:not(:first-of-type) {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .c0:not(:first-of-type) {
@@ -97,6 +110,7 @@ input:focus ~ .c2 {
     <label
       className="c2"
       htmlFor="guid-12345"
+      size="medium"
     >
       <div
         className="c3 c4"
@@ -120,6 +134,7 @@ input:focus ~ .c2 {
     <label
       className="c2"
       htmlFor="guid-12345"
+      size="medium"
     >
       <div
         className="c3 c4"
@@ -132,7 +147,7 @@ input:focus ~ .c2 {
 `;
 
 exports[`ButtonToggle when the aegean theme is set renders correct styles 1`] = `
-.c4 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -149,31 +164,27 @@ exports[`ButtonToggle when the aegean theme is set renders correct styles 1`] =
   height: 100%;
 }
 
-.c5 .c3 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 .c2 {
   display: inline-block;
   position: relative;
-  height: 38px;
+  box-sizing: border-box;
+  height: 40px;
   padding: 0 24px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid #668592;
-  font-size: 14px;
   background-color: #FFFFFF;
 }
 
-input:checked ~ .c2 {
-  color: #FFFFFF;
-  background-color: #004472;
+.c2 .c4 {
+  color: #000000;
 }
 
-input:checked ~ .c2 .c6 {
-  color: #FFFFFF;
+input:checked ~ .c2.c2 {
+  background-color: #E6F1FA;
+  border-color: #005C9A;
+  cursor: auto;
 }
 
 input:focus ~ .c2 {
@@ -181,9 +192,14 @@ input:focus ~ .c2 {
   z-index: 100;
 }
 
-.c2:hover {
-  background-color: #E6F1FA;
-  border-color: #004472;
+input:not(:checked) ~ .c2:hover {
+  background-color: #005C9A;
+  border-color: #005C9A;
+  color: #FFFFFF;
+}
+
+input:not(:checked) ~ .c2:hover .c4 {
+  color: #FFFFFF;
 }
 
 .c0 {
@@ -192,7 +208,7 @@ input:focus ~ .c2 {
 }
 
 .c0:not(:first-of-type) {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .c1 {
@@ -217,9 +233,10 @@ input:focus ~ .c2 {
   <label
     className="c2"
     htmlFor="guid-12345"
+    size="medium"
   >
     <div
-      className="c3 c4"
+      className="c3"
     >
       Button
     </div>
@@ -248,22 +265,24 @@ exports[`ButtonToggle when the mint theme is set renders correct styles 1`] = `
 .c2 {
   display: inline-block;
   position: relative;
-  height: 38px;
+  box-sizing: border-box;
+  height: 40px;
   padding: 0 24px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid #668592;
-  font-size: 14px;
   background-color: #FFFFFF;
 }
 
-input:checked ~ .c2 {
-  color: #FFFFFF;
-  background-color: #00402E;
+.c2 .c4 {
+  color: #000000;
 }
 
-input:checked ~ .c2 .c4 {
-  color: #FFFFFF;
+input:checked ~ .c2.c2 {
+  background-color: #E6F6F1;
+  border-color: #006046;
+  cursor: auto;
 }
 
 input:focus ~ .c2 {
@@ -271,9 +290,14 @@ input:focus ~ .c2 {
   z-index: 100;
 }
 
-.c2:hover {
-  background-color: #E6F6F1;
-  border-color: #00402E;
+input:not(:checked) ~ .c2:hover {
+  background-color: #006046;
+  border-color: #006046;
+  color: #FFFFFF;
+}
+
+input:not(:checked) ~ .c2:hover .c4 {
+  color: #FFFFFF;
 }
 
 .c0 {
@@ -282,7 +306,7 @@ input:focus ~ .c2 {
 }
 
 .c0:not(:first-of-type) {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .c1 {
@@ -307,6 +331,7 @@ input:focus ~ .c2 {
   <label
     className="c2"
     htmlFor="guid-12345"
+    size="medium"
   >
     <div
       className="c3"
diff --git a/src/components/button-toggle/button-toggle.component.js b/src/components/button-toggle/button-toggle.component.js
index 197d4fff42..f30f2d3ad1 100644
--- a/src/components/button-toggle/button-toggle.component.js
+++ b/src/components/button-toggle/button-toggle.component.js
@@ -14,16 +14,17 @@ import { InputGroupContext } from "../../__internal__/input-behaviour";
 
 const ButtonToggle = (props) => {
   const {
-    name,
+    buttonIcon,
+    buttonIconSize,
     checked,
-    grouped,
     children,
     disabled,
-    buttonIcon,
-    buttonIconSize,
+    grouped,
+    name,
+    onBlur,
     onChange,
     onFocus,
-    onBlur,
+    size,
     value,
   } = props;
   const { onMouseEnter, onMouseLeave } = useContext(InputGroupContext);
@@ -70,6 +71,7 @@ const ButtonToggle = (props) => {
         htmlFor={inputGuid}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
+        size={size}
       >
         <StyledButtonToggleContentWrapper>
           {icon}
@@ -91,6 +93,8 @@ ButtonToggle.propTypes = {
   onFocus: PropTypes.func,
   /** Callback triggered by blur event on the input. */
   onBlur: PropTypes.func,
+  /** ButtonToggle size */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
   /** buttonIcon to render. */
   buttonIcon: PropTypes.string,
   /** Sets the size of the buttonIcon (eg. large) */
@@ -108,6 +112,7 @@ ButtonToggle.propTypes = {
 };
 
 ButtonToggle.defaultProps = {
+  size: "medium",
   buttonIconSize: "small",
 };
 
diff --git a/src/components/button-toggle/button-toggle.d.ts b/src/components/button-toggle/button-toggle.d.ts
index 69a4f29b5e..c913ac14c9 100644
--- a/src/components/button-toggle/button-toggle.d.ts
+++ b/src/components/button-toggle/button-toggle.d.ts
@@ -6,6 +6,8 @@ export interface ButtonToggleProps {
   buttonIcon?: string;
   /** Sets the size of the buttonIcon (eg. large) */
   buttonIconSize?: OptionsHelper.SizesType;
+  /** ButtonToggle size */
+  size?: "small" | "medium" | "large";
   /** Set the checked value of the radio button */
   checked?: boolean;
   /** A required prop. This is the button text. */
diff --git a/src/components/button-toggle/button-toggle.spec.js b/src/components/button-toggle/button-toggle.spec.js
index ac905275ea..b88e96a113 100644
--- a/src/components/button-toggle/button-toggle.spec.js
+++ b/src/components/button-toggle/button-toggle.spec.js
@@ -166,25 +166,76 @@ describe("ButtonToggle", () => {
         );
         expect(wrapper).toMatchSnapshot();
       });
-      it("renders correct styles for a large icon", () => {
-        const wrapper = renderWithTheme({
-          theme,
-          buttonIcon: "add",
-          buttonIconSize: "large",
-        });
-        assertStyleMatch(
-          {
-            minWidth: "104px",
-            height: "102px",
-            padding: "0 16px",
-          },
-          wrapper.find("label")
-        );
-      });
     }
   );
 
   describe("General styling", () => {
+    const heightConfig = {
+      small: 32,
+      medium: 40,
+      large: 48,
+    };
+
+    const fontSizeConfig = {
+      small: 14,
+      medium: 14,
+      large: 16,
+    };
+
+    const paddingConfig = {
+      small: 16,
+      medium: 24,
+      large: 32,
+    };
+
+    const heightLargeIconConfig = {
+      small: 80,
+      medium: 96,
+      large: 112,
+    };
+
+    const paddingLargeIconConfig = {
+      small: 32,
+      medium: 40,
+      large: 48,
+    };
+
+    describe.each(["small", "medium", "large"])(
+      "renders correct styles for %s size",
+      (size) => {
+        it("without icon", () => {
+          const wrapper = render({
+            size,
+            buttonIcon: "add",
+            buttonIconSize: "large",
+          });
+
+          assertStyleMatch(
+            {
+              height: `${heightLargeIconConfig[size]}px`,
+              padding: `0 ${paddingLargeIconConfig[size]}px`,
+              fontSize: `${fontSizeConfig[size]}px`,
+            },
+            wrapper.find(StyledButtonToggleLabel)
+          );
+        });
+
+        it("with large icon", () => {
+          const wrapper = render({
+            size,
+          });
+
+          assertStyleMatch(
+            {
+              height: `${heightConfig[size]}px`,
+              padding: `0 ${paddingConfig[size]}px`,
+              fontSize: `${fontSizeConfig[size]}px`,
+            },
+            wrapper.find(StyledButtonToggleLabel)
+          );
+        });
+      }
+    );
     it("renders correctly when disabled", () => {
       const wrapper = render({
         disabled: true,
diff --git a/src/components/button-toggle/button-toggle.stories.mdx b/src/components/button-toggle/button-toggle.stories.mdx
index 327501b683..3e7e1b968f 100644
--- a/src/components/button-toggle/button-toggle.stories.mdx
+++ b/src/components/button-toggle/button-toggle.stories.mdx
@@ -1,153 +1,281 @@
-import { useState } from 'react';
-import { Meta, Story, Preview, Props} from '@storybook/addon-docs/blocks';
-import { action } from '@storybook/addon-actions';
-import ButtonToggle from '../button-toggle';
+import { useState } from "react";
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { action } from "@storybook/addon-actions";
+import ButtonToggle from "../button-toggle";
 
-<Meta
-  title="Button Toggle"
-  parameters={{ info: { disable: true }}}
-/>
+<Meta title="Button Toggle" parameters={{ info: { disable: true } }} />
 
 # Button Toggle
 
 Press one of the buttons to make selection. ButtonToggle component should be used when user has to make a choice between a small number of options.
 
 ## Contents
+
 - [Quick Start](#quick-start)
 - [Designer Notes](#designer-notes)
 - [Examples](#examples)
 - [Props](#props)
 
-## Quick Start 
+## Quick Start
 
 To use the `ButtonToggle` component you have to import the `<ButtonToggle />` component:
 
 ```javascript
-import ButtonToggle from 'carbon-react/lib/components/button-toggle';
+import ButtonToggle from "carbon-react/lib/components/button-toggle";
 ```
 
-## Designer Notes 
+## Designer Notes
 
 - An icon could be added to make the meaning of an option clearer.
 - This component should not be used as part of the `Form`, `ButtonToggleGroup` should be used instead.
 
 ## Examples
-### Default 
+
+### Default
 
 <Preview>
-  <Story name='default'>
+  <Story name="default">
     <div>
-      <ButtonToggle
-        name='default'
-        key='foo'
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        name='default'
-        key='bar'
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        name='default'
-        key='baz'
-     >Baz</ButtonToggle>
+      <ButtonToggle name="default" key="foo">
+        Foo
+      </ButtonToggle>
+      <ButtonToggle name="default" key="bar">
+        Bar
+      </ButtonToggle>
+      <ButtonToggle name="default" key="baz">
+        Baz
+      </ButtonToggle>
     </div>
   </Story>
 </Preview>
 
-### Disabled
+### Default with small icon
 
 <Preview>
-  <Story name='disabled'>
+  <Story name="default with small icon">
     <div>
-      <ButtonToggle
-        name='disabled'
-        key='foo'
-        disabled
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        name='disabled'
-        key='bar'
-        disabled
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        name='disabled'
-        key='baz'
-        disabled
-      >Baz</ButtonToggle>
+      <ButtonToggle name="sizes" key="foo" buttonIcon="add">
+        Add
+      </ButtonToggle>
+      <ButtonToggle name="sizes" key="bar" buttonIcon="share">
+        Share
+      </ButtonToggle>
+      <ButtonToggle name="sizes" key="baz" buttonIcon="tick">
+        Tick
+      </ButtonToggle>
     </div>
   </Story>
 </Preview>
 
-### Grouped
+### Default with large icon
 
 <Preview>
-  <Story name='grouped'>
+  <Story name="default with large icon">
     <div>
       <ButtonToggle
-        name='grouped'
-        key='foo'
-        grouped
-      >Foo</ButtonToggle>
+        name="sizes"
+        key="foo"
+        buttonIcon="add"
+        buttonIconSize="large"
+      >
+        Add
+      </ButtonToggle>
       <ButtonToggle
-        name='grouped'
-        key='bar'
-        grouped
-      >Bar</ButtonToggle>
+        name="sizes"
+        key="bar"
+        buttonIcon="share"
+        buttonIconSize="large"
+      >
+        Share
+      </ButtonToggle>
       <ButtonToggle
-        name='grouped'
-        key='baz'
-        grouped
-      >Baz</ButtonToggle>
+        name="sizes"
+        key="baz"
+        buttonIcon="tick"
+        buttonIconSize="large"
+      >
+        Tick
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Small
+
+<Preview>
+  <Story name="small">
+    <div>
+      <ButtonToggle size="small" name="sizes" key="foo">
+        Add
+      </ButtonToggle>
+      <ButtonToggle size="small" name="sizes" key="bar">
+        Share
+      </ButtonToggle>
+      <ButtonToggle size="small" name="sizes" key="baz">
+        Tick
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Small with small icon
+
+<Preview>
+  <Story name="small with small icon">
+    <div>
+      <ButtonToggle size="small" name="sizes" key="foo" buttonIcon="add">
+        Add
+      </ButtonToggle>
+      <ButtonToggle size="small" name="sizes" key="bar" buttonIcon="share">
+        Share
+      </ButtonToggle>
+      <ButtonToggle size="small" name="sizes" key="baz" buttonIcon="tick">
+        Tick
+      </ButtonToggle>
     </div>
   </Story>
 </Preview>
 
-### With large icon
+### Small with large icon
 
 <Preview>
-  <Story name='with large icon'>
+  <Story name="small with large icon">
     <div>
       <ButtonToggle
-        name='sizes'
-        key='foo'
-        buttonIcon='add'
-        buttonIconSize='large'
-      >add</ButtonToggle>
+        size="small"
+        name="sizes"
+        key="foo"
+        buttonIcon="add"
+        buttonIconSize="large"
+      >
+        Add
+      </ButtonToggle>
       <ButtonToggle
-        name='sizes'
-        key='bar'
-        buttonIcon='share'
-        buttonIconSize='large'
-      >share</ButtonToggle>
+        size="small"
+        name="sizes"
+        key="bar"
+        buttonIcon="share"
+        buttonIconSize="large"
+      >
+        Share
+      </ButtonToggle>
       <ButtonToggle
-        name='sizes'
-        key='baz'
-        buttonIcon='tick'
-        buttonIconSize='large'
-      >tick</ButtonToggle>
+        size="small"
+        name="sizes"
+        key="baz"
+        buttonIcon="tick"
+        buttonIconSize="large"
+      >
+        Tick
+      </ButtonToggle>
     </div>
   </Story>
 </Preview>
 
-### With small icon
+### Large
 
 <Preview>
-  <Story name='with small icon'>
+  <Story name="large">
+    <div>
+      <ButtonToggle size="large" name="sizes" key="foo">
+        Add
+      </ButtonToggle>
+      <ButtonToggle size="large" name="sizes" key="bar">
+        Share
+      </ButtonToggle>
+      <ButtonToggle size="large" name="sizes" key="baz">
+        Tick
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Large with small icon
+
+<Preview>
+  <Story name="large with small icon">
+    <div>
+      <ButtonToggle size="large" name="sizes" key="foo" buttonIcon="add">
+        Add
+      </ButtonToggle>
+      <ButtonToggle size="large" name="sizes" key="bar" buttonIcon="share">
+        Share
+      </ButtonToggle>
+      <ButtonToggle size="large" name="sizes" key="baz" buttonIcon="tick">
+        Tick
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Large with large icon
+
+<Preview>
+  <Story name="large with large icon">
     <div>
       <ButtonToggle
-        name='sizes'
-        key='foo'
-        buttonIcon='add'
-      >add</ButtonToggle>
+        size="large"
+        name="sizes"
+        key="foo"
+        buttonIcon="add"
+        buttonIconSize="large"
+      >
+        Add
+      </ButtonToggle>
       <ButtonToggle
-        name='sizes'
-        key='bar'
-        buttonIcon='share'
-      >share</ButtonToggle>
+        size="large"
+        name="sizes"
+        key="bar"
+        buttonIcon="share"
+        buttonIconSize="large"
+      >
+        Share
+      </ButtonToggle>
       <ButtonToggle
-        name='sizes'
-        key='baz'
-        buttonIcon='tick'
-      >tick</ButtonToggle>
+        size="large"
+        name="sizes"
+        key="baz"
+        buttonIcon="tick"
+        buttonIconSize="large"
+      >
+        Tick
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name="disabled">
+    <div>
+      <ButtonToggle name="disabled" key="foo" disabled>
+        Foo
+      </ButtonToggle>
+      <ButtonToggle name="disabled" key="bar" disabled>
+        Bar
+      </ButtonToggle>
+      <ButtonToggle name="disabled" key="baz" disabled>
+        Baz
+      </ButtonToggle>
+    </div>
+  </Story>
+</Preview>
+
+### Grouped
+
+<Preview>
+  <Story name="grouped">
+    <div>
+      <ButtonToggle name="grouped" key="foo" grouped>
+        Foo
+      </ButtonToggle>
+      <ButtonToggle name="grouped" key="bar" grouped>
+        Bar
+      </ButtonToggle>
+      <ButtonToggle name="grouped" key="baz" grouped>
+        Baz
+      </ButtonToggle>
     </div>
   </Story>
 </Preview>
@@ -155,4 +283,5 @@ import ButtonToggle from 'carbon-react/lib/components/button-toggle';
 ## Props
 
 ### Button Toggle
+
 <Props of={ButtonToggle} />
diff --git a/src/components/button-toggle/button-toggle.style.js b/src/components/button-toggle/button-toggle.style.js
index 5a5dfaa267..01f763bada 100644
--- a/src/components/button-toggle/button-toggle.style.js
+++ b/src/components/button-toggle/button-toggle.style.js
@@ -3,6 +3,36 @@ import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 
+const heightConfig = {
+  small: 32,
+  medium: 40,
+  large: 48,
+};
+
+const fontSizeConfig = {
+  small: 14,
+  medium: 14,
+  large: 16,
+};
+
+const paddingConfig = {
+  small: 16,
+  medium: 24,
+  large: 32,
+};
+
+const heightLargeIconConfig = {
+  small: 80,
+  medium: 96,
+  large: 112,
+};
+
+const paddingLargeIconConfig = {
+  small: 32,
+  medium: 40,
+  large: 48,
+};
+
 const StyledButtonToggleContentWrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -14,23 +44,28 @@ const StyledButtonToggleContentWrapper = styled.div`
 const StyledButtonToggleLabel = styled.label`
   display: inline-block;
   position: relative;
-  height: 38px;
-  padding: 0 24px;
+  box-sizing: border-box;
+  ${({ size }) => css`
+    height: ${heightConfig[size]}px;
+    padding: 0 ${paddingConfig[size]}px;
+    font-size: ${fontSizeConfig[size]}px;
+  `}
   font-weight: 600;
   cursor: pointer;
 
   ${({ theme }) => css`
     border: 1px solid ${theme.colors.border};
-    font-size: ${theme.text.size};
     background-color: ${theme.colors.white};
 
-    input:checked ~ & {
-      color: ${theme.colors.white};
-      background-color: ${theme.colors.tertiary};
+    ${StyledIcon} {
+      color: ${theme.colors.black};
+    }
 
-      ${StyledIcon} {
-        color: ${theme.colors.white};
-      }
+    input:checked ~ && {
+      background-color: ${theme.colors.whiteMix};
+      border-color: ${theme.colors.secondary};
+      color: ${theme.colors.text};
+      cursor: auto;
     }
 
     input:focus ~ & {
@@ -38,19 +73,23 @@ const StyledButtonToggleLabel = styled.label`
       z-index: 100;
     }
 
-    &:hover {
-      background-color: ${theme.colors.whiteMix};
-      border-color: ${theme.colors.tertiary};
+    input:not(:checked) ~ &:hover {
+      background-color: ${theme.colors.secondary};
+      border-color: ${theme.colors.secondary};
+      color: ${theme.colors.white};
+
+      ${StyledIcon} {
+        color: ${theme.colors.white};
+      }
     }
   `};
 
-  ${({ buttonIcon, buttonIconSize }) =>
+  ${({ buttonIcon, buttonIconSize, size }) =>
     buttonIcon &&
     buttonIconSize === "large" &&
     css`
-      min-width: 104px;
-      height: 102px;
-      padding: 0 16px;
+      height: ${heightLargeIconConfig[size]}px;
+      padding: 0 ${paddingLargeIconConfig[size]}px;
 
       ${StyledButtonToggleContentWrapper} {
         flex-direction: column;
@@ -107,7 +146,7 @@ const StyledButtonToggle = styled.div`
   vertical-align: middle;
 
   &:not(:first-of-type) {
-    margin-left: 10px;
+    margin-left: 8px;
   }
 
   ${({ grouped }) =>