ToggleButton: Return component instead of fragment

Summary:
This should be an encapsulated component, not returning the building blocks of one.
So I'm changing the default to return a single component that contains the fragment previously returned.

Now elements appear side by side, are vertically aligned, and onClick works on the label as well, by default. This doesn't break anything in any of the uses inside the flipper code base, because only one used a label (regex search in Searchable.tsx), and these properties are all desirable there.

This could potentially break any plugins that aren't included in the flipper codebase, if they already have a label and don't layout the elements side by side. There are probably no such cases.

Reviewed By: passy

Differential Revision: D17810386

fbshipit-source-id: 588d7ed3243a9f0e5bcad805a3480393c031ff55

src/ui/components/ToggleSwitch.tsx

@@ -9,9 +9,9 @@ import React from 'react';
 import styled from 'react-emotion';
 import {colors} from './colors';
 import Text from './Text';
+import FlexRow from './FlexRow';
 
 export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
-  cursor: 'pointer',
   width: '30px',
   height: '16px',
   background: props.toggled ? colors.green : colors.grey,
@@ -33,6 +33,11 @@ export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
   },
 }));
 
+const Container = styled(FlexRow)({
+  alignItems: 'center',
+  cursor: 'pointer',
+});
+
 const Label = styled(Text)({
   marginLeft: 7,
   marginRight: 7,
@@ -64,14 +69,13 @@ type Props = {
 export default class ToggleButton extends React.Component<Props> {
   render() {
     return (
-      <>
+      <Container onClick={this.props.onClick}>
         <StyledButton
           className={this.props.className}
           toggled={this.props.toggled || false}
-          onClick={this.props.onClick}
         />
         {this.props.label && <Label>{this.props.label}</Label>}
-      </>
+      </Container>
     );
   }
 }

src/ui/components/searchable/Searchable.tsx

@@ -18,7 +18,7 @@ import Glyph from '../Glyph';
 import FilterToken from './FilterToken';
 import styled from 'react-emotion';
 import debounce from 'lodash.debounce';
-import ToggleSwitch from '../ToggleSwitch';
+import ToggleButton from '../ToggleSwitch';
 import React from 'react';
 
 const SearchBar = styled(Toolbar)({
@@ -456,7 +456,7 @@ const Searchable = (
             />
           </SearchBox>
           {this.props.allowRegexSearch ? (
-            <ToggleSwitch
+            <ToggleButton
               toggled={this.state.regexEnabled}
               onClick={this.onRegexToggled}
               label={'Regex'}