From 0280d300f53f59da732e1e9a8b42ad6cb906c717 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Jul 2018 12:31:35 -0300
Subject: [PATCH] Implement button active state

---
 .../client/ui/components/Button/Button.css    | 52 +++++++++++++------
 .../client/ui/components/Button/Button.mdx    |  4 ++
 .../ui/components/Button/Button.spec.tsx      | 13 +++++
 .../client/ui/components/Button/Button.tsx    |  5 ++
 .../Button/__snapshots__/Button.spec.tsx.snap |  9 ++++
 5 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 2e2171d55..e3cab49f2 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -63,7 +63,8 @@
       &.mouseHover {
         color: var(--palette-grey-light);
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-grey-lighter);
       }
     }
@@ -71,7 +72,8 @@
       &.mouseHover {
         color: var(--palette-primary-light);
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-primary-lighter);
       }
     }
@@ -79,7 +81,8 @@
       &.mouseHover {
         color: var(--palette-error-light);
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-error-lighter);
       }
     }
@@ -87,7 +90,8 @@
       &.mouseHover {
         color: var(--palette-success-light);
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-success-lighter);
       }
     }
@@ -114,7 +118,8 @@
       &.mouseHover {
         background-color: var(--palette-grey-light);
       }
-      &:active {
+      &:active,
+      &.active {
         background-color: var(--palette-grey-lighter);
       }
     }
@@ -122,7 +127,8 @@
       &.mouseHover {
         background-color: var(--palette-primary-light);
       }
-      &:active {
+      &:active,
+      &.active {
         background-color: var(--palette-primary-lighter);
       }
     }
@@ -130,7 +136,8 @@
       &.mouseHover {
         background-color: var(--palette-error-light);
       }
-      &:active {
+      &:active,
+      &.active {
         background-color: var(--palette-error-lighter);
       }
     }
@@ -138,7 +145,8 @@
       &.mouseHover {
         background-color: var(--palette-success-light);
       }
-      &:active {
+      &:active,
+      &.active {
         background-color: var(--palette-success-lighter);
       }
     }
@@ -169,7 +177,8 @@
         color: var(--palette-grey-light);
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-grey-lighter);
         border: 1px solid currentColor;
       }
@@ -179,7 +188,8 @@
         color: var(--palette-primary-light);
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-primary-lighter);
         border: 1px solid currentColor;
       }
@@ -189,7 +199,8 @@
         color: var(--palette-error-light);
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-error-lighter);
         border: 1px solid currentColor;
       }
@@ -199,7 +210,8 @@
         color: var(--palette-success-light);
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
         color: var(--palette-success-lighter);
         border: 1px solid currentColor;
       }
@@ -226,7 +238,9 @@
       &.mouseHover {
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
         color: var(--palette-common-white);
         background-color: var(--palette-grey-main);
       }
@@ -235,7 +249,9 @@
       &.mouseHover {
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
         color: var(--palette-common-white);
         background-color: var(--palette-primary-main);
       }
@@ -244,7 +260,9 @@
       &.mouseHover {
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
         color: var(--palette-common-white);
         background-color: var(--palette-error-main);
       }
@@ -253,7 +271,9 @@
       &.mouseHover {
         border: 1px solid currentColor;
       }
-      &:active {
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
         color: var(--palette-common-white);
         background-color: var(--palette-success-main);
       }
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 9160ed7da..f6d85b6fc 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -21,6 +21,7 @@ import Flex from '../Flex'
     <Button color="error">Push Me</Button>
     <Button color="success">Push Me</Button>
     <Button disabled>Push Me</Button>
+    <Button active>Push Me</Button>
     <Button><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button fullWidth>Push Me</Button>
   </Flex>
@@ -36,6 +37,7 @@ import Flex from '../Flex'
     <Button variant="filled" color="error">Push Me</Button>
     <Button variant="filled" color="success">Push Me</Button>
     <Button variant="filled" disabled>Push Me</Button>
+    <Button variant="filled" active>Push Me</Button>
     <Button variant="filled"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="filled" fullWidth>Push Me</Button>
   </Flex>
@@ -51,6 +53,7 @@ import Flex from '../Flex'
     <Button variant="outlined" color="error">Push Me</Button>
     <Button variant="outlined" color="success">Push Me</Button>
     <Button variant="outlined" disabled>Push Me</Button>
+    <Button variant="outlined" active>Push Me</Button>
     <Button variant="outlined"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="outlined" fullWidth>Push Me</Button>
   </Flex>
@@ -66,6 +69,7 @@ import Flex from '../Flex'
     <Button variant="ghost" color="error">Push Me</Button>
     <Button variant="ghost" color="success">Push Me</Button>
     <Button variant="ghost" disabled>Push Me</Button>
+    <Button variant="ghost" active>Push Me</Button>
     <Button variant="ghost"><ButtonIcon>face</ButtonIcon><span>Push Me</span></Button>
     <Button variant="ghost" fullWidth>Push Me</Button>
   </Flex>
diff --git a/src/core/client/ui/components/Button/Button.spec.tsx b/src/core/client/ui/components/Button/Button.spec.tsx
index da00c72e2..98ddf9ca0 100644
--- a/src/core/client/ui/components/Button/Button.spec.tsx
+++ b/src/core/client/ui/components/Button/Button.spec.tsx
@@ -47,3 +47,16 @@ it("renders a regular sized, primary colored ghost button with fullWidth", () =>
   renderer.render(<Button {...props} />);
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
+
+it("renders active state", () => {
+  const props: PropTypesOf<typeof Button> = {
+    active: true,
+    classes: {
+      active: "active",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index 60a8aeeb4..72d653cfc 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -29,6 +29,9 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders a full width button */
   fullWidth?: boolean;
 
+  /** If set renders active state e.g. to implement toggle buttons */
+  active?: boolean;
+
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }
@@ -41,6 +44,7 @@ export class Button extends React.Component<InnerProps> {
   };
   public render() {
     const {
+      active,
       classes,
       color,
       className,
@@ -65,6 +69,7 @@ export class Button extends React.Component<InnerProps> {
       [classes.variantOutlined]: variant === "outlined",
       [classes.variantGhost]: variant === "ghost",
       [classes.fullWidth]: fullWidth,
+      [classes.active]: active,
       [classes.disabled]: disabled,
     });
 
diff --git a/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap
index 454d39ec6..fb0d28251 100644
--- a/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap
+++ b/src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -19,6 +19,15 @@ exports[`renders a regular sized, primary colored ghost button with fullWidth 1`
 </withPropsOnChange(WithMouseHover)>
 `;
 
+exports[`renders active state 1`] = `
+<withPropsOnChange(WithMouseHover)
+  className="active"
+  classes={Object {}}
+>
+  Push me
+</withPropsOnChange(WithMouseHover)>
+`;
+
 exports[`renders correctly 1`] = `
 <withPropsOnChange(WithMouseHover)
   className=""