From f3bfe9f7e36b4d7ea9fe41f1056b211933d03ed9 Mon Sep 17 00:00:00 2001
From: VenkatSai-Anarock <Venkat.Bennabhaktula@anarock.com>
Date: Tue, 28 Nov 2023 13:44:36 +0530
Subject: [PATCH 1/4] add search message in search box

---
 packages/pebble-web/src/components/Search.tsx | 76 ++++++++++---------
 .../src/components/styles/Search.styles.ts    |  4 +
 .../src/components/typings/Search.ts          |  1 +
 packages/pebble-web/stories/search.story.tsx  |  1 +
 4 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/packages/pebble-web/src/components/Search.tsx b/packages/pebble-web/src/components/Search.tsx
index 76600bff..d6494dab 100644
--- a/packages/pebble-web/src/components/Search.tsx
+++ b/packages/pebble-web/src/components/Search.tsx
@@ -4,10 +4,12 @@ import { SearchProps } from "./typings/Search";
 import {
   searchStyle,
   searchWrapperStyle,
-  clearContainer
+  clearContainer,
+  searchMessageColor
 } from "./styles/Search.styles";
 import Loader from "./Loader";
 import { colors } from "pebble-shared";
+import { messageStyle } from "./styles/Input.styles";
 
 class Search extends React.PureComponent<SearchProps> {
   searchInputRef: React.RefObject<HTMLInputElement> = React.createRef();
@@ -27,7 +29,8 @@ class Search extends React.PureComponent<SearchProps> {
       className,
       clearable,
       value,
-      loading
+      loading,
+      message
     } = this.props;
 
     const wrapperClassName = cx(searchWrapperStyle, {
@@ -37,40 +40,45 @@ class Search extends React.PureComponent<SearchProps> {
     });
 
     return (
-      <div className={cx(wrapperClassName, className)}>
-        {type !== "large" && showSearchIcon && <i className="pi pi-search" />}
-        <input
-          className={searchStyle}
-          type="text"
-          aria-label={placeholder}
-          placeholder={placeholder}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            onChange(e.target.value);
-          }}
-          ref={this.searchInputRef}
-          value={value}
-          {...inputProps}
-        />
-        {loading && <Loader scale={0.4} color={colors.violet.base} />}
-        {clearable && (
-          <div
-            className={cx(clearContainer, {
-              __display: !!value && !!value.length
-            })}
-            onClick={() => {
-              if (this.searchInputRef.current) {
-                this.searchInputRef.current.value = "";
-              }
-              onChange("");
+      <>
+        <div className={cx(wrapperClassName, className)}>
+          {type !== "large" && showSearchIcon && <i className="pi pi-search" />}
+          <input
+            className={searchStyle}
+            type="text"
+            aria-label={placeholder}
+            placeholder={placeholder}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              onChange(e.target.value);
             }}
-          >
-            <i
-              className="pi pi-close"
-              style={{ display: "table-cell", verticalAlign: "middle" }}
-            />
-          </div>
+            ref={this.searchInputRef}
+            value={value}
+            {...inputProps}
+          />
+          {loading && <Loader scale={0.4} color={colors.violet.base} />}
+          {clearable && (
+            <div
+              className={cx(clearContainer, {
+                __display: !!value && !!value.length
+              })}
+              onClick={() => {
+                if (this.searchInputRef.current) {
+                  this.searchInputRef.current.value = "";
+                }
+                onChange("");
+              }}
+            >
+              <i
+                className="pi pi-close"
+                style={{ display: "table-cell", verticalAlign: "middle" }}
+              />
+            </div>
+          )}
+        </div>
+        {message && (
+          <div className={cx(messageStyle, searchMessageColor)}>{message}</div>
         )}
-      </div>
+      </>
     );
   }
 }
diff --git a/packages/pebble-web/src/components/styles/Search.styles.ts b/packages/pebble-web/src/components/styles/Search.styles.ts
index a8634d39..1e6cc11a 100644
--- a/packages/pebble-web/src/components/styles/Search.styles.ts
+++ b/packages/pebble-web/src/components/styles/Search.styles.ts
@@ -62,3 +62,7 @@ export const clearContainer = css({
     pointerEvents: "unset"
   }
 });
+
+export const searchMessageColor = css({
+  color: colors.gray.base
+});
diff --git a/packages/pebble-web/src/components/typings/Search.ts b/packages/pebble-web/src/components/typings/Search.ts
index fd52640e..1d26a44b 100644
--- a/packages/pebble-web/src/components/typings/Search.ts
+++ b/packages/pebble-web/src/components/typings/Search.ts
@@ -10,4 +10,5 @@ export interface SearchProps {
   clearable?: boolean;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   loading?: boolean;
+  message?: string;
 }
