From 0af5be679dc46078c987d44fdfe4fe5b0e6c59f5 Mon Sep 17 00:00:00 2001
From: Ramakrishnan Raman <raram@microsoft.com>
Date: Tue, 18 Apr 2023 13:46:13 +0530
Subject: [PATCH] feat: searchbox bordercolor property (#235)

---
 SearchBox/README.md                           |  2 ++
 SearchBox/SearchBox/ControlManifest.Input.xml |  2 +-
 .../SearchBox/__mocks__/mock-parameters.ts    |  1 +
 .../searchbox-lifecycle.test.ts.snap          |  1 +
 .../SearchBox/components/Component.types.ts   |  1 +
 SearchBox/SearchBox/components/SearchBox.tsx  | 31 +++++++++++++------
 SearchBox/SearchBox/index.ts                  |  5 ++-
 .../SearchBox/strings/SearchBox.1033.resx     |  3 ++
 8 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/SearchBox/README.md b/SearchBox/README.md
index 98e35d18..64952d4c 100644
--- a/SearchBox/README.md
+++ b/SearchBox/README.md
@@ -20,6 +20,8 @@ This code component provides a wrapper around the [Fluent UI SearchBox](https://
 
 - **Delay Output** - To delay output by half a second. Useful when input is provided frequently within short duration.
 
+- **Border color** - To define specific color for searchbox border. This exludes onhover & onfocus border color.
+
 ## Additional properties
 
 - **Theme** - Accepts a JSON string that is generated using [Fluent UI Theme Designer (windows.net)](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/). Leaving this blank will use the default theme defined by Power Apps. Leaving this blank will use the default theme defined by Power Apps. See [theming](theme.md) for guidance on how to configure.
diff --git a/SearchBox/SearchBox/ControlManifest.Input.xml b/SearchBox/SearchBox/ControlManifest.Input.xml
index 79eef71c..2c0be70e 100644
--- a/SearchBox/SearchBox/ControlManifest.Input.xml
+++ b/SearchBox/SearchBox/ControlManifest.Input.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest>
   <control namespace="PowerCAT" constructor="SearchBox" version="0.0.1" display-name-key="SearchBox" description-key="SearchBox_desc" control-type="virtual">
-    <!--<property name="DefaultValue" display-name-key="SearchBox_DefaultValue" description-key="SearchBox_DefaultValue_Desc" of-type="SingleLine.Text" usage="input"/>-->
     <property name="SearchText" display-name-key="SearchBox_SearchText" description-key="SearchBox_SearchText_Desc" of-type="SingleLine.Text" usage="bound"/>
     <property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
     <property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
@@ -11,6 +10,7 @@
     <property name="PlaceHolderText" display-name-key="PlaceHolderText" of-type="SingleLine.Text" usage="input" required="false" default-value="Search" />
     <property name="InputEvent" display-name-key="InputEvent" of-type="SingleLine.Text" usage="input" required="false"/>
     <property name="DelayOutput" display-name-key="DelayOutput" of-type="TwoOptions" usage="input" required="false" />
+    <property name="BorderColor" display-name-key="BorderColor" of-type="SingleLine.Text" usage="input" required="false" />
     <common-event name="OnChange" />
     <feature-usage>
       <!-- No common events (OnChange, OnSelect, etc.) are shown unless explicitly declared in the manifest -->
diff --git a/SearchBox/SearchBox/__mocks__/mock-parameters.ts b/SearchBox/SearchBox/__mocks__/mock-parameters.ts
index 2baedd8b..221317ff 100644
--- a/SearchBox/SearchBox/__mocks__/mock-parameters.ts
+++ b/SearchBox/SearchBox/__mocks__/mock-parameters.ts
@@ -14,5 +14,6 @@ export function getMockParameters(): IInputs {
         InputEvent: new MockStringProperty(),
         DelayOutput: new MockTwoOptionsProperty(),
         SearchText: new MockStringProperty(),
+        BorderColor: new MockStringProperty()
     };
 }
diff --git a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
index 57d5b3b1..3aa88a38 100644
--- a/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
+++ b/SearchBox/SearchBox/__tests__/__snapshots__/searchbox-lifecycle.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`SearchBox renders 1`] = `
 <Memo(SearchBoxComponent)
   ariaLabel=""
+  borderColor=""
   disableAnimation={false}
   disabled={false}
   height={-1}
diff --git a/SearchBox/SearchBox/components/Component.types.ts b/SearchBox/SearchBox/components/Component.types.ts
index 5016ab20..4a0f925c 100644
--- a/SearchBox/SearchBox/components/Component.types.ts
+++ b/SearchBox/SearchBox/components/Component.types.ts
@@ -10,5 +10,6 @@ export interface ISearchBoxComponentProps {
     disabled?: boolean;
     disableAnimation?: boolean;
     setFocus?: string;
+    borderColor?: string;
     value?: string;
 }
diff --git a/SearchBox/SearchBox/components/SearchBox.tsx b/SearchBox/SearchBox/components/SearchBox.tsx
index 12ce0975..8ca7eaf4 100644
--- a/SearchBox/SearchBox/components/SearchBox.tsx
+++ b/SearchBox/SearchBox/components/SearchBox.tsx
@@ -1,10 +1,21 @@
 import * as React from 'react';
-import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, mergeStyles } from '@fluentui/react';
+import { SearchBox, createTheme, IPartialTheme, ThemeProvider, IIconProps, ISearchBoxStyles } from '@fluentui/react';
 import { ISearchBoxComponentProps } from './Component.types';
 
 export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) => {
-    const { onChange, themeJSON, ariaLabel, placeholderText, underLined, disabled, disableAnimation, setFocus, value } =
-        props;
+    const {
+        onChange,
+        themeJSON,
+        ariaLabel,
+        placeholderText,
+        underLined,
+        disabled,
+        disableAnimation,
+        setFocus,
+        value,
+        width,
+        borderColor,
+    } = props;
     const filterIcon: IIconProps = { iconName: props.iconName };
     const [searchText, setSearchText] = React.useState(value);
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -19,16 +30,19 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
 
     React.useEffect(() => {
         value !== searchText && setSearchText(value);
-    }, [value, searchText]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
 
     function onChangeEvent(ev?: React.ChangeEvent<HTMLInputElement>, newValue?: string) {
         setSearchText(newValue);
         onChange(ev, newValue);
     }
 
-    const wrapperClass = mergeStyles({
-        width: props.width,
-    });
+    const searchboxStyles = React.useMemo(() => {
+        return {
+            root: { width: width, ...(borderColor && { borderColor: borderColor }) },
+        } as ISearchBoxStyles;
+    }, [width, borderColor]);
 
     React.useEffect(() => {
         if (setFocus && setFocus !== '' && rootRef) {
@@ -38,7 +52,6 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
             }
         }
     }, [setFocus, rootRef]);
-
     return (
         <ThemeProvider theme={theme}>
             <SearchBox
@@ -49,7 +62,7 @@ export const SearchBoxComponent = React.memo((props: ISearchBoxComponentProps) =
                 iconProps={filterIcon}
                 disabled={disabled}
                 disableAnimation={disableAnimation}
-                className={wrapperClass}
+                styles={searchboxStyles}
                 ref={rootRef}
                 value={searchText}
             />
diff --git a/SearchBox/SearchBox/index.ts b/SearchBox/SearchBox/index.ts
index ca35409f..93e0f397 100644
--- a/SearchBox/SearchBox/index.ts
+++ b/SearchBox/SearchBox/index.ts
@@ -9,6 +9,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
     private static readonly DELAY_TIMEOUT: number = 500;
     context: ComponentFramework.Context<IInputs>;
     notifyOutputChanged: ((debounce?: boolean) => void) | null;
+    notifyOutputChangedNoDebounce: () => void;
     searchTextValue: string;
     defaultValue: string;
     setFocus = '';
@@ -30,6 +31,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
      */
     public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
         this.notifyOutputChanged = notifyOutputChanged;
+        this.notifyOutputChangedNoDebounce = notifyOutputChanged;
         this.context = context;
         this.context.mode.trackContainerResize(true);
         if (this.notifyOutputChanged) {
@@ -53,7 +55,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
             // If the default value is different from searchText value
             if (value && this.searchTextValue !== value) {
                 this.searchTextValue = value;
-                this.notifyOutputChanged;
+                this.notifyOutputChangedNoDebounce();
             }
         }
         if (eventChanged && inputEvent.startsWith(InputEvents.SetFocus)) {
@@ -71,6 +73,7 @@ export class SearchBox implements ComponentFramework.ReactControl<IInputs, IOutp
             width: allocatedWidth,
             height: allocatedHeight,
             setFocus: this.setFocus,
+            borderColor: context.parameters.BorderColor.raw ?? '',
             value: this.searchTextValue ?? '',
         };
 
diff --git a/SearchBox/SearchBox/strings/SearchBox.1033.resx b/SearchBox/SearchBox/strings/SearchBox.1033.resx
index 33ab3a5d..e21bc6d4 100644
--- a/SearchBox/SearchBox/strings/SearchBox.1033.resx
+++ b/SearchBox/SearchBox/strings/SearchBox.1033.resx
@@ -160,4 +160,7 @@
     <data name="SearchBox_DefaultValue_Desc" xml:space="preserve">
         <value>Default value to set for the search box. This can be used only once</value>
     </data>
+    <data name="BorderColor" xml:space="preserve">
+        <value>Border color</value>
+    </data>
 </root>
\ No newline at end of file