@vectara/vectara-ui 16.10.0 → 16.11.0

package/lib/components/searchInput/SearchInput.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEventHandler, FormEventHandler, KeyboardEventHandler } from "react";
 import { SearchSuggestion } from "./types";
-declare const SIZE: readonly ["m", "l"];
+declare const SIZE: readonly ["s", "m", "l"];
 type Props = {
     className?: string;
     value?: string;

package/lib/components/searchInput/SearchInput.js

@@ -18,7 +18,12 @@ import { VuiIcon } from "../icon/Icon";
 import { VuiSearchInputSuggestions } from "./SearchInputSuggestions";
 import { createId } from "../../utils/createId";
 import { VuiSpinner } from "../spinner/Spinner";
-const SIZE = ["m", "l"];
+const SIZE = ["s", "m", "l"];
+const sizeToIconSizeMap = {
+    s: "xs",
+    m: "s",
+    l: "m"
+};
 export const VuiSearchInput = (_a) => {
     var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, onSelectSuggestion, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "onSelectSuggestion", "isLoading"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
@@ -169,7 +174,7 @@ export const VuiSearchInput = (_a) => {
     return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes, "aria-live": "polite", "aria-atomic": "true", "aria-busy": isLoading ? "true" : "false" }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: inputClasses, type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange, onFocus: handleInputFocus, onKeyDown: (e) => {
                         handleInputKeyDown(e);
                         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), ghostText && (_jsxs("div", Object.assign({ className: "vuiSearchInput__ghostText", "aria-hidden": "true" }, { children: [_jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--hidden" }, { children: value })), _jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--visible" }, { children: ghostText }))] }))), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
+                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), ghostText && (_jsxs("div", Object.assign({ className: "vuiSearchInput__ghostText", "aria-hidden": "true" }, { children: [_jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--hidden" }, { children: value })), _jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--visible" }, { children: ghostText }))] }))), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: sizeToIconSizeMap[size] }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
                         e.preventDefault();
                         onClear();
                     } })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs, onSelectSuggestion: onSelectSuggestion }))] })) })));

package/lib/components/searchInput/_index.scss

@@ -45,6 +45,17 @@
   }
 }
 
+.vuiSearchInput--s {
+  .vuiSearchInput__icon {
+    top: $sizeXxs + 3px;
+  }
+
+  .vuiSearchInput__input {
+    padding: $sizeXs * 0.6 $sizeS $sizeXs * 0.6 $sizeL + $sizeS;
+    font-size: $fontSizeStandard;
+  }
+}
+
 .vuiSearchInput--m {
   .vuiSearchInput__icon {
     top: $sizeXs + 1px;

package/lib/styles/index.css

@@ -4723,6 +4723,14 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-accent-shade);
 }
 
