feat: Integrate FormSeparator component into demo and update styling …

…to add slight opacity to text
TeselaGen · Dec 3, 2024 · d9c86f0 · d9c86f0
1 parent 0328016
commit d9c86f0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/ui/demo/src/index.js b/packages/ui/demo/src/index.js
@@ -33,6 +33,7 @@ import FormComponents from "./examples/FormComponents";
 import UploadCsvWizard from "./examples/UploadCsvWizard";
 import TagSelectDemo from "./examples/TagSelectDemo";
 import { createRoot } from "react-dom/client";
+import { FormSeparator } from "../../src/FormComponents/FormSeparator";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -149,6 +150,16 @@ const demos = {
       }
     ]
   },
+  FormSeparator: {
+    demo: FormSeparator,
+    props: [
+      {
+        name: "label",
+        description: "The text to display in the separator",
+        type: "string"
+      }
+    ]
+  },
   MenuBar: {
     demo: MenuBar,
     props: [

diff --git a/packages/ui/src/FormComponents/FormSeparator.js b/packages/ui/src/FormComponents/FormSeparator.js
@@ -3,7 +3,7 @@ import "./style.css";
 export const FormSeparator = ({ label = "or" } = {}) => {
   return (
     <div className="form-separator">
-      <p>{label}</p>
+      <p style={{ opacity: 0.8 }}>{label}</p>
     </div>
   );
 };