Text wrapping for list items

Author: tiffany352

src/Components/ListItem.lua

@@ -20,7 +20,6 @@ function Item:render()
 	local ignoresMenuOpen = props.ignoresMenuOpen
 	local isHover = self.state.Hover and (not props.menuOpen or ignoresMenuOpen)
 	local indent = props.Indent or 0
-	local height = props.Height or 26
 
 	local state = Enum.StudioStyleGuideModifier.Default
 	if props.Active or props.SemiActive then
@@ -31,11 +30,15 @@ function Item:render()
 
 	local sourceText = if props.textKey then tr(props.textKey, props.textArgs) else props.Text
 
+	local widthUsedUp = 48 + 16 + indent + 3
+	if props.onSetVisible then
+		widthUsedUp += 16 + 5
+	end
+
 	return Roact.createElement(ListItemChrome, {
 		LayoutOrder = props.LayoutOrder,
 		hidden = props.Hidden,
 		state = state,
-		height = height,
 		showDivider = props.ShowDivider,
 
 		mouseEnter = function(_rbx)
@@ -55,15 +58,24 @@ function Item:render()
 	}, {
 		StudioThemeAccessor.withTheme(function(theme)
 			return Roact.createElement("Frame", {
-				Size = UDim2.new(1, 0, 1, 0),
+				Size = UDim2.fromScale(1, 0),
+				AutomaticSize = Enum.AutomaticSize.Y,
 				BackgroundTransparency = 1.0,
-				Position = UDim2.new(0, 0, 0, 0),
 			}, {
+				Layout = Roact.createElement("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+				}),
 				TopElements = Roact.createElement("Frame", {
+					LayoutOrder = 1,
 					BackgroundTransparency = 1,
-					Size = UDim2.new(1, -indent, 0, 26),
-					Position = UDim2.new(0, indent - 10, 0, 0),
+					Size = UDim2.fromScale(1.0, 0.0),
+					AutomaticSize = Enum.AutomaticSize.Y,
 				}, {
+					Padding = Roact.createElement("UIPadding", {
+						PaddingTop = UDim.new(0, 3),
+						PaddingBottom = UDim.new(0, 3),
+						PaddingLeft = UDim.new(0, indent),
+					}),
 					Checkbox = props.Checked ~= nil and Roact.createElement(Checkbox, {
 						Checked = props.Checked,
 						Disabled = props.CheckDisabled,
@@ -82,7 +94,8 @@ function Item:render()
 							BackgroundTransparency = 1.0,
 							TextXAlignment = Enum.TextXAlignment.Left,
 							Position = props.Icon and UDim2.new(0, 48 + 16, 0, 0) or UDim2.new(0, 14, 0, 0),
-							Size = UDim2.new(1, -40, 1, 0),
+							Size = UDim2.new(1, -widthUsedUp, 0.0, 0),
+							AutomaticSize = Enum.AutomaticSize.Y,
 							Text = props.IsInput and (props.TextBoxText or "") or sourceText,
 							AutoLocalize = false,
 							ClearTextOnFocus = if props.IsInput then props.ClearTextOnFocus else nil,
@@ -92,6 +105,7 @@ function Item:render()
 							Font = Enum.Font.SourceSans,
 							TextSize = 20,
 							TextColor3 = theme:GetColor("MainText"),
+							TextWrapped = true,
 
 							[Roact.Event.FocusLost] = props.IsInput and function(rbx, enterPressed)
 								local text = rbx.Text
@@ -108,7 +122,7 @@ function Item:render()
 					),
 					Visibility = props.onSetVisible and Roact.createElement(Icon, {
 						Name = props.Visible and "lightbulb" or "lightbulb_off",
-						Position = UDim2.new(1, 5, 0.5, 0),
+						Position = UDim2.new(1, -5, 0.5, 0),
 						AnchorPoint = Vector2.new(1, 0.5),
 
 						onClick = props.onSetVisible,
@@ -129,7 +143,9 @@ function Item:render()
 					}),
 				}),
 				Children = Roact.createElement("Frame", {
-					Size = UDim2.new(1, 0, 1, -26),
+					LayoutOrder = 2,
+					Size = UDim2.fromScale(1, 0),
+					AutomaticSize = Enum.AutomaticSize.Y,
 					Position = UDim2.new(0, 0, 0, 26),
 					BackgroundColor3 = theme:GetColor("MainBackground"),
 					BorderSizePixel = 0,

src/Components/ListItemChrome.lua

@@ -4,15 +4,15 @@ local Roact = require(Modules.Roact)
 local StudioThemeAccessor = require(script.Parent.StudioThemeAccessor)
 
 local function ListItemChrome(props)
-	local height = props.height or 26
 	local state = props.state or Enum.StudioStyleGuideModifier.Default
 	local showDivider = props.showDivider
 
 	local child = Roact.oneChild(props[Roact.Children])
 
 	return StudioThemeAccessor.withTheme(function(theme)
 		return Roact.createElement("TextButton", {
-			Size = UDim2.new(1, 0, 0, height),
+			Size = UDim2.fromScale(1, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
 			AutoButtonColor = false,
 			LayoutOrder = props.LayoutOrder,
 			Visible = not props.hidden,

src/Components/TagList/Group.lua

@@ -20,8 +20,13 @@ local function Group(props)
 		StudioThemeAccessor.withTheme(function(theme, isDarkTheme)
 			return Roact.createElement("Frame", {
 				BackgroundTransparency = 1,
-				Size = UDim2.new(1, 0, 1, 0),
+				Size = UDim2.fromScale(1, 0),
+				AutomaticSize = Enum.AutomaticSize.Y,
 			}, {
+				Padding = Roact.createElement("UIPadding", {
+					PaddingTop = UDim.new(0, 3),
+					PaddingBottom = UDim.new(0, 3),
+				}),
 				Visibility = Roact.createElement(Icon, {
 					Name = "folder_lightbulb",
 					Position = UDim2.new(1, -4, 0.5, 0),
@@ -36,11 +41,13 @@ local function Group(props)
 					Text = props.Name,
 					AutoLocalize = false,
 					BackgroundTransparency = 1,
-					Size = UDim2.new(1, -70, 1, 0),
+					Size = UDim2.new(1, -70, 0, 0),
+					AutomaticSize = Enum.AutomaticSize.Y,
 					Position = UDim2.new(0, 20, 0, 0),
 					TextColor3 = theme:GetColor("MainText"),
 					TextXAlignment = "Left",
 					TextSize = 20,
+					TextWrapped = true,
 				}),
 				Arrow = Roact.createElement("ImageLabel", {
 					Size = UDim2.new(0, 12, 0, 12),

src/Components/TagList/Tag.lua

@@ -45,7 +45,6 @@ local function Tag(props)
 			Active = props.isMenuOpen,
 			Hidden = props.Hidden,
 			Indent = props.Group and 10 or 0,
-			Height = props.isMenuOpen and 171 or 26,
 
 			onSetVisible = function()
 				TagManager.Get():SetVisible(props.Tag, not props.Visible)