@vectara/vectara-ui 16.9.0 → 16.11.0

package/lib/components/badge/Badge.d.ts

@@ -11,6 +11,7 @@ type Props = {
     target?: LinkProps["target"];
     track?: LinkProps["track"];
     isSelected?: boolean;
+    size?: "s" | "m" | "l";
 };
-export declare const VuiBadge: ({ children, className, color, onClick, onClose, href, target, track, isSelected, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiBadge: ({ children, className, color, onClick, onClose, href, target, track, isSelected, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/badge/Badge.js

@@ -21,10 +21,10 @@ import { VuiFlexItem } from "../flex/FlexItem";
 import { createId } from "../../utils/createId";
 export const BADGE_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"];
 export const VuiBadge = (_a) => {
-    var { children, className, color, onClick, onClose, href, target, track, isSelected } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "onClose", "href", "target", "track", "isSelected"]);
+    var { children, className, color, onClick, onClose, href, target, track, isSelected, size = "m" } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "onClose", "href", "target", "track", "isSelected", "size"]);
     const { createLink } = useVuiContext();
     const id = onClose ? createId() : undefined;
-    const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, {
+    const classes = classNames(className, "vuiBadge", `vuiBadge--${size}`, `vuiBadge--${color}`, {
         "vuiBadge--clickable": onClick !== null && onClick !== void 0 ? onClick : href
     });
     const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [isSelected && (_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xs", color: "inherit", className: "vuiBadge__icon" }, { children: _jsx(BiCheck, {}) })) })), _jsx(VuiFlexItem, Object.assign({ id: id }, { children: _jsx("div", Object.assign({ className: "vuiBadge__content" }, { children: children })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", "aria-describedby": id, size: "xs", color: "subdued", className: "vuiBadge__icon", onClick: (e) => {

package/lib/components/badge/_index.scss

@@ -2,13 +2,30 @@
 
 .vuiBadge {
   display: inline-block;
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.vuiBadge--l {
+  font-size: $fontSizeMedium;
+  line-height: 1.25;
+  padding: $sizeXs $sizeS;
+  border-radius: $sizeL;
+}
+
+.vuiBadge--m {
   font-size: $fontSizeSmall;
   line-height: 1.25;
   padding: $sizeXxs $sizeXs;
   border-radius: $sizeS;
-  font-family: inherit;
-  white-space: nowrap;
-  text-decoration: none;
+}
+
+.vuiBadge--s {
+  font-size: $fontSizeXsmall;
+  line-height: 1.25;
+  padding: $sizeXxxs $sizeXs;
+  border-radius: $sizeS;
 }
 
 .vuiBadge--clickable {

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/sassUtils/_typography.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 
+$fontSizeXsmall: 10px;
 $fontSizeSmall: 12px;
 $fontSizeStandard: 14px;
 $fontSizeMedium: 16px;

package/lib/styles/index.css

@@ -592,13 +592,30 @@ fieldset {
 
 .vuiBadge {
   display: inline-block;
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.vuiBadge--l {
+  font-size: 16px;
+  line-height: 1.25;
+  padding: 8px 12px;
+  border-radius: 24px;
+}
+
+.vuiBadge--m {
   font-size: 12px;
   line-height: 1.25;
   padding: 4px 8px;
   border-radius: 12px;
-  font-family: inherit;
-  white-space: nowrap;
-  text-decoration: none;
+}
+
+.vuiBadge--s {
+  font-size: 10px;
+  line-height: 1.25;
+  padding: 2px 8px;
+  border-radius: 12px;
 }
 
 .vuiBadge--clickable {
@@ -4706,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.9.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/badge/BadgeColors.tsx

@@ -1,13 +1,44 @@
 import { BADGE_COLOR, VuiBadge, VuiFlexContainer, VuiFlexItem } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
 
 export const BadgeColors = () => {
   return (
-    <VuiFlexContainer>
-      {BADGE_COLOR.map((color) => (
-        <VuiFlexItem grow={false} key={color}>
-          <VuiBadge color={color}>Color {color}</VuiBadge>
-        </VuiFlexItem>
-      ))}
-    </VuiFlexContainer>
+    <>
+      <Subsection title="Large">
+        <VuiFlexContainer>
+          {BADGE_COLOR.map((color) => (
+            <VuiFlexItem grow={false} key={color}>
+              <VuiBadge size="l" color={color}>
+                Color {color}
+              </VuiBadge>
+            </VuiFlexItem>
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Medium">
+        <VuiFlexContainer>
+          {BADGE_COLOR.map((color) => (
+            <VuiFlexItem grow={false} key={color}>
+              <VuiBadge size="m" color={color}>
+                Color {color}
+              </VuiBadge>
+            </VuiFlexItem>
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Small">
+        <VuiFlexContainer>
+          {BADGE_COLOR.map((color) => (
+            <VuiFlexItem grow={false} key={color}>
+              <VuiBadge size="s" color={color}>
+                Color {color}
+              </VuiBadge>
+            </VuiFlexItem>
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
   );
 };

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