@vectara/vectara-ui 16.0.0 → 16.0.1

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

@@ -1,6 +1,6 @@
 type Props = {
-    labelFor: string;
-    label: string;
+    labelFor?: string;
+    label?: string;
     labelSize?: "s" | "xs";
     children: React.ReactElement;
     helpText?: React.ReactNode;

package/lib/components/formGroup/FormGroup.js

@@ -33,5 +33,5 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
         cloneProps.isInvalid = errors && errors.length > 0;
     }
     const content = cloneElement(children, cloneProps);
-    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] }));
+    return (_jsxs("div", { children: [label && (_jsxs(_Fragment, { 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/package.json

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

package/src/docs/pages/formGroup/NoLabel.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { VuiFormGroup, VuiSpacer, VuiTextInput, VuiToggle } from "../../../lib";
+
+export const NoLabel = () => {
+  const [showError, setShowError] = useState(false);
+
+  return (
+    <>
+      <VuiToggle label="Show error message" onChange={(e) => setShowError(e.target.checked)} />
+
+      <VuiSpacer size="m" />
+
+      <VuiFormGroup errors={showError ? ["This is an error message."] : []}>
+        <VuiTextInput value="Text input" onChange={() => undefined} />
+      </VuiFormGroup>
+    </>
+  );
+};

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

@@ -1,9 +1,11 @@
 import { FormGroup } from "./FormGroup";
 import { NonFormElement } from "./NonFormElement";
+import { NoLabel } from "./NoLabel";
 import { Size } from "./Size";
 
 const FormGroupSource = require("!!raw-loader!./FormGroup");
 const NonFormElementSource = require("!!raw-loader!./NonFormElement");
+const NoLabelSource = require("!!raw-loader!./NoLabel");
 const SizeSource = require("!!raw-loader!./Size");
 
 export const formGroup = {
@@ -20,6 +22,11 @@ export const formGroup = {
       component: <NonFormElement />,
       source: NonFormElementSource.default.toString()
     },
+    {
+      name: "Without label",
+      component: <NoLabel />,
+      source: NoLabelSource.default.toString()
+    },
     {
       name: "Label size",
       component: <Size />,