Use FontFace and consistent text sizing (#988)

CHANGELOG.md

@@ -30,6 +30,7 @@
 * Improved settings UI ([#886])
 * `Open Scripts Externally` option can now be changed while syncing ([#911])
 * The sync reminder notification will now tell you what was last synced and when ([#987])
+* Fixed notification and tooltip text sometimes getting cut off ([#988])
 * Projects may now specify rules for syncing files as if they had a different file extension. ([#813])
  	This is specified via a new field on project files, `syncRules`:
 
@@ -89,6 +90,7 @@
 [#915]: https://github.com/rojo-rbx/rojo/pull/915
 [#974]: https://github.com/rojo-rbx/rojo/pull/974
 [#987]: https://github.com/rojo-rbx/rojo/pull/987
+[#988]: https://github.com/rojo-rbx/rojo/pull/988
 
 ## [7.4.3] - August 6th, 2024
 * Fixed issue with building binary files introduced in 7.4.2

plugin/src/App/Components/Checkbox.lua

@@ -32,7 +32,7 @@ end
 
 function Checkbox:render()
 	return Theme.with(function(theme)
-		theme = theme.Checkbox
+		local checkboxTheme = theme.Checkbox
 
 		local activeTransparency = Roact.joinBindings({
 			self.binding:map(function(value)
@@ -63,14 +63,14 @@ function Checkbox:render()
 
 			Active = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBackground,
-				color = theme.Active.BackgroundColor,
+				color = checkboxTheme.Active.BackgroundColor,
 				transparency = activeTransparency,
 				size = UDim2.new(1, 0, 1, 0),
 				zIndex = 2,
 			}, {
 				Icon = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Checkbox.Locked else Assets.Images.Checkbox.Active,
-					ImageColor3 = theme.Active.IconColor,
+					ImageColor3 = checkboxTheme.Active.IconColor,
 					ImageTransparency = activeTransparency,
 
 					Size = UDim2.new(0, 16, 0, 16),
@@ -83,15 +83,15 @@ function Checkbox:render()
 
 			Inactive = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = theme.Inactive.BorderColor,
+				color = checkboxTheme.Inactive.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				Icon = e("ImageLabel", {
 					Image = if self.props.locked
 						then Assets.Images.Checkbox.Locked
 						else Assets.Images.Checkbox.Inactive,
-					ImageColor3 = theme.Inactive.IconColor,
+					ImageColor3 = checkboxTheme.Inactive.IconColor,
 					ImageTransparency = self.props.transparency,
 
 					Size = UDim2.new(0, 16, 0, 16),

plugin/src/App/Components/CodeLabel.lua

@@ -1,4 +1,5 @@
 local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
@@ -7,6 +8,8 @@ Highlighter.matchStudioSettings()
 
 local e = Roact.createElement
 
+local Theme = require(Plugin.App.Theme)
+
 local CodeLabel = Roact.PureComponent:extend("CodeLabel")
 
 function CodeLabel:init()
@@ -40,22 +43,24 @@ function CodeLabel:updateHighlights()
 end
 
 function CodeLabel:render()
-	return e("TextLabel", {
-		Size = self.props.size,
-		Position = self.props.position,
-		Text = self.props.text,
-		BackgroundTransparency = 1,
-		Font = Enum.Font.RobotoMono,
-		TextSize = 16,
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		TextColor3 = Color3.fromRGB(255, 255, 255),
-		[Roact.Ref] = self.labelRef,
-	}, {
-		SyntaxHighlights = e("Folder", {
-			[Roact.Ref] = self.highlightsRef,
-		}),
-	})
+	return Theme.with(function(theme)
+		return e("TextLabel", {
+			Size = self.props.size,
+			Position = self.props.position,
+			Text = self.props.text,
+			BackgroundTransparency = 1,
+			FontFace = theme.Font.Code,
+			TextSize = theme.TextSize.Code,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextYAlignment = Enum.TextYAlignment.Top,
+			TextColor3 = Color3.fromRGB(255, 255, 255),
+			[Roact.Ref] = self.labelRef,
+		}, {
+			SyntaxHighlights = e("Folder", {
+				[Roact.Ref] = self.highlightsRef,
+			}),
+		})
+	end)
 end
 
 return CodeLabel

plugin/src/App/Components/Dropdown.lua

@@ -1,5 +1,3 @@
-local TextService = game:GetService("TextService")
-
 local Rojo = script:FindFirstAncestor("Rojo")
 local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
@@ -10,6 +8,7 @@ local Flipper = require(Packages.Flipper)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local bindingUtil = require(Plugin.App.bindingUtil)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local ScrollingFrame = require(script.Parent.ScrollingFrame)
@@ -44,29 +43,29 @@ end
 
 function Dropdown:render()
 	return Theme.with(function(theme)
-		theme = theme.Dropdown
+		local dropdownTheme = theme.Dropdown
 
 		local optionButtons = {}
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textSize = TextService:GetTextSize(text, 15, Enum.Font.GothamMedium, Vector2.new(math.huge, 20))
-			if textSize.X > width then
-				width = textSize.X
+			local textBounds = getTextBoundsAsync(text, theme.Font.Main, theme.TextSize.Body, math.huge)
+			if textBounds.X > width then
+				width = textBounds.X
 			end
 
 			optionButtons[text] = e("TextButton", {
 				Text = text,
 				LayoutOrder = i,
 				Size = UDim2.new(1, 0, 0, 24),
-				BackgroundColor3 = theme.BackgroundColor,
+				BackgroundColor3 = dropdownTheme.BackgroundColor,
 				TextTransparency = self.props.transparency,
 				BackgroundTransparency = self.props.transparency,
 				BorderSizePixel = 0,
-				TextColor3 = theme.TextColor,
+				TextColor3 = dropdownTheme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
-				TextSize = 15,
-				Font = Enum.Font.GothamMedium,
+				TextSize = theme.TextSize.Body,
+				FontFace = theme.Font.Main,
 
 				[Roact.Event.Activated] = function()
 					if self.props.locked then
@@ -103,13 +102,13 @@ function Dropdown:render()
 		}, {
 			Border = e(SlicedImage, {
 				slice = Assets.Slices.RoundedBorder,
-				color = theme.BorderColor,
+				color = dropdownTheme.BorderColor,
 				transparency = self.props.transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
 				DropArrow = e("ImageLabel", {
 					Image = if self.props.locked then Assets.Images.Dropdown.Locked else Assets.Images.Dropdown.Arrow,
-					ImageColor3 = theme.IconColor,
+					ImageColor3 = dropdownTheme.IconColor,
 					ImageTransparency = self.props.transparency,
 
 					Size = UDim2.new(0, 18, 0, 18),
@@ -126,17 +125,17 @@ function Dropdown:render()
 					Position = UDim2.new(0, 6, 0, 0),
 					BackgroundTransparency = 1,
 					Text = self.props.active,
-					Font = Enum.Font.GothamMedium,
-					TextSize = 15,
-					TextColor3 = theme.TextColor,
+					FontFace = theme.Font.Main,
+					TextSize = theme.TextSize.Body,
+					TextColor3 = dropdownTheme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = self.props.transparency,
 				}),
 			}),
 			Options = if self.state.open
 				then e(SlicedImage, {
 					slice = Assets.Slices.RoundedBackground,
-					color = theme.BackgroundColor,
+					color = dropdownTheme.BackgroundColor,
 					position = UDim2.new(1, 0, 1, 3),
 					size = self.openBinding:map(function(a)
 						return UDim2.new(1, 0, a * math.min(3, #self.props.options), 0)
@@ -145,7 +144,7 @@ function Dropdown:render()
 				}, {
 					Border = e(SlicedImage, {
 						slice = Assets.Slices.RoundedBorder,
-						color = theme.BorderColor,
+						color = dropdownTheme.BorderColor,
 						transparency = self.props.transparency,
 						size = UDim2.new(1, 0, 1, 0),
 					}),

plugin/src/App/Components/Header.lua

@@ -31,13 +31,13 @@ local function Header(props)
 
 			Version = e("TextLabel", {
 				Text = Version.display(Config.version),
-				Font = Enum.Font.Gotham,
-				TextSize = 14,
+				FontFace = theme.Font.Thin,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = theme.Header.VersionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 
-				Size = UDim2.new(1, 0, 0, 14),
+				Size = UDim2.new(1, 0, 0, theme.TextSize.Body),
 
 				LayoutOrder = 2,
 				BackgroundTransparency = 1,

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -39,8 +39,8 @@ local function ViewDiffButton(props)
 				Label = e("TextLabel", {
 					Text = "View Diff",
 					BackgroundTransparency = 1,
-					Font = Enum.Font.GothamMedium,
-					TextSize = 14,
+					FontFace = theme.Font.Main,
+					TextSize = theme.TextSize.Body,
 					TextColor3 = theme.Settings.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
@@ -170,8 +170,8 @@ function ChangeList:render()
 			ColumnA = e("TextLabel", {
 				Text = tostring(headerRow[1]),
 				BackgroundTransparency = 1,
-				Font = Enum.Font.GothamBold,
-				TextSize = 14,
+				FontFace = theme.Font.Bold,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -182,8 +182,8 @@ function ChangeList:render()
 			ColumnB = e("TextLabel", {
 				Text = tostring(headerRow[2]),
 				BackgroundTransparency = 1,
-				Font = Enum.Font.GothamBold,
-				TextSize = 14,
+				FontFace = theme.Font.Bold,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -194,8 +194,8 @@ function ChangeList:render()
 			ColumnC = e("TextLabel", {
 				Text = tostring(headerRow[3]),
 				BackgroundTransparency = 1,
-				Font = Enum.Font.GothamBold,
-				TextSize = 14,
+				FontFace = theme.Font.Bold,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = theme.TextColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -230,8 +230,8 @@ function ChangeList:render()
 				ColumnA = e("TextLabel", {
 					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
-					Font = Enum.Font.GothamMedium,
-					TextSize = 14,
+					FontFace = theme.Font.Main,
+					TextSize = theme.TextSize.Body,
 					TextColor3 = if isWarning then theme.Diff.Warning else theme.TextColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,

plugin/src/App/Components/PatchVisualizer/DisplayValue.lua

@@ -32,8 +32,8 @@ local function DisplayValue(props)
 				Label = e("TextLabel", {
 					Text = string.format("%d, %d, %d", props.value.R * 255, props.value.G * 255, props.value.B * 255),
 					BackgroundTransparency = 1,
-					Font = Enum.Font.GothamMedium,
-					TextSize = 14,
+					FontFace = theme.Font.Main,
+					TextSize = theme.TextSize.Body,
 					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
@@ -90,8 +90,8 @@ local function DisplayValue(props)
 			return e("TextLabel", {
 				Text = textRepresentation,
 				BackgroundTransparency = 1,
-				Font = Enum.Font.GothamMedium,
-				TextSize = 14,
+				FontFace = theme.Font.Main,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -112,8 +112,8 @@ local function DisplayValue(props)
 		return e("TextLabel", {
 			Text = textRepresentation,
 			BackgroundTransparency = 1,
-			Font = Enum.Font.GothamMedium,
-			TextSize = 14,
+			FontFace = theme.Font.Main,
+			TextSize = theme.TextSize.Body,
 			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -225,8 +225,8 @@ function DomLabel:render()
 				Text = (if props.isWarning then "⚠ " else "") .. props.name,
 				RichText = true,
 				BackgroundTransparency = 1,
-				Font = if props.patchType then Enum.Font.GothamBold else Enum.Font.GothamMedium,
-				TextSize = 14,
+				FontFace = if props.patchType then theme.Font.Bold else theme.Font.Main,
+				TextSize = theme.TextSize.Body,
 				TextColor3 = color,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
@@ -251,11 +251,11 @@ function DomLabel:render()
 					then e("TextLabel", {
 						Text = props.changeInfo.edits .. if props.changeInfo.failed then "," else "",
 						BackgroundTransparency = 1,
-						Font = Enum.Font.Gotham,
-						TextSize = 14,
+						FontFace = theme.Font.Thin,
+						TextSize = theme.TextSize.Body,
 						TextColor3 = theme.SubTextColor,
 						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, 16),
+						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
 						AutomaticSize = Enum.AutomaticSize.X,
 						LayoutOrder = 2,
 					})
@@ -264,11 +264,11 @@ function DomLabel:render()
 					then e("TextLabel", {
 						Text = props.changeInfo.failed,
 						BackgroundTransparency = 1,
-						Font = Enum.Font.Gotham,
-						TextSize = 14,
+						FontFace = theme.Font.Thin,
+						TextSize = theme.TextSize.Body,
 						TextColor3 = theme.Diff.Warning,
 						TextTransparency = props.transparency,
-						Size = UDim2.new(0, 0, 0, 16),
+						Size = UDim2.new(0, 0, 0, theme.TextSize.Body),
 						AutomaticSize = Enum.AutomaticSize.X,
 						LayoutOrder = 6,
 					})

plugin/src/App/Components/PatchVisualizer/init.lua

@@ -124,8 +124,8 @@ function PatchVisualizer:render()
 			CleanMerge = e("TextLabel", {
 				Visible = #scrollElements == 0,
 				Text = "No changes to sync, project is up to date.",
-				Font = Enum.Font.GothamMedium,
-				TextSize = 15,
+				FontFace = theme.Font.Main,
+				TextSize = theme.TextSize.Medium,
 				TextColor3 = theme.TextColor,
 				TextWrapped = true,
 				Size = UDim2.new(1, 0, 1, 0),