Merge pull request #36 from buildo/3147480-implement_searchbar

#3147480: Implement SearchBar

Author: veej

Diff for: 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",
+};

Diff for: src/Field/createFormFields.tsx

@@ -6,7 +6,7 @@ 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 { defaultInputConfig, InputConfig } from "./InputConfig";
 
 type FieldsConfig = {
   field: FieldConfig;
@@ -25,12 +25,7 @@ export function createFormFields(
       },
       internalSpacing: 4,
     },
-    input: {
-      radius: 4,
-      paddingX: 16,
-      paddingY: 16,
-      fontSize: "large",
-    },
+    input: defaultInputConfig,
     selectionControl: {
       paddingY: 8,
       controlLabelSpacing: 8,

Diff for: src/Icons/IconSearch.tsx

@@ -0,0 +1,10 @@
+import { IconProps } from "./IconProps";
+import { svgIconProps } from "./svgIconProps";
+
+export function IconSearch(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" {...svgIconProps(props)}>
+      <path d="M9.579 0A9.586 9.586 0 0 0 .136 7.972a9.58 9.58 0 0 0 6.269 10.65 9.585 9.585 0 0 0 8.56-1.11l5.923 5.916a1.797 1.797 0 1 0 2.54-2.54l-5.918-5.92A9.58 9.58 0 0 0 9.579 0Zm-5.99 9.582a5.988 5.988 0 0 1 5.99-5.989 5.99 5.99 0 0 1 4.236 10.224A5.99 5.99 0 0 1 3.589 9.582Z" />
+    </svg>
+  );
+}

Diff for: src/Icons/index.ts

@@ -7,5 +7,6 @@ export * from "./IconClose";
 export * from "./IconInformative";
 export * from "./IconNegative";
 export * from "./IconProps";
+export * from "./IconSearch";
 export * from "./IconUser";
 export * from "./IconWarning";

Diff for: src/SearchBar/SearchBar.css.ts

@@ -0,0 +1,12 @@
+import { style } from "@vanilla-extract/css";
+
+export const input = style({
+  selectors: {
+    [`&::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration`]: {
+      WebkitAppearance: "none",
+    },
+  },
+});

Diff for: src/SearchBar/createSearchBar.tsx

@@ -0,0 +1,135 @@
+import { useTextField } from "@react-aria/textfield";
+import { FunctionComponent, useRef } from "react";
+import useDimensions from "react-cool-dimensions";
+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 "../Field/createField";
+import { defaultInputConfig, InputConfig } from "../Field/InputConfig";
+import { IconProps } from "../Icons/IconProps";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => unknown;
+  onBlur?: () => unknown;
+  placeholder: LocalizedString;
+  disabled?: boolean;
+  clearButtonLabel: LocalizedString;
+};
+
+export type SearchBarConfig = {
+  clearIcon: FunctionComponent<IconProps>;
+  searchIcon: FunctionComponent<IconProps>;
+};
+
+export function createSearchBar(
+  Field: FieldType,
+  config: InputConfig & SearchBarConfig = {
+    ...defaultInputConfig,
+    clearIcon: IconClose,
+    searchIcon: IconSearch,
+  }
+) {
+  return function SearchBar(props: Props) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const { observe: leftAccessoryRef, width: leftAccessoryWidth } = useDimensions({
+      // This is needed to include the padding in the width calculation
+      useBorderBoxSize: true,
+    });
+
+    const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
+      // This is needed to include the padding in the width calculation
+      useBorderBoxSize: true,
+    });
+
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
+      {
+        ...props,
+        isDisabled: props.disabled,
+      },
+      inputRef
+    );
+
+    const rightAccessoryContent =
+      props.value.length > 0 ? (
+        <IconButton
+          label={props.clearButtonLabel}
+          onPress={() => props.onChange("")}
+          size={16}
+          icon={config.clearIcon}
+          color="primary"
+        />
+      ) : null;
+
+    return (
+      <Field
+        {...props}
+        labelProps={labelProps}
+        assistiveTextProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+      >
+        <Box position="relative" display="flex">
+          <Box
+            ref={leftAccessoryRef}
+            position="absolute"
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            paddingX={config.paddingX}
+            top={0}
+            bottom={0}
+            left={0}
+          >
+            <config.searchIcon size={16} />
+          </Box>
+          <Box
+            as="input"
+            type="search"
+            ref={inputRef}
+            {...inputProps}
+            // NOTE(gabro): this is to please TS, since the inputProps type is very broad
+            color={undefined}
+            width="full"
+            height={undefined}
+            className={[
+              input,
+              inputRecipe({ validation: "valid" }),
+              bodyRecipe({
+                color: props.disabled ? "disabled" : "default",
+                weight: "regular",
+                size: config.fontSize,
+              }),
+            ]}
+            display="flex"
+            style={{
+              flexGrow: 1,
+              paddingLeft: leftAccessoryWidth,
+              paddingRight: rightAccessoryWidth,
+            }}
+            borderRadius={config.radius}
+            paddingX={config.paddingX}
+            paddingY={config.paddingY}
+          />
+          {rightAccessoryContent && (
+            <Box
+              ref={rightAccessoryRef}
+              position="absolute"
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              paddingX={config.paddingX}
+              top={0}
+              bottom={0}
+              right={0}
+            >
+              {rightAccessoryContent}
+            </Box>
+          )}
+        </Box>
+      </Field>
+    );
+  };
+}

Diff for: src/index.ts

@@ -23,6 +23,7 @@ export * from "./Link/createLink";
 export * from "./List/createList";
 export * from "./Modal/createModal";
 export * from "./Placeholder/Placeholder";
+export * from "./SearchBar/createSearchBar";
 export * from "./Tabs/createTabs";
 export * from "./Toast/createToast";
 export * from "./Toast/useToast";

Diff for: stories/Components/SearchBar.stories.tsx

@@ -0,0 +1,16 @@
+import { SearchBar } from "../";
+import { createComponentStories, formatMessage, textArgType } from "../util";
+
+const { defaultExport, createControlledStory } = createComponentStories({
+  component: SearchBar,
+  args: {
+    placeholder: formatMessage("Search for anything"),
+  },
+  argTypes: {
+    placeholder: textArgType,
+  },
+});
+
+export default defaultExport;
+
+export const searchBar = createControlledStory("design systems", {});

Diff for: 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);