From 2c5bcb373dedf3b57a659b03e1484e5eb4f6c1b8 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Wed, 30 Aug 2023 07:26:35 -0700
Subject: [PATCH] Extract container

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

Reviewed By: LukeDefeo

Differential Revision: D48560381

fbshipit-source-id: ecdc6bb95514faf913b23239bbd40113b8e0f57b
---
 .../ui/PowerSearch/PowerSearchContainer.tsx   | 30 +++++++++++++++++++
 .../src/ui/PowerSearch/index.tsx              |  5 ++--
 desktop/flipper-plugin/src/ui/theme.tsx       |  1 +
 desktop/themes/base.less                      |  1 +
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx

diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
new file mode 100644
index 000000000..d1a3ff9c1
--- /dev/null
+++ b/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>;
+};
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 4904af564..ccb23bbd3 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/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>
   );
 };
diff --git a/desktop/flipper-plugin/src/ui/theme.tsx b/desktop/flipper-plugin/src/ui/theme.tsx
index de6bb0de0..061d9b4d0 100644
--- a/desktop/flipper-plugin/src/ui/theme.tsx
+++ b/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
diff --git a/desktop/themes/base.less b/desktop/themes/base.less
index 55aaab574..0cc2ed857 100644
--- a/desktop/themes/base.less
+++ b/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;
 }