+.vuiSearchInput--s .vuiSearchInput__icon {
+  top: 7px;
+}
+.vuiSearchInput--s .vuiSearchInput__input {
+  padding: 4.8px 12px 4.8px 36px;
+  font-size: 14px;
+}
+
 .vuiSearchInput--m .vuiSearchInput__icon {
   top: 9px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.10.0",
+  "version": "16.11.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/searchInput/SearchInput.tsx

@@ -1,31 +1,86 @@
 import { useState } from "react";
 import { VuiButtonPrimary, VuiFlexContainer, VuiFlexItem, VuiSearchInput } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
 
 export const SearchInput = () => {
   const [searchValue, setSearchValue] = useState("");
 
   return (
-    <form>
-      <VuiFlexContainer alignItems="center">
-        <VuiFlexItem grow={1}>
-          <VuiSearchInput
-            autoFocus
-            placeholder="Ask a question"
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            onSubmit={(e) => {
-              e.preventDefault();
-              alert(`Submit ${searchValue}`);
-            }}
-          />
-        </VuiFlexItem>
+    <>
+      <Subsection title="Large size">
+        <VuiFlexContainer alignItems="center">
+          <VuiFlexItem grow={1}>
+            <VuiSearchInput
+              size="l"
+              placeholder="Ask a question"
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              onSubmit={(e) => {
+                e.preventDefault();
+                alert(`Submit ${searchValue}`);
+              }}
+            />
+          </VuiFlexItem>
 
-        <VuiFlexItem>
-          <VuiButtonPrimary color="primary" size="m">
-            Search
-          </VuiButtonPrimary>
-        </VuiFlexItem>
-      </VuiFlexContainer>
-    </form>
+          <VuiFlexItem>
+            <VuiButtonPrimary color="primary" size="l">
+              Search
+            </VuiButtonPrimary>
+          </VuiFlexItem>
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Medium size">
+        <form>
+          <VuiFlexContainer alignItems="center" spacing="s">
+            <VuiFlexItem grow={1}>
+              <VuiSearchInput
+                autoFocus
+                placeholder="Ask a question"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  alert(`Submit ${searchValue}`);
+                }}
+                size="m"
+              />
+            </VuiFlexItem>
+
+            <VuiFlexItem>
+              <VuiButtonPrimary color="primary" size="m">
+                Search
+              </VuiButtonPrimary>
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        </form>
+      </Subsection>
+
+      <Subsection title="Small size">
+        <form>
+          <VuiFlexContainer alignItems="center" spacing="xs">
+            <VuiFlexItem grow={1}>
+              <VuiSearchInput
+                autoFocus
+                placeholder="Ask a question"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  alert(`Submit ${searchValue}`);
+                }}
+                size="s"
+              />
+            </VuiFlexItem>
+
+            <VuiFlexItem>
+              <VuiButtonPrimary color="primary" size="s">
+                Search
+              </VuiButtonPrimary>
+            </VuiFlexItem>
+          </VuiFlexContainer>
+        </form>
+      </Subsection>
+    </>
   );
 };

package/src/docs/pages/searchInput/index.tsx

@@ -1,11 +1,9 @@
 import { SearchInput } from "./SearchInput";
-import { Large } from "./Large";
 import { ClearableSearchInput } from "./Clearable";
 import { Suggestions } from "./Suggestions";
 import { ValueSuggestions } from "./ValueSuggestions";
 
 const SearchInputSource = require("!!raw-loader!./SearchInput");
-const LargeSource = require("!!raw-loader!./Large");
 const ClearableInputSource = require("!!raw-loader!./Clearable");
 const SuggestionsSource = require("!!raw-loader!./Suggestions");
 const ValueSuggestionsSource = require("!!raw-loader!./ValueSuggestions");
@@ -19,11 +17,6 @@ export const searchInput = {
       component: <SearchInput />,
       source: SearchInputSource.default.toString()
     },
-    {
-      name: "Large size",
-      component: <Large />,
-      source: LargeSource.default.toString()
-    },
     {
       name: "Clearable input",
       component: <ClearableSearchInput />,

package/src/docs/pages/searchInput/Large.tsx

@@ -1,29 +0,0 @@
-import { useState } from "react";
-import { VuiButtonPrimary, VuiFlexContainer, VuiFlexItem, VuiSearchInput } from "../../../lib";
-
-export const Large = () => {
-  const [searchValue, setSearchValue] = useState("");
-
-  return (
-    <VuiFlexContainer alignItems="center">
-      <VuiFlexItem grow={1}>
-        <VuiSearchInput
-          size="l"
-          placeholder="Ask a question"
-          value={searchValue}
-          onChange={(e) => setSearchValue(e.target.value)}
-          onSubmit={(e) => {
-            e.preventDefault();
-            alert(`Submit ${searchValue}`);
-          }}
-        />
-      </VuiFlexItem>
-
-      <VuiFlexItem>
-        <VuiButtonPrimary color="primary" size="l">
-          Search
-        </VuiButtonPrimary>
-      </VuiFlexItem>
-    </VuiFlexContainer>
-  );
-};