Merge pull request #4181 from Sage/FE-4166-button-toggle-enhancements

feat(button-toggle): enhance button toggle visuals - FE-4166
Sage · Jul 7, 2021 · 3318596 · 3318596
2 parents a73560f + b3d49ba
commit 3318596
Show file tree

Hide file tree

Showing 8 changed files with 439 additions and 179 deletions.
diff --git 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
@@ -21,32 +21,39 @@ 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 {
   outline: 3px solid #FFB500;
   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
@@ -21,32 +21,39 @@ 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 {
   outline: 3px solid #FFB500;
   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,41 +164,42 @@ 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 {
   outline: 3px solid #FFB500;
   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,32 +265,39 @@ 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 {
   outline: 3px solid #FFB500;
   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
@@ -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
@@ -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. */