Implement button active state

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

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>

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();
+});

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

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=""