Expose Toolbar from Sandy

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

Reviewed By: nikoant

Differential Revision: D28027334

fbshipit-source-id: 35de13d87734ae3a8af037166945b1a669106274

desktop/app/src/chrome/ConsoleLogs.tsx

@@ -8,14 +8,14 @@
  */
 
 import {useMemo} from 'react';
-import {Button, Toolbar, ButtonGroup, Layout} from '../ui';
+import {Button, ButtonGroup, Layout} from '../ui';
 import React from 'react';
 import {Console, Hook} from 'console-feed';
 import type {Methods} from 'console-feed/lib/definitions/Methods';
 import type {Styles} from 'console-feed/lib/definitions/Styles';
 import {createState, useValue} from 'flipper-plugin';
 import {useLocalStorageState} from 'flipper-plugin';
-import {theme} from 'flipper-plugin';
+import {theme, Toolbar} from 'flipper-plugin';
 import {useIsDarkMode} from '../utils/useIsDarkMode';
 
 const MAX_LOG_ITEMS = 1000;

desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx

@@ -11,7 +11,6 @@ import {
   FlexColumn,
   styled,
   ManagedTable_immutable,
-  Toolbar,
   SearchInput,
   SearchBox,
   Button,
@@ -43,6 +42,7 @@ import {State as AppState} from '../../reducers';
 import {connect} from 'react-redux';
 import {Dispatch, Action} from 'redux';
 import PluginPackageInstaller from './PluginPackageInstaller';
+import {Toolbar} from 'flipper-plugin';
 
 const TAG = 'PluginInstaller';
 

desktop/app/src/chrome/plugin-manager/PluginPackageInstaller.tsx

@@ -8,7 +8,6 @@
  */
 
 import {
-  Toolbar,
   Button,
   FlexRow,
   Tooltip,
@@ -20,6 +19,7 @@ import styled from '@emotion/styled';
 import {default as FileSelector} from '../../ui/components/FileSelector';
 import React, {useState} from 'react';
 import {installPluginFromFile} from 'flipper-plugin-lib';
+import {Toolbar} from 'flipper-plugin';
 
 const CenteredGlyph = styled(Glyph)({
   margin: 'auto',

desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -6,7 +6,7 @@ exports[`load PluginInstaller list 1`] = `
     class="css-9dawc5-View-FlexBox-FlexColumn"
   >
     <div
-      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e13mj6h81"
+      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
         class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
@@ -241,7 +241,7 @@ exports[`load PluginInstaller list 1`] = `
     </div>
   </div>
   <div
-    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e13mj6h81"
+    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
   >
     <div
       class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
@@ -308,7 +308,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
     class="css-9dawc5-View-FlexBox-FlexColumn"
   >
     <div
-      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e13mj6h81"
+      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
         class="css-bl14sl-View-FlexBox-SearchBox e271nro4"
@@ -543,7 +543,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
     </div>
   </div>
   <div
-    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e13mj6h81"
+    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
   >
     <div
       class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"

desktop/app/src/index.tsx

@@ -142,7 +142,8 @@ export {default as FlexBox} from './ui/components/FlexBox';
 export {default as FlexRow} from './ui/components/FlexRow';
 export {default as FlexColumn} from './ui/components/FlexColumn';
 export {default as FlexCenter} from './ui/components/FlexCenter';
-export {default as Toolbar, Spacer} from './ui/components/Toolbar';
+export {Toolbar} from 'flipper-plugin';
+export {Spacer} from './ui/components/Toolbar';
 export {default as ToolbarIcon} from './ui/components/ToolbarIcon';
 export {default as Panel} from './ui/components/Panel';
 export {default as Text} from './ui/components/Text';

desktop/app/src/plugins/TableNativePlugin.tsx

@@ -12,8 +12,7 @@ import Panel from '../ui/components/Panel';
 import {colors} from '../ui/components/colors';
 import styled from '@emotion/styled';
 import Text from '../ui/components/Text';
-import Toolbar from '../ui/components/Toolbar';
+import {Spacer} from '../ui/components/Toolbar';
-import Spacer from '../ui/components/Toolbar';
 import Button from '../ui/components/Button';
 import Select from '../ui/components/Select';
 import ErrorBlock from '../ui/components/ErrorBlock';
@@ -35,6 +34,7 @@ import {ReactNode} from 'react';
 import React from 'react';
 import {KeyboardActions} from '../MenuBar';
 import {BundledPluginDetails} from 'flipper-plugin-lib';
+import {Toolbar} from 'flipper-plugin';
 
 type ID = string;
 

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

@@ -7,34 +7,13 @@
  * @format
  */
 
-import React from 'react';
 import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
-import {theme, Layout} from 'flipper-plugin';
-
-const SandyToolbarContainer = styled(Layout.Horizontal)({
-  flexWrap: 'wrap',
-  padding: theme.space.small,
-  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
-});
 
+/**
+ * Deprecated, set 'gap' on the parent container instead
+ */
 export const Spacer = styled(FlexBox)({
   flexGrow: 1,
 });
 Spacer.displayName = 'Spacer';
-
-export default 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>
-  );
-}

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -10,7 +10,6 @@
 import {Filter} from '../filter/types';
 import {TableColumns} from '../table/types';
 import {PureComponent} from 'react';
-import Toolbar from '../Toolbar';
 import Input from '../Input';
 import {colors} from '../colors';
 import Text from '../Text';
@@ -21,7 +20,7 @@ import styled from '@emotion/styled';
 import {debounce} from 'lodash';
 import ToggleButton from '../ToggleSwitch';
 import React from 'react';
-import {Layout, theme} from 'flipper-plugin';
+import {Layout, theme, Toolbar} from 'flipper-plugin';
 
 const SearchBar = styled(Toolbar)({
   height: 42,

desktop/app/src/ui/index.tsx

@@ -104,7 +104,7 @@ export {default as FlexBox} from './components/FlexBox';
 export {default as FlexRow} from './components/FlexRow';
 export {default as FlexColumn} from './components/FlexColumn';
 export {default as FlexCenter} from './components/FlexCenter';
-export {default as Toolbar, Spacer} from './components/Toolbar';
+export {Spacer} from './components/Toolbar';
 export {default as ToolbarIcon} from './components/ToolbarIcon';
 export {default as Panel} from './components/Panel';
 export {default as Text} from './components/Text';

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>
+  );
+}

docs/extending/flipper-plugin.mdx

@@ -835,6 +835,10 @@ The following additional properties are supported:
 
 * `grow`. If set, the tab control will use all available vertical space. By default `false`.
 
+### Toolbar
+
+A horizontal panel to organize buttons and alike. Basically a `Layout.Horizontal` with a border, padding, gap and wrapping enabled.
+
 ### DataList
 
 The DataList can be used to display a set of items efficiently, and where a single item can be selected.