Polishing search bar (#1917)

* Polishing search bar

* Adjusting

* Incorporating changes, bumping version

* Adding system avatars

* llama

---------

Co-authored-by: édouard wautier <[email protected]>

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/components/Searchbar.tsx

@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 
-import { MagnifyingGlass } from "@sparkle/icons/stroke";
+import { Icon } from "@sparkle/components/Icon";
 import { classNames } from "@sparkle/lib/utils";
 
+import { MagnifyingGlassStrokeIcon, XMarkIcon } from "..";
+import { IconButton } from "./IconButton";
+
 export function Searchbar({
   placeholder,
   value,
@@ -24,20 +27,33 @@ export function Searchbar({
   disabled?: boolean;
   className?: string;
 }) {
+  const clearInputField = () => {
+    onChange?.("");
+  };
+
   return (
     <div className="flex flex-col">
-      <div className="s-relative s-text-sm s-font-medium s-text-element-800">
+      <div
+        className={classNames(
+          "s-relative s-text-sm s-font-normal",
+          disabled ? "s-text-element-600" : "s-text-element-900"
+        )}
+      >
         <input
           type="text"
           name={name}
           id={name}
           className={classNames(
-            "s-h-9 s-w-full s-rounded-full s-border-structure-200 s-pr-8",
+            "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
+            "s-w-full s-rounded-full  s-bg-structure-50 s-py-1.5 s-pl-4 s-pr-8 s-placeholder-element-600",
+            "s-transition-all s-duration-300 s-ease-out",
             className ?? "",
             !error
-              ? "focus:ring-action-500 s-border-gray-300 focus:s-border-action-500"
-              : "focus:border-red-500 focus:ring-red-500 s-border-red-500",
-            "s-bg-structure-50 s-stroke-structure-50"
+              ? "focus:s-ring-action-300"
+              : "s-ring-red-200 focus:s-ring-red-200",
+            disabled
+              ? "s-cursor-default s-text-element-600"
+              : "s-text-element-900"
           )}
           placeholder={placeholder}
           value={value ?? ""}
@@ -47,11 +63,22 @@ export function Searchbar({
           onKeyDown={onKeyDown}
           disabled={disabled}
         />
-        <MagnifyingGlass className="s-absolute s-right-3 s-top-2 s-h-5 s-w-5" />
+        <div className="s-absolute s-right-0 s-top-0 s-flex s-h-full s-items-center s-pr-3">
+          {value && onChange ? (
+            <IconButton
+              icon={XMarkIcon}
+              variant="secondary"
+              size="sm"
+              onClick={clearInputField}
+            />
+          ) : (
+            <Icon visual={MagnifyingGlassStrokeIcon} size="sm" />
+          )}
+        </div>
       </div>
       <div
         className={classNames(
-          "s-ml-2 s-h-4 s-text-red-500",
+          "s-ml-0.5 s-h-4 s-pl-2 s-pt-2 s-text-xs s-font-normal s-text-red-500",
           showErrorLabel ? "" : "hidden"
         )}
       >

sparkle/src/stories/Searchbar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
+import React, { useState } from "react";
 
 import { Searchbar } from "../index_with_tw_base";
 
@@ -10,34 +10,63 @@ const meta = {
 
 export default meta;
 
-export const SearchbarExample = () => (
-  <div className="s-grid s-grid-cols-3 s-gap-4">
-    <Searchbar placeholder="placeholder" name="input" value={null} />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored"}
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"disabled"}
-      showErrorLabel
-    />
-  </div>
-);
+export const SearchbarExample = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [inputValue2, setInputValue2] = useState("value");
+  const [inputValue3, setInputValue3] = useState("value");
+  const [inputValue4, setInputValue4] = useState("value");
+
+  const handleChange = (value: string) => {
+    setInputValue(value);
+  };
+  const handleChange2 = (value: string) => {
+    setInputValue2(value);
+  };
+  const handleChange3 = (value: string) => {
+    setInputValue3(value);
+  };
+  const handleChange4 = (value: string) => {
+    setInputValue4(value);
+  };
+
+  return (
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue}
+        onChange={handleChange}
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue2}
+        onChange={handleChange2}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue3}
+        onChange={handleChange3}
+        error={"errored"}
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue4}
+        onChange={handleChange4}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={"disabled"}
+        showErrorLabel
+        disabled
+      />
+    </div>
+  );
+};