Added IconButton Component

Summary: Added IconButton component with a ripple effect. I also placed it into the components where it will be used.

Reviewed By: passy

Differential Revision: D16378064

fbshipit-source-id: 6b677ec4a43adf94eb38136a9c607c85919c0176

src/index.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-export {default as styled} from 'react-emotion';
+export {default as styled, keyframes} from 'react-emotion';
 export * from './ui/index.js';
 export * from './utils/index.js';
 export {default as GK} from './fb-stubs/GK.js';

src/plugins/navigation/components/IconButton.js

@@ -0,0 +1,62 @@
+/**
+ * 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, keyframes} from 'flipper';
+
+const shrinkAnimation = keyframes({
+  '0%': {
+    transform: 'scale(1);',
+  },
+  '100%': {
+    transform: 'scale(.9)',
+  },
+});
+
+type Props = {|
+  icon: string,
+  outline?: boolean,
+  onClick?: () => void,
+  color?: string,
+  size: 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32,
+|};
+
+const RippleEffect = styled('div')({
+  padding: 5,
+  borderRadius: 100,
+  backgroundPosition: 'center',
+  transition: 'background 0.5s',
+  ':hover': {
+    background:
+      'rgba(155, 155, 155, 0.2) radial-gradient(circle, transparent 1%, rgba(155, 155, 155, 0.2) 1%) center/15000%',
+  },
+  ':active': {
+    backgroundColor: 'rgba(201, 200, 200, 0.5)',
+    backgroundSize: '100%',
+    transition: 'background 0s',
+  },
+});
+
+const IconButton = styled('div')({
+  ':active': {
+    animation: `${shrinkAnimation} .25s ease forwards`,
+  },
+});
+
+export default function(props: Props) {
+  return (
+    <RippleEffect>
+      <IconButton className="icon-button" onClick={props.onClick}>
+        <Glyph
+          name={props.icon}
+          size={props.size}
+          color={props.color}
+          variant={props.outline ? 'outline' : 'filled'}
+        />
+      </IconButton>
+    </RippleEffect>
+  );
+}

src/plugins/navigation/components/NavigationInfoBox.js

@@ -8,6 +8,7 @@
 
 import {styled} from 'flipper';
 import {parseURIParameters} from '../util/uri';
+import {IconButton} from './';
 
 type Props = {|
   uri: ?string,
@@ -37,6 +38,16 @@ const NavigationInfoBoxContainer = styled('div')({
     userSelect: 'text',
     cursor: 'text',
   },
+  '.icon-container': {
+    display: 'inline-flex',
+    padding: 5,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    '>*': {
+      marginRight: 2,
+    },
+  },
 });
 
 export default (props: Props) => {
@@ -51,6 +62,10 @@ export default (props: Props) => {
     const parameters = parseURIParameters(uri);
     return (
       <NavigationInfoBoxContainer>
+        <div className="icon-container">
+          <IconButton icon="star" outline={true} size={16} />
+          <IconButton icon="eye" size={16} />
+        </div>
         <div className="nav-info-text bold">uri:</div>
         <div className="nav-info-text selectable">{uri}</div>
         {parameters.size > 0 ? (

src/plugins/navigation/components/SearchBar.js

@@ -14,7 +14,7 @@ import {
   Toolbar,
   Glyph,
 } from 'flipper';
-import {SearchBarButton} from './';
+import {IconButton} from './';
 
 type Props = {|
   onFavorite: (query: string) => void,
@@ -25,6 +25,22 @@ type State = {|
   query: string,
 |};
 
+const IconContainer = styled('div')({
+  display: 'inline-flex',
+  height: '16px',
+  alignItems: 'center',
+  '>*': {
+    marginLeft: 10,
+    '.icon-button': {
+      height: 16,
+    },
+    img: {
+      verticalAlign: 'top',
+      alignItems: 'none',
+    },
+  },
+});
+
 const SearchChevronContainer = styled('div')({
   marginRight: 12,
 });
@@ -63,14 +79,20 @@ class SearchBar extends Component<Props, State> {
             <Glyph name="chevron-down" size={12} />
           </SearchChevronContainer>
         </SearchBox>
-        <SearchBarButton
+        <IconContainer>
-          icon="send"
+          <IconButton
-          onClick={() => this.navigateTo(this.state.query)}
+            icon="send"
-        />
+            size={16}
-        <SearchBarButton
+            outline={true}
-          icon="star"
+            onClick={() => this.navigateTo(this.state.query)}
-          onClick={() => this.favorite(this.state.query)}
+          />
-        />
+          <IconButton
+            icon="star"
+            size={16}
+            outline={true}
+            onClick={() => this.favorite(this.state.query)}
+          />
+        </IconContainer>
       </Toolbar>
     );
   };

src/plugins/navigation/components/SearchBarButton.js

@@ -1,28 +0,0 @@
-/**
- * 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} from 'flipper';
-
-type Props = {|
-  icon: string,
-  onClick?: () => void,
-|};
-
-const SearchBarButton = styled('div')({
-  marginRight: 9,
-  marginTop: -3,
-  marginLeft: 4,
-  position: 'relative',
-});
-
-export default function(props: Props) {
-  return (
-    <SearchBarButton onClick={props.onClick}>
-      <Glyph name={props.icon} size={16} variant="outline" />
-    </SearchBarButton>
-  );
-}

src/plugins/navigation/components/index.js

@@ -6,6 +6,6 @@
  * @flow strict-local
  */
 
+export {default as IconButton} from './IconButton';
 export {default as NavigationInfoBox} from './NavigationInfoBox';
 export {default as SearchBar} from './SearchBar';
-export {default as SearchBarButton} from './SearchBarButton';