ToolbarIcon component

Summary: Adding a ToolbarIcon component that displays an icon in the toolbar that can be toggled on and off. This is used in subsequent diffs.

Reviewed By: passy

Differential Revision: D14100393

fbshipit-source-id: d814b52cf77585c4e8d090e11399e005713efb5e

src/plugins/layout/layout2/ToolbarIcon.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {Glyph, styled, colors} from 'flipper';
+
+type Props = {|
+  title: string,
+  icon: string,
+  active: boolean,
+  onClick: () => void,
+|};
+
+const ToolbarIcon = styled('div')({
+  marginRight: 9,
+  marginTop: -3,
+  marginLeft: 4,
+  position: 'relative', // for settings popover positioning
+});
+
+export default function(props: Props) {
+  return (
+    <ToolbarIcon onClick={props.onClick} title={props.title}>
+      <Glyph
+        name={props.icon}
+        size={16}
+        color={
+          props.active
+            ? colors.macOSTitleBarIconSelected
+            : colors.macOSTitleBarIconActive
+        }
+      />
+    </ToolbarIcon>
+  );
+}