feat: searchbox bordercolor property (#235)

Author: Ramakrishnan24689

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.

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 -->

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

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}

SearchBox/SearchBox/components/Component.types.ts

@@ -10,5 +10,6 @@ export interface ISearchBoxComponentProps {
     disabled?: boolean;
     disableAnimation?: boolean;
     setFocus?: string;
+    borderColor?: string;
     value?: string;
 }

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}
             />

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 ?? '',
         };
 

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>