Add search message in search box

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}

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,48 +29,55 @@ class Search extends React.PureComponent<SearchProps> {
       className,
       clearable,
       value,
-      loading
+      loading,
+      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)}>
-        {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={wrapperClassName}>
+        <div className={cx(_searchBoxWrapperClassName, 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>
     );

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

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 = 20;
+export const searchBoxHeightWithMessage =
+  searchBoxHeight + searchBoxMessageHeight;
+
 export const initialPadding = 20;
 export const onScrollPadding = 10;
 

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,

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

packages/pebble-web/src/components/typings/Search.ts

@@ -10,4 +10,6 @@ export interface SearchProps {
   clearable?: boolean;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   loading?: boolean;
+  message?: string;
+  wrapperClassName?: string;
 }

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 ")}
     />
   ))
 );