Add 'depressed' param to Button

Summary: Adds an optional 'depressed' param to Button. If set to true, displays the Button as if it was depressed. Used to add a set of togglable buttons in which all or none can be selected.

Reviewed By: jknoxville

Differential Revision: D8903854

fbshipit-source-id: ff39bed91514e420b49cb75fe57e490fa641b810

src/ui/components/Button.js

@@ -19,6 +19,8 @@ const borderColor = props => {
     return colors.macOSTitleBarButtonBorderBlur;
   } else if (props.type === 'danger') {
     return colors.red;
+  } else if (props.depressed) {
+    return colors.macOSTitleBarButtonBorderBottom;
   } else {
     return colors.macOSTitleBarButtonBorder;
   }
@@ -42,12 +44,23 @@ const StyledButton = styled.view(
         return colors.white;
       }
     },
-    backgroundImage: props =>
-      props.windowIsFocused
-        ? `linear-gradient(to bottom, transparent 0%,${
+    backgroundImage: props => {
+      if (props.windowIsFocused) {
+        if (props.depressed) {
+          return `linear-gradient(to bottom, ${
+            colors.macOSTitleBarBorderBlur
+          } 1px, ${colors.macOSTitleBarButtonBorderBlur} 0%, ${
+            colors.macOSTitleBarButtonBackgroundActive
+          } 100%)`;
+        } else {
+          return `linear-gradient(to bottom, transparent 0%,${
             colors.macOSTitleBarButtonBackground
-          } 100%)`
-        : 'none',
+          } 100%)`;
+        }
+      } else {
+        return 'none';
+      }
+    },
     borderStyle: 'solid',
     borderWidth: 1,
     borderColor,
@@ -192,6 +205,10 @@ type Props = {
    * URL to open in the browser on click
    */
   href?: string,
+  /**
+   * Whether the button should render depressed into its socket
+   */
+  depressed?: boolean,
 };
 
 type State = {