diff --git a/packages/pebble-web/stories/search.story.tsx b/packages/pebble-web/stories/search.story.tsx
index 738be094..073bee94 100644
--- a/packages/pebble-web/stories/search.story.tsx
+++ b/packages/pebble-web/stories/search.story.tsx
@@ -26,6 +26,7 @@ storiesOf("Components/Search", module).add(
       clearable={boolean("showClearButton", true)}
       value={store.state.query}
       loading={boolean("showLoading", false)}
+      message={text("message", "Search Message ")}
     />
   ))
 );

From 2e6ff0eb1bfa0d95108bc6f17fb3e1fcb86d0e1b Mon Sep 17 00:00:00 2001
From: VenkatSai-Anarock <Venkat.Bennabhaktula@anarock.com>
Date: Tue, 28 Nov 2023 16:02:30 +0530
Subject: [PATCH 2/4] adjust heights according to message height

---
 .../src/components/OptionGroupCheckBox.tsx    |  8 ++++++-
 .../src/components/shared/OptionGroup.tsx     | 10 +++++++--
 .../components/styles/OptionGroup.styles.ts   |  4 ++++
 .../styles/OptionGroupCheckBox.styles.ts      | 22 ++++++++++++-------
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/pebble-web/src/components/OptionGroupCheckBox.tsx b/packages/pebble-web/src/components/OptionGroupCheckBox.tsx
index 7796fb72..94092d8b 100644
--- a/packages/pebble-web/src/components/OptionGroupCheckBox.tsx
+++ b/packages/pebble-web/src/components/OptionGroupCheckBox.tsx
@@ -59,8 +59,14 @@ export default class OptionGroupCheckBox<
       clearVisible: this.clearVisible,
       ...this.props.advancedOptionsProps
     };
+
+    const isSearchMessagePresent = !!rest.searchBoxProps?.message;
+    const _optionGroupCheckboxWrap = isSearchMessagePresent
+      ? styles.optionGroupCheckBoxWrapWithMessage
+      : styles.optionGroupCheckBoxWrap;
+
     return (
-      <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>
+      <div className={cx(_optionGroupCheckboxWrap, wrapClassName)}>
         <OptionGroup<OptionType>
           {...rest}
           advancedOptionsProps={advancedOptionsProps}
diff --git a/packages/pebble-web/src/components/shared/OptionGroup.tsx b/packages/pebble-web/src/components/shared/OptionGroup.tsx
index d8bea53e..d9510ae4 100644
--- a/packages/pebble-web/src/components/shared/OptionGroup.tsx
+++ b/packages/pebble-web/src/components/shared/OptionGroup.tsx
@@ -8,8 +8,9 @@ import Search from "../Search";
 import {
   searchBoxScrolledStyle,
   searchBoxWrapper,
+  searchBoxHeight,
   optionsWrapper,
-  searchBoxHeight
+  searchBoxHeightWithMessage
 } from "../styles/OptionGroup.styles";
 import { rowWrapper, advancedActionsWrapper } from "../styles/Options.styles";
 
@@ -124,6 +125,7 @@ class OptionGroup<OptionType> extends React.PureComponent<
       searchBoxProps
     } = this.props;
     const { isScrolled, highlighted } = this.state;
