From 528862f21202c43c1d8091b0d45b7f85d57cf626 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 3 Feb 2022 19:13:56 +0000
Subject: [PATCH] Adds alignment to long form and string fields as per #3374.

---
 packages/bbui/src/Form/Core/TextArea.svelte   |  2 +
 packages/bbui/src/Form/Core/TextField.svelte  |  4 +-
 packages/client/manifest.json                 | 58 +++++++++++++++++++
 .../components/app/forms/LongFormField.svelte |  2 +
 .../components/app/forms/StringField.svelte   |  2 +
 5 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index a022a98e5f..b615e97bff 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -13,6 +13,7 @@
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
   })
+  export let align = null
 
   let focus = false
   let textarea
@@ -46,6 +47,7 @@
     bind:this={textarea}
     placeholder={placeholder || ""}
     class="spectrum-Textfield-input"
+    style={align ? `text-align: ${align}` : ""}
     {disabled}
     {id}
     on:focus={() => (focus = true)}
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index d2064ddde0..78b698eed2 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -12,6 +12,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let dataCy
+  export let align
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -92,8 +93,9 @@
     on:input={onInput}
     on:keyup={updateValueOnEnter}
     {type}
-    inputmode={type === "number" ? "decimal" : "text"}
     class="spectrum-Textfield-input"
+    style={align ? `text-align: ${align};` : ""}
+    inputmode={type === "number" ? "decimal" : "text"}
   />
 </div>
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 5cb93031bd..04ffdffa21 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1942,6 +1942,35 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
@@ -2373,6 +2402,35 @@
         "type": "validation/string",
         "label": "Validation",
         "key": "validation"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index a58e1fe76c..888992f6b3 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -9,6 +9,7 @@
   export let disabled = false
   export let validation
   export let defaultValue = ""
+  export let align
 
   let fieldState
   let fieldApi
@@ -35,6 +36,7 @@
         disabled={fieldState.disabled}
         error={fieldState.error}
         id={fieldState.fieldId}
+        {align}
         {placeholder}
       />
     </div>
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index 4764cba4d3..bb598bb1e0 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -9,6 +9,7 @@
   export let disabled = false
   export let validation
   export let defaultValue = ""
+  export let align
 
   let fieldState
   let fieldApi
@@ -34,6 +35,7 @@
       id={fieldState.fieldId}
       {placeholder}
       {type}
+      {align}
     />
   {/if}
 </Field>