fix(text-field): Missing style attributes and examples (#1002)

Add missing attributes that apply to `text-field` element:
- `selectionColor`
(https://reactnative.dev/docs/textinput#selectioncolor)
- `cursorColor` (Android only,
[ref](https://reactnative.dev/docs/textinput#cursorcolor-android))
- `textAlignVertical` (style attribute, Android only,
[ref](https://reactnative.dev/docs/text-style-props#textalignvertical-android))

Also add missing examples for text-input in the demo app, and update the
docs.


| iOS | Android |
|----|----|
| <img width="500" alt="Screenshot 2024-11-22 at 3 22 31 PM"
src="https://github.com/user-attachments/assets/57255e96-7004-4ebc-ae44-ad9b40ba7b3b">
| <img width="527" alt="Screenshot 2024-11-22 at 3 22 34 PM"
src="https://github.com/user-attachments/assets/c9d7a88b-4c23-4d45-8560-5227ae19eb40">
|

---------

Co-authored-by: flochtililoch <flochtililoch@gmail.com>

demo/backend/ui/ui-elements/forms/text-field/_basic/index.xml.njk

@@ -0,0 +1,12 @@
+<view style="form-group">
+  <text style="label">Basic</text>
+  <text-field
+    style="text-field-basic"
+    name="text-field-basic"
+    placeholder="Placeholder"
+    placeholderTextColor="#8D9494"
+    selectionColor="#4778FF"
+    cursorColor="#4778FF"
+    value=""
+  />
+</view>

demo/backend/ui/ui-elements/forms/text-field/_basic/styles.xml.njk

@@ -0,0 +1,16 @@
+<style
+  id="text-field-basic"
+  borderBottomColor="#E1E1E1"
+  borderBottomWidth="1"
+  flex="1"
+  fontSize="16"
+  fontWeight="normal"
+  paddingVertical="8"
+>
+  <modifier pressed="true">
+    <style borderBottomColor="#4778FF"/>
+  </modifier>
+  <modifier focused="true">
+    <style borderBottomColor="#4778FF"/>
+  </modifier>
+</style>

demo/backend/ui/ui-elements/forms/text-field/_multiline/index.xml.njk

@@ -0,0 +1,13 @@
+<view style="form-group">
+  <text style="label">Multi-line</text>
+  <text-field
+    style="text-field-multiline"
+    multiline="true"
+    name="text-field-multiline"
+    placeholder="Placeholder"
+    placeholderTextColor="#8D9494"
+    selectionColor="#4778FF"
+    cursorColor="#4778FF"
+    value=""
+  />
+</view>

demo/backend/ui/ui-elements/forms/text-field/_multiline/styles.xml.njk

@@ -0,0 +1,19 @@
+<style
+  id="text-field-multiline"
+  borderRadius="6"
+  borderWidth="1"
+  borderColor="#E1E1E1"
+  flex="1"
+  fontSize="16"
+  fontWeight="normal"
+  height="120"
+  padding="8"
+  textAlignVertical="top"
+>
+  <modifier pressed="true">
+    <style borderColor="#4778FF"/>
+  </modifier>
+  <modifier focused="true">
+    <style borderColor="#4778FF"/>
+  </modifier>
+</style>

demo/backend/ui/ui-elements/forms/text-field/index.xml.njk

@@ -0,0 +1,32 @@
+---
+permalink: "/ui/ui-elements/forms/text-field/index.xml"
+tags: "UI/UI Elements/Forms"
+hv_title: "Text Field"
+hv_button_behavior: "back"
+---
+{% extends 'templates/scrollview.xml.njk' %}
+{% from 'macros/about/index.xml.njk' import about %}
+{% from 'macros/description/index.xml.njk' import description %}
+{% from 'macros/button/index.xml.njk' import button %}
+
+{% block styles %}
+  <style id="form-group" flex="1" marginLeft="24" marginRight="24" marginTop="48"/>
+  <style
+    id="label"
+    borderColor="#4E4D4D"
+    fontSize="16"
+    fontWeight="bold"
+    lineHeight="24"
+    marginBottom="8"
+  />
+  {% include './_basic/styles.xml.njk' %}
+  {% include './_multiline/styles.xml.njk' %}
+{% endblock %}
+
+{% block content %}
+  {{ about('Text field are used in forms to collect textual data') }}
+  <form>
+    {% include './_basic/index.xml.njk' %}
+    {% include './_multiline/index.xml.njk' %}
+  </form>
+{% endblock %}

docs/reference_textfield.md

@@ -27,6 +27,9 @@ A `<text-field>` element can appear anywhere within a `<form>` element.
 - [`name`](#name)
 - [`value`](#value)
 - [`placeholder`](#placeholder)
+- [`placeholderTextColor`](#placeholdertextcolor)
+- [`selectionColor`](#selectioncolor)
+- [`cursorColor`](#cursorcolor)
 - [`multiline`](#multiline)
 - [`keyboard-type`](#keyboard-type)
 - [`mask`](#mask)
@@ -68,6 +71,30 @@ The value of the field. This string gets rendered into the string and can be edi
 
 A label that appears within the text field. The placeholder only appears when the field is empty.
 
+#### `placeholderTextColor`
+
+| Type   | Required |
+| ------ | -------- |
+| string | No       |
+
+The text color of the placeholder string.
+
+#### `selectionColor`
+
+| Type   | Required |
+| ------ | -------- |
+| string | No       |
+
+The highlight, selection handle and cursor color of the text input.
+
+#### `cursorColor` (Android)
+
+| Type   | Required |
+| ------ | -------- |
+| string | No       |
+
+When provided it will set the color of the cursor (or "caret") in the component. Unlike the behavior of `selectionColor` the cursor color will be set independently from the color of the text selection box.
+
 #### `multiline`
 
 | Type                      | Required |

schema/core.xsd

@@ -752,6 +752,17 @@
         </xs:simpleType>
       </xs:attribute>
 
+      <xs:attribute name="textAlignVertical">
+        <xs:simpleType>
+          <xs:restriction base="xs:string">
+            <xs:enumeration value="auto" />
+            <xs:enumeration value="top" />
+            <xs:enumeration value="bottom" />
+            <xs:enumeration value="center" />
+          </xs:restriction>
+        </xs:simpleType>
+      </xs:attribute>
+
       <xs:attribute name="textDecorationLine" type="xs:NCName" />
       <xs:attribute name="top" type="hv:pointsOrPercent" />
       <xs:attribute name="width" type="hv:pointsOrPercent" />
@@ -1093,6 +1104,8 @@
       <xs:attribute name="value" type="xs:string" />
       <xs:attribute name="placeholder" type="xs:string" />
       <xs:attribute name="placeholderTextColor" type="hv:color" />
+      <xs:attribute name="selectionColor" type="hv:color" />
+      <xs:attribute name="cursorColor" type="hv:color" />
       <xs:attribute name="keyboard-type">
         <xs:simpleType>
           <xs:restriction base="xs:string">

src/services/stylesheets/index.ts

@@ -138,6 +138,7 @@ const STYLE_ATTRIBUTE_CONVERTERS = {
   fontWeight: string,
   lineHeight: number,
   textAlign: string,
+  textAlignVertical: string,
   textDecorationLine: string,
   textShadowColor: string,
   textShadowRadius: number,