+    const isMessagePresent = !!searchBoxProps?.message;
 
     const _children = React.Children.map(children, (_option, i) => {
       // `_option as React.ReactElement<OptionProps>` is a hack
@@ -175,7 +177,11 @@ class OptionGroup<OptionType> extends React.PureComponent<
           <div
             ref={this.optionRef}
             style={{
-              paddingTop: searchBox ? searchBoxHeight : undefined
+              paddingTop: searchBox
+                ? isMessagePresent
+                  ? searchBoxHeightWithMessage
+                  : searchBoxHeight
+                : undefined
             }}
             className={cx(optionsWrapper, className)}
             role={multiSelect ? "group" : "radiogroup"}
diff --git a/packages/pebble-web/src/components/styles/OptionGroup.styles.ts b/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
index 58e986c1..86461049 100644
--- a/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
+++ b/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
@@ -4,6 +4,10 @@ import { colors } from "pebble-shared";
 
 export const optionWrapperMaxHeight = 316;
 export const searchBoxHeight = 80;
+export const searchBoxMessageHeight = 10;
+export const searchBoxHeightWithMessage =
+  searchBoxHeight + searchBoxMessageHeight;
+
 export const initialPadding = 20;
 export const onScrollPadding = 10;
 
diff --git a/packages/pebble-web/src/components/styles/OptionGroupCheckBox.styles.ts b/packages/pebble-web/src/components/styles/OptionGroupCheckBox.styles.ts
index de463548..3cfe18e7 100644
--- a/packages/pebble-web/src/components/styles/OptionGroupCheckBox.styles.ts
+++ b/packages/pebble-web/src/components/styles/OptionGroupCheckBox.styles.ts
@@ -4,24 +4,30 @@ import {
   optionWrapperMaxHeight,
   searchBoxHeight,
   initialPadding,
-  onScrollPadding
+  onScrollPadding,
+  searchBoxHeightWithMessage
 } from "./OptionGroup.styles";
 import { smallButtonHeight } from "./Button.styles";
 import { colors } from "pebble-shared";
 export const optionGroupCheckBoxButtonWrapPadding = 20;
 export const optionGroupCheckBoxButtonWrapPaddingTop = 10;
 
+export const optionGroupCheckBoxWrapperHeight =
+  optionWrapperMaxHeight +
+  2 * (initialPadding - onScrollPadding) +
+  optionGroupCheckBoxButtonWrapPadding +
+  optionGroupCheckBoxButtonWrapPaddingTop +
+  smallButtonHeight;
+
 export const optionGroupCheckBoxWrap = css({
-  maxHeight:
-    optionWrapperMaxHeight +
-    searchBoxHeight +
-    2 * (initialPadding - onScrollPadding) +
-    optionGroupCheckBoxButtonWrapPadding +
-    optionGroupCheckBoxButtonWrapPaddingTop +
-    smallButtonHeight,
+  maxHeight: optionGroupCheckBoxWrapperHeight + searchBoxHeight,
   position: "relative"
 });
 
+export const optionGroupCheckBoxWrapWithMessage = css({
+  maxHeight: optionGroupCheckBoxWrapperHeight + searchBoxHeightWithMessage
+});
+
 export const optionGroupCheckBoxButtonWrap = css({
   ...mixins.flexSpaceBetween,
   gap: 60,

From af66616d077c9756738c7650cb8eae499e5161ee Mon Sep 17 00:00:00 2001
From: VenkatSai-Anarock <Venkat.Bennabhaktula@anarock.com>
Date: Tue, 28 Nov 2023 16:25:43 +0530
Subject: [PATCH 3/4] add wrapper class prop

---
 packages/pebble-web/src/components/Search.tsx        | 11 ++++++-----
 packages/pebble-web/src/components/typings/Search.ts |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/pebble-web/src/components/Search.tsx b/packages/pebble-web/src/components/Search.tsx
index d6494dab..4c1fde79 100644
--- a/packages/pebble-web/src/components/Search.tsx
+++ b/packages/pebble-web/src/components/Search.tsx
@@ -30,18 +30,19 @@ class Search extends React.PureComponent<SearchProps> {
       clearable,
       value,
       loading,
-      message
+      message,
+      wrapperClassName
     } = this.props;
 
-    const wrapperClassName = cx(searchWrapperStyle, {
+    const _searchBoxWrapperClassName = cx(searchWrapperStyle, {
       __pebble__search__small: type === "small",
       __pebble__search__large: type === "large",
       __pebble__search__table: type === "table"
     });
 
     return (
-      <>
-        <div className={cx(wrapperClassName, className)}>
+      <div className={wrapperClassName}>
+        <div className={cx(_searchBoxWrapperClassName, className)}>
           {type !== "large" && showSearchIcon && <i className="pi pi-search" />}
           <input
             className={searchStyle}
@@ -78,7 +79,7 @@ class Search extends React.PureComponent<SearchProps> {
         {message && (
           <div className={cx(messageStyle, searchMessageColor)}>{message}</div>
         )}
-      </>
+      </div>
     );
   }
 }
diff --git a/packages/pebble-web/src/components/typings/Search.ts b/packages/pebble-web/src/components/typings/Search.ts
index 1d26a44b..d5d922a5 100644
--- a/packages/pebble-web/src/components/typings/Search.ts
+++ b/packages/pebble-web/src/components/typings/Search.ts
@@ -11,4 +11,5 @@ export interface SearchProps {
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   loading?: boolean;
   message?: string;
+  wrapperClassName?: string;
 }

From 9ead51a1c8bdc1e83f57eb5bce77a928066f21b5 Mon Sep 17 00:00:00 2001
From: VenkatSai-Anarock <Venkat.Bennabhaktula@anarock.com>
Date: Tue, 28 Nov 2023 16:33:45 +0530
Subject: [PATCH 4/4] update message height

---
 packages/pebble-web/src/components/styles/OptionGroup.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pebble-web/src/components/styles/OptionGroup.styles.ts b/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
index 86461049..7e418da6 100644
--- a/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
+++ b/packages/pebble-web/src/components/styles/OptionGroup.styles.ts
@@ -4,7 +4,7 @@ import { colors } from "pebble-shared";
 
 export const optionWrapperMaxHeight = 316;
 export const searchBoxHeight = 80;
-export const searchBoxMessageHeight = 10;
+export const searchBoxMessageHeight = 20;
 export const searchBoxHeightWithMessage =
   searchBoxHeight + searchBoxMessageHeight;