@vectara/vectara-ui 16.8.0 → 16.10.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/button/BaseButton.d.ts

@@ -26,6 +26,7 @@ export type BaseButtonProps = {
     isSubmit?: boolean;
     isLoading?: boolean;
     truncate?: boolean;
+    "aria-label"?: string;
 };
 export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
     spinnerColor?: "accent" | "primary" | "success" | "warning" | "danger" | "subdued" | "empty" | "dark" | undefined;

package/lib/components/button/BaseButton.js

@@ -15,6 +15,7 @@ import classNames from "classnames";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 import { useVuiContext } from "../context/Context";
 import { VuiSpinner } from "../spinner/Spinner";
+import { VuiTooltip } from "../tooltip/Tooltip";
 const alignToClassMap = {
     left: "vuiBaseButton--alignLeft",
     center: "vuiBaseButton--alignCenter",
@@ -27,12 +28,13 @@ const sizeToSpinnerSizeMap = {
     l: "m"
 };
 export const BaseButton = forwardRef((_a, ref) => {
-    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor, truncate } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor", "truncate"]);
+    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, onMouseOver, onMouseOut, onMouseMove, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor, truncate, "aria-label": ariaLabel } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor", "truncate", "aria-label"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], {
         "vuiBaseButton-isInert": isInert,
         "vuiBaseButton-isDisabled": isDisabled,
         "vuiBaseButton--fullWidth": fullWidth,
+        "vuiBaseButton--truncate": truncate,
         [`vuiBaseButton--${isLoading ? "left" : iconSide}`]: (Boolean(icon) || isLoading) && Boolean(children)
     });
     let iconContainer;
@@ -42,33 +44,40 @@ export const BaseButton = forwardRef((_a, ref) => {
     else if (icon) {
         iconContainer = _jsx("span", Object.assign({ className: "vuiBaseButtonIconContainer" }, { children: icon }));
     }
-    // This is useful for controlling other elements, e.g. creating an <input type="file" />
-    // for uploading files and adding a button to trigger it.
+    let button;
     if (htmlFor) {
-        return (_jsxs("label", Object.assign({ htmlFor: htmlFor, className: classes, tabIndex: tabIndex }, rest, { children: [iconContainer, children] })));
+        // This is useful for controlling other elements, e.g. creating an <input type="file" />
+        // for uploading files and adding a button to trigger it.
+        button = (_jsxs("label", Object.assign({ "aria-label": ariaLabel, htmlFor: htmlFor, className: classes, tabIndex: tabIndex }, rest, { children: [iconContainer, children] })));
     }
-    // Anchor tags can't be disabled, so we'll just render a button instead
-    // if isDisabled is true.
-    if (href && !isDisabled) {
+    else if (href && !isDisabled) {
+        // Anchor tags can't be disabled, so we'll just render a button instead
+        // if isDisabled is true.
         const wrapperClasses = classNames("vuiBaseButtonLinkWrapper", {
             "vuiBaseButtonLinkWrapper--fullWidth": fullWidth
         });
-        return createLink(Object.assign(Object.assign({ className: wrapperClasses, href,
+        button = createLink(Object.assign(Object.assign({ className: wrapperClasses, href,
             onClick,
             onMouseOver,
             onMouseOut,
             onMouseMove, children: (
             //* Wrap a button otherwise the flex layout breaks */}
-            _jsxs("button", Object.assign({ className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
+            _jsxs("button", Object.assign({ "aria-label": ariaLabel, className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
             tabIndex }, rest), getTrackingProps(track)));
     }
-    const labelClasses = classNames({
-        "vuiBaseButtonLabel--truncate": truncate
-    });
-    const props = Object.assign({ onClick,
-        onMouseOver,
-        onMouseOut,
-        onMouseMove,
-        tabIndex, type: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
-    return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, _jsx("span", Object.assign({ className: labelClasses }, { children: children }))] })));
+    else {
+        const labelClasses = classNames({
+            "vuiBaseButtonLabel--truncate": truncate
+        });
+        const props = Object.assign({ onClick,
+            onMouseOver,
+            onMouseOut,
+            onMouseMove,
+            tabIndex, type: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
+        button = (_jsxs("button", Object.assign({ "aria-label": ariaLabel, className: classes }, props, { ref: ref }, { children: [iconContainer, _jsx("span", Object.assign({ className: labelClasses }, { children: children }))] })));
+    }
+    if (ariaLabel) {
+        return _jsx(VuiTooltip, Object.assign({ tip: ariaLabel }, { children: button }));
+    }
+    return button;
 });

package/lib/components/button/baseButton.scss

@@ -70,6 +70,11 @@
   width: 100%;
 }
 
+.vuiBaseButton--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 // Size
 .vuiBaseButton--xs {
   font-size: $fontSizeSmall;

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 {
@@ -749,6 +766,11 @@ fieldset {
   width: 100%;
 }
 
+.vuiBaseButton--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .vuiBaseButton--xs {
   font-size: 12px;
   padding: 4px 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.8.0",
+  "version": "16.10.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/button/Icons.tsx

@@ -18,7 +18,7 @@ export const Icons = () => {
       </Subsection>
 
       <Subsection title="Icon only">
-        <VuiButtonPrimary icon={icon} color="primary" size="m" />
+        <VuiButtonPrimary icon={icon} color="primary" size="m" aria-label="Add to favorites" />
       </Subsection>
     </>
   );

package/src/docs/pages/button/Truncate.tsx

@@ -13,7 +13,7 @@ export const Truncate = () => {
           </VuiIcon>
         }
       >
-        A very long label that will get truncated
+        A very long label that will get truncated eventually if the text is long enough
       </VuiButtonSecondary>
     </div>
   );