@vectara/vectara-ui 9.14.1 → 9.15.0

package/lib/components/form/label/Label.d.ts

@@ -2,6 +2,7 @@ type Props = {
     className?: string;
     labelFor?: string;
     children: React.ReactNode;
+    size?: "xs" | "s";
 };
-export declare const VuiLabel: ({ className, labelFor, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiLabel: ({ className, labelFor, children, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/form/label/Label.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 export const VuiLabel = (_a) => {
-    var { className, labelFor, children } = _a, rest = __rest(_a, ["className", "labelFor", "children"]);
-    const classes = classNames("vuiLabel", className);
+    var { className, labelFor, children, size = "s" } = _a, rest = __rest(_a, ["className", "labelFor", "children", "size"]);
+    const classes = classNames("vuiLabel", `vuiLabel--${size}`, className);
     return (_jsx("label", Object.assign({ className: classes, htmlFor: labelFor }, rest, { children: children })));
 };

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

@@ -1,5 +1,12 @@
 .vuiLabel {
-  font-size: $labelFontSize;
   font-weight: $labelFontWeight;
   color: $labelColor;
 }
+
+.vuiLabel--xs {
+  font-size: $fontSizeSmall;
+}
+
+.vuiLabel--s {
+  font-size: $fontSizeStandard;
+}

package/lib/components/formGroup/FormGroup.d.ts

@@ -1,10 +1,11 @@
 type Props = {
     labelFor: string;
     label: string;
+    labelSize?: "s" | "xs";
     children: React.ReactElement;
     helpText?: React.ReactNode;
     errors?: string[];
     isRequired?: boolean;
 };
-export declare const VuiFormGroup: ({ children, labelFor, helpText, label, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/formGroup/FormGroup.js

@@ -10,7 +10,7 @@ import { VuiNumberInput } from "../form/input/NumberInput";
 import { VuiTextArea } from "../form/textArea/TextArea";
 import { VuiSelect } from "../form/select/Select";
 const VALIDATION_ALLOWLIST = [VuiTextInput, VuiNumberInput, VuiTextArea, VuiSelect];
-export const VuiFormGroup = ({ children, labelFor, helpText, label, errors, isRequired }) => {
+export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", errors, isRequired }) => {
     const ariaProps = {
         "aria-describedby": ""
     };
@@ -33,5 +33,5 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, errors, isRe
         cloneProps.isInvalid = errors && errors.length > 0;
     }
     const content = cloneElement(children, cloneProps);
-    return (_jsxs("div", { children: [_jsxs(VuiLabel, Object.assign({ labelFor: labelFor }, { children: [label, isRequired && " (required)"] })), _jsx(VuiSpacer, { size: "xs" }), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
+    return (_jsxs("div", { children: [_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" }), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
 };

package/lib/components/typography/_title.scss

@@ -13,7 +13,7 @@ $size: (
     color: $colorText
   ),
   xs: (
-    size: $labelFontSize,
+    size: $fontSizeStandard,
     line-height: 1.4,
     weight: $labelFontWeight,
     color: $labelColor

package/lib/sassUtils/_typography.scss

@@ -17,6 +17,5 @@ $fontWeightStrong: 500;
 $fontWeightBold: 600;
 $fontWeightHeavy: 800;
 
-$labelFontSize: $fontSizeStandard;
 $labelFontWeight: $fontWeightBold;
 $labelColor: $colorText;

package/lib/styles/index.css

@@ -2582,11 +2582,18 @@ h2.react-datepicker__current-month {
 }
 
 .vuiLabel {
-  font-size: 14px;
   font-weight: 600;
   color: #1c1d22;
 }
 
+.vuiLabel--xs {
+  font-size: 12px;
+}
+
+.vuiLabel--s {
+  font-size: 14px;
+}
+
 .vuiRadioButtonLabel {
   font-size: 14px;
 }

package/package.json

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