@vectara/vectara-ui 19.2.0 → 19.3.1

package/lib/components/chip/Chip.d.ts

@@ -1,9 +1,10 @@
 type Props = {
     children: React.ReactNode;
+    size?: "s" | "m";
     isActive?: boolean;
     onClick: () => void;
     append?: React.ReactNode;
     "data-testid"?: string;
 };
-export declare const VuiChip: ({ children, isActive, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiChip: ({ children, size, isActive, append, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/chip/Chip.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 export const VuiChip = (_a) => {
-    var { children, isActive, append } = _a, rest = __rest(_a, ["children", "isActive", "append"]);
-    const classes = classNames("vuiChip", {
+    var { children, size = "m", isActive, append } = _a, rest = __rest(_a, ["children", "size", "isActive", "append"]);
+    const classes = classNames("vuiChip", `vuiChip--${size}`, {
         "vuiChip-isActive": isActive
     });
     return (_jsxs("button", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiChip__label" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiChip__append" }, { children: append }))] })));

package/lib/components/chip/_index.scss

@@ -4,7 +4,6 @@
   gap: $sizeXs;
   border: 1px solid var(--vui-color-border-light);
   background-color: var(--vui-color-light-shade);
-  padding: $sizeXxs $sizeS;
   border-radius: $sizeM;
   transition: all $transitionSpeed;
   box-shadow: $shadowSmallStart;
@@ -17,20 +16,45 @@
 
 .vuiChip__label {
   font-weight: $fontWeightStrong;
-  font-size: $fontSizeStandard;
   color: var(--vui-color-text);
-  // Ensures consistent chip height regardless of whether
-  // append is present or not.
-  line-height: 1.6;
 }
 
 .vuiChip__append {
   color: var(--vui-color-subdued-shade);
-  padding: $sizeXxs $sizeXs;
   font-size: $fontSizeSmall;
   border-radius: $sizeS;
 }
 
+.vuiChip--s {
+  padding: $sizeXxs $sizeXs;
+
+  .vuiChip__label {
+    font-size: $fontSizeSmall;
+    // Ensures consistent chip height regardless of whether
+    // append is present or not.
+    line-height: 1.8;
+  }
+
+  .vuiChip__append {
+    padding: $sizeXxs $sizeXxs;
+  }
+}
+
+.vuiChip--m {
+  padding: $sizeXxs $sizeS;
+
+  .vuiChip__label {
+    font-size: $fontSizeStandard;
+    // Ensures consistent chip height regardless of whether
+    // append is present or not.
+    line-height: 1.6;
+  }
+
+  .vuiChip__append {
+    padding: $sizeXxs $sizeXs;
+  }
+}
+
 .vuiChip-isActive {
   border: 1px solid var(--vui-color-primary-shade);
   background-color: var(--vui-color-empty-shade);

package/lib/components/form/select/_index.scss

@@ -23,7 +23,7 @@
 
 .vuiSelect--s {
   select {
-    padding: $sizeXxs $sizeS;
+    padding: $sizeXxs * 1.5 $sizeS;
     font-size: $fontSizeSmall;
     padding-right: 36px;
   }

package/lib/styles/index.css

@@ -1531,7 +1531,6 @@ fieldset {
   gap: 8px;
   border: 1px solid var(--vui-color-border-light);
   background-color: var(--vui-color-light-shade);
-  padding: 4px 12px;
   border-radius: 16px;
   transition: all 0.2s;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
@@ -1543,18 +1542,37 @@ fieldset {
 
 .vuiChip__label {
   font-weight: 500;
-  font-size: 14px;
   color: var(--vui-color-text);
-  line-height: 1.6;
 }
 
 .vuiChip__append {
   color: var(--vui-color-subdued-shade);
-  padding: 4px 8px;
   font-size: 12px;
   border-radius: 12px;
 }
 
+.vuiChip--s {
+  padding: 4px 8px;
+}
+.vuiChip--s .vuiChip__label {
+  font-size: 12px;
+  line-height: 1.8;
+}
+.vuiChip--s .vuiChip__append {
+  padding: 4px 4px;
+}
+
+.vuiChip--m {
+  padding: 4px 12px;
+}
+.vuiChip--m .vuiChip__label {
+  font-size: 14px;
+  line-height: 1.6;
+}
+.vuiChip--m .vuiChip__append {
+  padding: 4px 8px;
+}
+
 .vuiChip-isActive {
   border: 1px solid var(--vui-color-primary-shade);
   background-color: var(--vui-color-empty-shade);
@@ -3017,7 +3035,7 @@ h2.react-datepicker__current-month {
 }
 
 .vuiSelect--s select {
-  padding: 4px 12px;
+  padding: 6px 12px;
   font-size: 12px;
   padding-right: 36px;
 }

package/package.json

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

package/src/docs/pages/chip/Small.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { VuiChip, VuiFlexContainer, VuiSpacer, VuiToggle } from "../../../lib";
+
+export const Small = () => {
+  const [hasCounts, setHasCounts] = useState(false);
+  const [activeOption, setActiveOption] = useState<"all" | "a" | "b" | "c">("all");
+
+  return (
+    <>
+      <VuiToggle checked={hasCounts} onChange={() => setHasCounts(!hasCounts)} label="Append counts" />
+
+      <VuiSpacer size="m" />
+
+      <VuiFlexContainer spacing="xs">
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("all")}
+          isActive={activeOption === "all"}
+          append={hasCounts ? 100 : undefined}
+        >
+          All options
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("a")}
+          isActive={activeOption === "a"}
+          append={hasCounts ? 2 : undefined}
+        >
+          Option A
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("b")}
+          isActive={activeOption === "b"}
+          append={hasCounts ? 81 : undefined}
+        >
+          Option B
+        </VuiChip>
+
+        <VuiChip
+          size="s"
+          onClick={() => setActiveOption("c")}
+          isActive={activeOption === "c"}
+          append={hasCounts ? 16 : undefined}
+        >
+          Option C
+        </VuiChip>
+      </VuiFlexContainer>
+    </>
+  );
+};

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

@@ -1,11 +1,22 @@
 import { Chip } from "./Chip";
+import { Small } from "./Small";
+
 const ChipSource = require("!!raw-loader!./Chip");
+const SmallSource = require("!!raw-loader!./Small");
 
 export const chip = {
   name: "Chip",
   path: "/chip",
-  example: {
-    component: <Chip />,
-    source: ChipSource.default.toString()
-  }
+  examples: [
+    {
+      name: "Chip",
+      component: <Chip />,
+      source: ChipSource.default.toString()
+    },
+    {
+      name: "Small",
+      component: <Small />,
+      source: SmallSource.default.toString()
+    }
+  ]
 };