Expose Toolbar from Sandy

Summary: Moved Toolbar to flipper-plugin. No further changes.

Reviewed By: nikoant

Differential Revision: D28027334

fbshipit-source-id: 35de13d87734ae3a8af037166945b1a669106274

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -43,6 +43,7 @@ test('Correct top level API exposed', () => {
       "Tab",
       "Tabs",
       "TestUtils",
+      "Toolbar",
       "Tracked",
       "TrackingScope",
       "batch",

desktop/flipper-plugin/src/index.ts

@@ -57,6 +57,7 @@ export {
 } from './ui/NUX';
 export {Sidebar as _Sidebar} from './ui/Sidebar';
 export {DetailSidebar} from './ui/DetailSidebar';
+export {Toolbar} from './ui/Toolbar';
 
 export {renderReactRoot} from './utils/renderReactRoot';
 export {

desktop/flipper-plugin/src/ui/Layout.tsx

@@ -88,10 +88,9 @@ const Container = styled.div<ContainerProps>(
   }),
 );
 
-const Horizontal = styled(Container)<{wrap?: boolean}>(({wrap}) => ({
+const Horizontal = styled(Container)({
   flexDirection: 'row',
-  flexWrap: wrap ? 'wrap' : undefined,
-}));
+});
 
 const ScrollParent = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
   flex: 1,

desktop/flipper-plugin/src/ui/Toolbar.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import styled from '@emotion/styled';
+import {Layout} from './Layout';
+import {theme} from './theme';
+
+const SandyToolbarContainer = styled(Layout.Horizontal)({
+  flexWrap: 'wrap',
+  padding: theme.space.small,
+  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
+});
+
+export function Toolbar({
+  children,
+  style,
+}: {
+  children?: React.ReactNode;
+  position?: 'bottom' | 'top';
+  compact?: boolean;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <SandyToolbarContainer style={style} gap={theme.space.small} center>
+      {children}
+    </SandyToolbarContainer>
+  );
+}