From 1c6b0511de97954fd17ed1497d69d87688dfe57d Mon Sep 17 00:00:00 2001
From: Avafe <65048459+ImAvafe@users.noreply.github.com>
Date: Mon, 10 Jun 2024 19:53:27 -0400
Subject: [PATCH] Add TextArea component

---
 src/Components/TextArea.lua        | 14 +++++++++++
 src/Components/TextArea.story.lua  | 37 ++++++++++++++++++++++++++++++
 src/Components/TextInput.lua       | 34 +++++++++++----------------
 src/Components/TextInput.story.lua | 15 ++----------
 4 files changed, 66 insertions(+), 34 deletions(-)
 create mode 100644 src/Components/TextArea.lua
 create mode 100644 src/Components/TextArea.story.lua

diff --git a/src/Components/TextArea.lua b/src/Components/TextArea.lua
new file mode 100644
index 0000000..fb417da
--- /dev/null
+++ b/src/Components/TextArea.lua
@@ -0,0 +1,14 @@
+local OnyxUI = script.Parent.Parent
+local CombineProps = require(OnyxUI.Utils.CombineProps)
+
+local TextInput = require(OnyxUI.Components.TextInput)
+
+export type Props = TextInput.Props & {}
+
+return function(Props: Props)
+	return TextInput(CombineProps(Props, {
+		AutomaticSize = Enum.AutomaticSize.None,
+		TextWrapped = true,
+		MultiLine = true,
+	}))
+end
diff --git a/src/Components/TextArea.story.lua b/src/Components/TextArea.story.lua
new file mode 100644
index 0000000..3db8d1c
--- /dev/null
+++ b/src/Components/TextArea.story.lua
@@ -0,0 +1,37 @@
+local OnyxUI = script.Parent.Parent
+local Fusion = require(OnyxUI.Parent.Fusion)
+local Themer = require(OnyxUI.Utils.Themer)
+
+local Children = Fusion.Children
+local Computed = Fusion.Computed
+
+local TextArea = require(script.Parent.TextArea)
+local Frame = require(script.Parent.Frame)
+
+return {
+	story = function(Parent: GuiObject, _Props: { [any]: any })
+		local Instance = Frame {
+			Parent = Parent,
+			Size = UDim2.fromOffset(300, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			ListEnabled = true,
+			Padding = Computed(function()
+				return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get())
+			end),
+
+			[Children] = {
+				TextArea {
+					Size = UDim2.fromOffset(200, 50),
+				},
+				TextArea {
+					Size = UDim2.fromOffset(200, 100),
+					CharacterLimit = 20,
+				},
+			},
+		}
+
+		return function()
+			Instance:Destroy()
+		end
+	end,
+}
diff --git a/src/Components/TextInput.lua b/src/Components/TextInput.lua
index 11b7c9b..2add485 100644
--- a/src/Components/TextInput.lua
+++ b/src/Components/TextInput.lua
@@ -26,6 +26,7 @@ export type Props = Base.Props & {
 	CharacterLimit: PubTypes.CanBeState<number>?,
 	ClearTextOnFocus: PubTypes.CanBeState<boolean>?,
 	TextWrapped: PubTypes.CanBeState<boolean>?,
+	MultiLine: PubTypes.CanBeState<boolean>?,
 	IsFocused: PubTypes.CanBeState<boolean>?,
 	OnFocused: PubTypes.CanBeState<() -> ()>?,
 	OnFocusLost: PubTypes.CanBeState<() -> ()>?,
@@ -58,16 +59,7 @@ return function(Props: Props)
 		CornerRadius = Computed(function()
 			return UDim.new(0, Themer.Theme.CornerRadius["1"]:get())
 		end),
-		PaddingBottom = Computed(function()
-			return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
-		end),
-		PaddingLeft = Computed(function()
-			return UDim.new(0, Themer.Theme.Spacing["0.75"]:get())
-		end),
-		PaddingRight = Computed(function()
-			return UDim.new(0, Themer.Theme.Spacing["0.75"]:get())
-		end),
-		PaddingTop = Computed(function()
+		Padding = Computed(function()
 			return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
 		end),
 		StrokeEnabled = true,
@@ -96,6 +88,14 @@ return function(Props: Props)
 			Themer.Theme.SpringSpeed["1"],
 			Themer.Theme.SpringDampening
 		),
+		AutomaticSize = Enum.AutomaticSize.XY,
+		AutoLocalize = false,
+		Active = Computed(function()
+			return not Disabled:get()
+		end),
+		BackgroundColor3 = Computed(function()
+			return Themer.Theme.Colors.Base.Light:get()
+		end),
 
 		[Cleanup] = Observers,
 	}))) {
@@ -115,22 +115,14 @@ return function(Props: Props)
 			end
 		end),
 		PlaceholderText = PlaceholderText,
-		MultiLine = false,
+		TextXAlignment = Enum.TextXAlignment.Left,
+		TextYAlignment = Enum.TextYAlignment.Top,
+		MultiLine = Props.MultiLine,
 		ClearTextOnFocus = ClearTextOnFocus,
 		TextEditable = Computed(function()
 			return not Disabled:get()
 		end),
-		Active = Computed(function()
-			return not Disabled:get()
-		end),
-		BackgroundColor3 = Computed(function()
-			return Themer.Theme.Colors.Base.Light:get()
-		end),
-		AutoLocalize = false,
 		TextWrapped = Props.TextWrapped,
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		AutomaticSize = Enum.AutomaticSize.XY,
 
 		[OnEvent "Focused"] = function()
 			if not Disabled:get() then
diff --git a/src/Components/TextInput.story.lua b/src/Components/TextInput.story.lua
index e3f55ed..8749591 100644
--- a/src/Components/TextInput.story.lua
+++ b/src/Components/TextInput.story.lua
@@ -32,19 +32,8 @@ return {
 					CharacterLimit = 20,
 				},
 				TextInput {
-					PlaceholderText = "Description..",
-					CharacterLimit = 80,
-					Multiline = true,
-					TextWrapped = true,
-					Size = UDim2.new(UDim.new(1, 0), UDim.new(0, 80)),
-					AutomaticSize = Enum.AutomaticSize.None,
-				},
-				TextInput {
-					PlaceholderText = "This one wrap-expands!",
-					Multiline = true,
-					TextWrapped = true,
-					Size = UDim2.fromScale(1, 0),
-					AutomaticSize = Enum.AutomaticSize.Y,
+					PlaceholderText = "Something dangerous!",
+					Color = Themer.Theme.Colors.Error.Main,
 				},
 			},
 		}