Merge pull request #111 from TeselaGen/form-separator

feat: Add form separator component
TeselaGen · Dec 3, 2024 · 0328016 · 0328016
2 parents cf0db74 + 5d0bebe
commit 0328016
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/packages/ui/demo/src/examples/FormComponents.js b/packages/ui/demo/src/examples/FormComponents.js
@@ -23,7 +23,8 @@ import {
   ReactColorField,
   SuggestField,
   InfoHelper,
-  showConfirmationDialog
+  showConfirmationDialog,
+  FormSeparator
 } from "../../../src";
 import { useToggle } from "../useToggle";
 import OptionsSection from "../OptionsSection";
@@ -314,6 +315,7 @@ function FormComponentsDemo({ handleSubmit }) {
             onFieldSubmit={onFieldSubmit}
             containerStyle={{ background: "black", height: 200 }}
           />
+          <FormSeparator />
           <div style={{ display: "flex" }}>
             <InputField
               name={"inputFieldWithTooltipError"}

diff --git a/packages/ui/src/FormComponents/FormSeparator.js b/packages/ui/src/FormComponents/FormSeparator.js
@@ -0,0 +1,9 @@
+import React from "react";
+import "./style.css";
+export const FormSeparator = ({ label = "or" } = {}) => {
+  return (
+    <div className="form-separator">
+      <p>{label}</p>
+    </div>
+  );
+};
diff --git a/packages/ui/src/FormComponents/style.css b/packages/ui/src/FormComponents/style.css
@@ -249,3 +249,27 @@
 .bp3-dark .tg-color-picker-selector input {
   color: #222222;
 }
+
+.form-separator {
+  p {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  p::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-right: 16px;
+  }
+  p::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-left: 16px;
+  }
+}
diff --git a/packages/ui/src/index.js b/packages/ui/src/index.js
@@ -4,6 +4,7 @@ import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "./style.css";
 import "./autoTooltip";
 export { LoadingDots } from "./FormComponents/LoadingDots";
+export { FormSeparator } from "./FormComponents/FormSeparator";
 export * from "./AssignDefaultsModeContext";
 export { default as Uploader } from "./FormComponents/Uploader";
 export { mergeSchemas } from "./DataTable/utils/convertSchema";