Add TextArea component

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

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,
+}

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

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,
 				},
 			},
 		}