Improve props for ToolbarIcon

Summary: This allows props like `style` to be passed through (so it can be further styled), and makes `active` optional.

Reviewed By: jknoxville

Differential Revision: D21438791

fbshipit-source-id: bbab4a7768fce5de56e4deff67e50ff69914d123

desktop/app/src/ui/components/ToolbarIcon.tsx

@@ -12,32 +12,32 @@ import {colors} from './colors';
 import styled from '@emotion/styled';
 import React from 'react';
 
-type Props = {
+type Props = React.ComponentProps<typeof ToolbarIconContainer> & {
-  title: string;
+  active?: boolean;
   icon: string;
-  active: boolean;
+  title: string;
   onClick: () => void;
 };
 
-const ToolbarIcon = styled.div({
+const ToolbarIconContainer = styled.div({
   marginRight: 9,
   marginTop: -3,
   marginLeft: 4,
   position: 'relative', // for settings popover positioning
 });
 
-export default function (props: Props) {
+export default function ToolbarIcon({active, icon, ...props}: Props) {
   return (
-    <ToolbarIcon onClick={props.onClick} title={props.title}>
+    <ToolbarIconContainer {...props}>
       <Glyph
-        name={props.icon}
+        name={icon}
         size={16}
         color={
-          props.active
+          active
             ? colors.macOSTitleBarIconSelected
             : colors.macOSTitleBarIconActive
         }
       />
-    </ToolbarIcon>
+    </ToolbarIconContainer>
   );
 }