diff --git a/desktop/app/src/chrome/ConsoleLogs.tsx b/desktop/app/src/chrome/ConsoleLogs.tsx index 62abb9e62..ab197b19b 100644 --- a/desktop/app/src/chrome/ConsoleLogs.tsx +++ b/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; diff --git a/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx b/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx index 3f25fc973..a4d4154ba 100644 --- a/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx +++ b/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'; diff --git a/desktop/app/src/chrome/plugin-manager/PluginPackageInstaller.tsx b/desktop/app/src/chrome/plugin-manager/PluginPackageInstaller.tsx index dfb681117..0c537d41e 100644 --- a/desktop/app/src/chrome/plugin-manager/PluginPackageInstaller.tsx +++ b/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', diff --git a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap b/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap index cc59fa442..a92c666c9 100644 --- a/desktop/app/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap +++ b/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" >
- {children} - - ); -} diff --git a/desktop/app/src/ui/components/searchable/Searchable.tsx b/desktop/app/src/ui/components/searchable/Searchable.tsx index 8fc7aa07b..c9f4903e3 100644 --- a/desktop/app/src/ui/components/searchable/Searchable.tsx +++ b/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, diff --git a/desktop/app/src/ui/index.tsx b/desktop/app/src/ui/index.tsx index 69a363b3f..c4288fa35 100644 --- a/desktop/app/src/ui/index.tsx +++ b/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'; diff --git a/desktop/flipper-plugin/src/__tests__/api.node.tsx b/desktop/flipper-plugin/src/__tests__/api.node.tsx index 7b85ce0fd..480f25969 100644 --- a/desktop/flipper-plugin/src/__tests__/api.node.tsx +++ b/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", diff --git a/desktop/flipper-plugin/src/index.ts b/desktop/flipper-plugin/src/index.ts index 8aa757720..7c55db5a2 100644 --- a/desktop/flipper-plugin/src/index.ts +++ b/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 { diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx index 021c5611b..0659d3e2f 100644 --- a/desktop/flipper-plugin/src/ui/Layout.tsx +++ b/desktop/flipper-plugin/src/ui/Layout.tsx @@ -88,10 +88,9 @@ const Container = styled.div( }), ); -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, diff --git a/desktop/flipper-plugin/src/ui/Toolbar.tsx b/desktop/flipper-plugin/src/ui/Toolbar.tsx new file mode 100644 index 000000000..3e8cf195c --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx index 63c2ed3a2..d488a98df 100644 --- a/docs/extending/flipper-plugin.mdx +++ b/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.