Add locked tooltip (#998)

Adds the ability to define descriptive tooltips for settings when they
are locked.


![image](https://github.com/user-attachments/assets/5d5778c8-911b-4358-b4e6-f0389270ad76)


Makes some minor improvements to tooltip layout logic as well.

plugin/src/App/Components/Checkbox.lua

@@ -57,8 +57,9 @@ function Checkbox:render()
 			end,
 		}, {
 			StateTip = e(Tooltip.Trigger, {
-				text = (if self.props.locked then "[LOCKED] " else "")
+				text = (if self.props.locked
-					.. (if self.props.active then "Enabled" else "Disabled"),
+					then (self.props.lockedTooltip or "(Cannot be changed right now)") .. "\n"
+					else "") .. (if self.props.active then "Enabled" else "Disabled"),
 			}),
 
 			Active = e(SlicedImage, {

plugin/src/App/Components/Dropdown.lua

@@ -12,6 +12,7 @@ local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local ScrollingFrame = require(script.Parent.ScrollingFrame)
+local Tooltip = require(script.Parent.Tooltip)
 
 local e = Roact.createElement
 
@@ -119,6 +120,12 @@ function Dropdown:render()
 					end),
 
 					BackgroundTransparency = 1,
+				}, {
+					StateTip = if self.props.locked
+						then e(Tooltip.Trigger, {
+							text = self.props.lockedTooltip or "(Cannot be changed right now)",
+						})
+						else nil,
 				}),
 				Active = e("TextLabel", {
 					Size = UDim2.new(1, -30, 1, 0),

plugin/src/App/Components/Tooltip.lua

@@ -23,11 +23,8 @@ local TooltipContext = Roact.createContext({})
 
 local function Popup(props)
 	return Theme.with(function(theme)
-		local textXSpace = math.min(props.parentSize.X, 120)
+		local textXSpace = math.min(props.parentSize.X, 250) - TEXT_PADDING.X
-		local textBounds = Vector2.new(
+		local textBounds = getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace)
-			textXSpace,
-			getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace).Y
-		)
 		local contentSize = textBounds + TEXT_PADDING + (Vector2.one * 2)
 
 		local trigger = props.Trigger:getValue()
@@ -39,7 +36,7 @@ local function Popup(props)
 		-- If there's not enough space below, and there's more space above, then show the tooltip above the trigger
 		local displayAbove = spaceBelow < contentSize.Y and spaceAbove > spaceBelow
 
-		local X = math.clamp(props.Position.X - X_OFFSET, 0, props.parentSize.X - contentSize.X)
+		local X = math.clamp(props.Position.X - X_OFFSET, 0, math.max(props.parentSize.X - contentSize.X, 1))
 		local Y = 0
 
 		if displayAbove then

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -114,6 +114,7 @@ function Setting:render()
 					then self.props.input
 					elseif self.props.options ~= nil then e(Dropdown, {
 						locked = self.props.locked,
+						lockedTooltip = self.props.lockedTooltip,
 						options = self.props.options,
 						active = self.state.setting,
 						transparency = self.props.transparency,
@@ -123,6 +124,7 @@ function Setting:render()
 					})
 					else e(Checkbox, {
 						locked = self.props.locked,
+						lockedTooltip = self.props.lockedTooltip,
 						active = self.state.setting,
 						transparency = self.props.transparency,
 						onClick = function()

plugin/src/App/StatusPages/Settings/init.lua

@@ -201,6 +201,7 @@ function SettingsPage:render()
 				name = "Two-Way Sync",
 				description = "Editing files in Studio will sync them into the filesystem",
 				locked = self.props.syncActive,
+				lockedTooltip = "(Cannot change while currently syncing. Disconnect first.)",
 				tag = "unstable",
 				transparency = self.props.transparency,
 				layoutOrder = layoutIncrement(),