Extract container

Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: LukeDefeo

Differential Revision: D48560381

fbshipit-source-id: ecdc6bb95514faf913b23239bbd40113b8e0f57b

desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
+import {css} from '@emotion/css';
+import {theme} from '../theme';
+
+const containerStyle = css`
+  display: flex;
+  flex-direction: row;
+  border-radius: ${theme.borderRadius};
+  border: 1px solid ${theme.borderColor};
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &:focus-within,
+  &:hover {
+    border-color: ${theme.primaryColor};
+    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
+  }
+`;
+
+export const PowerSearchContainer: React.FC = ({children}) => {
+  return <div className={containerStyle}>{children}</div>;
+};

desktop/flipper-plugin/src/ui/PowerSearch/index.tsx

@@ -15,6 +15,7 @@ import {
   OperatorConfig,
 } from './PowerSearchTypes';
 import {CloseOutlined} from '@ant-design/icons';
+import {PowerSearchContainer} from './PowerSearchContainer';
 
 export {PowerSearchConfig};
 
@@ -81,7 +82,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
   >(null);
 
   return (
-    <div style={{display: 'flex', flexDirection: 'row'}}>
+    <PowerSearchContainer>
       <Space size={[0, 8]}>
         {searchExpression.map((searchTerm, i) => {
           const isLastTerm = i === searchExpression.length - 1;
@@ -182,6 +183,6 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({config}) => {
           }
         }}
       />
-    </div>
+    </PowerSearchContainer>
   );
 };

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

@@ -34,6 +34,7 @@ export const theme = {
   buttonDefaultBackground: 'var(--flipper-button-default-background)',
   backgroundTransparentHover: 'var(--flipper-background-transparent-hover)',
   dividerColor: 'var(--flipper-divider-color)',
+  borderColor: 'var(--flipper-border-color)',
   borderRadius: 'var(--flipper-border-radius)',
   containerBorderRadius: 8,
   inlinePaddingV: 6, // vertical padding on inline elements like buttons

desktop/themes/base.less

@@ -61,4 +61,5 @@
   --flipper-diff-added-background: @diff-added-background;
   --flipper-diff-removed-background: @diff-removed-background;
   --flipper-border-radius: @border-radius-base;
+  --flipper-border-color: @normal-color;
 }