SearchBar is not a form field

Author: Nemobot

src/Field/InputConfig.ts

@@ -8,3 +8,10 @@ export type InputConfig = {
   radius: BentoSprinkles["borderRadius"];
   fontSize: ComponentProps<typeof Body>["size"];
 };
+
+export const defaultInputConfig: InputConfig = {
+  radius: 4,
+  paddingX: 16,
+  paddingY: 16,
+  fontSize: "large",
+};

src/Field/createFormFields.tsx

@@ -6,15 +6,13 @@ import { createNumberInput } from "../NumberInput/createNumberInput";
 import { createNumberField } from "../NumberField/createNumberField";
 import { createSelectField, DropdownConfig } from "../SelectField/createSelectField";
 import { SelectionControlConfig } from "./SelectionControlConfig";
-import { InputConfig } from "./InputConfig";
-import { createSearchBar, IconClose, IconSearch, SearchBarConfig } from "../";
+import { defaultInputConfig, InputConfig } from "./InputConfig";
 
 type FieldsConfig = {
   field: FieldConfig;
   input: InputConfig;
   selectionControl: SelectionControlConfig;
   dropdown: DropdownConfig;
-  searchBar: SearchBarConfig;
 };
 
 export function createFormFields(
@@ -27,12 +25,7 @@ export function createFormFields(
       },
       internalSpacing: 4,
     },
-    input: {
-      radius: 4,
-      paddingX: 16,
-      paddingY: 16,
-      fontSize: "large",
-    },
+    input: defaultInputConfig,
     selectionControl: {
       paddingY: 8,
       controlLabelSpacing: 8,
@@ -66,10 +59,6 @@ export function createFormFields(
         },
       },
     },
-    searchBar: {
-      clearIcon: IconClose,
-      searchIcon: IconSearch,
-    },
   }
 ) {
   const Field = createField(config.field);
@@ -79,7 +68,6 @@ export function createFormFields(
   const NumberInput = createNumberInput(config.input);
   const NumberField = createNumberField(Field, NumberInput);
   const SelectField = createSelectField(Field, config.input, config.dropdown);
-  const SearchBar = createSearchBar(Field, config.input, config.searchBar);
 
-  return { CheckboxField, Field, NumberField, RadioGroupField, SearchBar, SelectField, TextField };
+  return { CheckboxField, Field, NumberField, RadioGroupField, SelectField, TextField };
 }

src/SearchBar/createSearchBar.tsx

@@ -1,14 +1,14 @@
 import { useTextField } from "@react-aria/textfield";
 import { FunctionComponent, useRef } from "react";
 import useDimensions from "react-cool-dimensions";
-import { IconButton, LocalizedString } from "..";
+import { IconButton, IconClose, IconSearch, LocalizedString } from "..";
 import { Box } from "../internal";
 import { inputRecipe } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { input } from "./SearchBar.css";
-import { FieldType } from "src/Field/createField";
-import { InputConfig } from "src/Field/InputConfig";
-import { IconProps } from "src/Icons/IconProps";
+import { FieldType } from "../Field/createField";
+import { defaultInputConfig, InputConfig } from "../Field/InputConfig";
+import { IconProps } from "../Icons/IconProps";
 
 type Props = {
   value: string;
@@ -26,8 +26,11 @@ export type SearchBarConfig = {
 
 export function createSearchBar(
   Field: FieldType,
-  inputConfig: InputConfig,
-  config: SearchBarConfig
+  config: InputConfig & SearchBarConfig = {
+    ...defaultInputConfig,
+    clearIcon: IconClose,
+    searchIcon: IconSearch,
+  }
 ) {
   return function SearchBar(props: Props) {
     const inputRef = useRef<HTMLInputElement>(null);
@@ -75,7 +78,7 @@ export function createSearchBar(
             display="flex"
             justifyContent="center"
             alignItems="center"
-            paddingX={inputConfig.paddingX}
+            paddingX={config.paddingX}
             top={0}
             bottom={0}
             left={0}
@@ -97,7 +100,7 @@ export function createSearchBar(
               bodyRecipe({
                 color: props.disabled ? "disabled" : "default",
                 weight: "regular",
-                size: inputConfig.fontSize,
+                size: config.fontSize,
               }),
             ]}
             display="flex"
@@ -106,9 +109,9 @@ export function createSearchBar(
               paddingLeft: leftAccessoryWidth,
               paddingRight: rightAccessoryWidth,
             }}
-            borderRadius={inputConfig.radius}
-            paddingX={inputConfig.paddingX}
-            paddingY={inputConfig.paddingY}
+            borderRadius={config.radius}
+            paddingX={config.paddingX}
+            paddingY={config.paddingY}
           />
           {rightAccessoryContent && (
             <Box
@@ -117,7 +120,7 @@ export function createSearchBar(
               display="flex"
               justifyContent="center"
               alignItems="center"
-              paddingX={inputConfig.paddingX}
+              paddingX={config.paddingX}
               top={0}
               bottom={0}
               right={0}

stories/index.tsx

@@ -21,17 +21,18 @@ import {
   createAreaLoader,
   createAvatar,
   createFormLayoutComponents,
+  createSearchBar,
 } from "../src";
 import { sprinkles } from "./sprinkles.css";
 
 export * from "../src";
 export const Box = createBentoBox(sprinkles);
 export const { Stack, Column, Columns, Inline, Inset } = createLayoutComponents(Box);
+export const { Field, CheckboxField, NumberField, RadioGroupField, SelectField, TextField } =
+  createFormFields();
 export const Button = createButton({});
 export const Actions = createActions(Button);
 export const { Form, FormSection, FormRow } = createFormLayoutComponents(Actions);
-export const { CheckboxField, NumberField, RadioGroupField, SelectField, TextField } =
-  createFormFields();
 export const Banner = createBanner({});
 export const { Toast, ToastProvider } = createToast(Button, {});
 export const Card = createCard<24 | 32 | 40>({});
@@ -46,3 +47,4 @@ export const Tooltip = createTooltip();
 export const Tabs = createTabs();
 export const AreaLoader = createAreaLoader();
 export const Avatar = createAvatar();
+export const SearchBar = createSearchBar(Field);