Sync minimize button with text color.

Author: ryanlua

src/SignsInternal/StudioWidgets/CollapsibleTitledSection.lua

@@ -21,15 +21,24 @@
 ----------------------------------------
 local GuiUtilities = require(script.Parent.GuiUtilities)
 
-local kRightButtonAsset = "rbxasset://textures/DeveloperFramework/button_arrow_right.png"
-local kDownButtonAsset = "rbxasset://textures/DeveloperFramework/button_arrow_down.png"
+local kLightRightButtonAsset = "rbxasset://studio_svg_textures/Shared/Navigation/Light/Standard/ArrowRight.png"
+local kLightDownButtonAsset = "rbxasset://studio_svg_textures/Shared/Navigation/Light/Standard/ArrowDown.png"
+local kDarkRightButtonAsset = "rbxasset://studio_svg_textures/Shared/Navigation/Dark/Standard/ArrowRight.png"
+local kDarkDownButtonAsset = "rbxasset://studio_svg_textures/Shared/Navigation/Dark/Standard/ArrowDown.png"
 
-local kArrowSize = 7
+local kArrowSize = 16
 
 local CollapsibleTitledSectionClass = {}
 CollapsibleTitledSectionClass.__index = CollapsibleTitledSectionClass
 
-function CollapsibleTitledSectionClass.new(nameSuffix, titleText, autoScalingList, minimizable, minimizedByDefault)
+-- Creates a new CollapsibleTitledSectionClass
+function CollapsibleTitledSectionClass.new(
+	nameSuffix: string,
+	titleText: string,
+	autoScalingList: boolean,
+	minimizable: boolean,
+	minimizedByDefault: boolean
+)
 	local self = {}
 	setmetatable(self, CollapsibleTitledSectionClass)
 
@@ -74,41 +83,56 @@ function CollapsibleTitledSectionClass.new(nameSuffix, titleText, autoScalingLis
 	return self
 end
 
+-- Returns the frame of the section
 function CollapsibleTitledSectionClass:GetSectionFrame()
 	return self._frame
 end
 
+-- Returns the frame of the section's contents frame
 function CollapsibleTitledSectionClass:GetContentsFrame()
 	return self._contentsFrame
 end
 
+-- Updates the size of frame of the section
 function CollapsibleTitledSectionClass:_UpdateSize()
 	local totalSize = self._uiListLayout.AbsoluteContentSize.Y
 	self._frame.Size = UDim2.new(1, 0, 0, totalSize)
 end
 
+-- Updates the minimize button's image
 function CollapsibleTitledSectionClass:_UpdateMinimizeButton()
 	-- We can't rotate it because rotated images don't get clipped by parents.
 	-- This is all in a scroll widget.
 	-- :(
 	if self._minimized then
-		self._minimizeButton.Image = kRightButtonAsset
+		if GuiUtilities.ShouldUseIconsForDarkerBackgrounds() then
+			self._minimizeButton.Image = kDarkRightButtonAsset
+		else
+			self._minimizeButton.Image = kLightRightButtonAsset
+		end
 	else
-		self._minimizeButton.Image = kDownButtonAsset
+		if GuiUtilities.ShouldUseIconsForDarkerBackgrounds() then
+			self._minimizeButton.Image = kDarkDownButtonAsset
+		else
+			self._minimizeButton.Image = kLightDownButtonAsset
+		end
 	end
 end
 
+-- Sets the state of the section to collapsed or not
 function CollapsibleTitledSectionClass:SetCollapsedState(bool)
 	self._minimized = bool
 	self._contentsFrame.Visible = not bool
 	self:_UpdateMinimizeButton()
 	self:_UpdateSize()
 end
 
+-- Toggles the state of the section
 function CollapsibleTitledSectionClass:_ToggleCollapsedState()
 	self:SetCollapsedState(not self._minimized)
 end
 
+-- Creates the title bar of the section
 function CollapsibleTitledSectionClass:_CreateTitleBar(titleText)
 	local titleTextOffset = self._titleBarHeight
 
@@ -137,7 +161,6 @@ function CollapsibleTitledSectionClass:_CreateTitleBar(titleText)
 
 	self._minimizeButton = Instance.new("ImageButton")
 	self._minimizeButton.Name = "MinimizeSectionButton"
-	self._minimizeButton.Image = kRightButtonAsset -- TODO: input arrow image from spec
 	self._minimizeButton.Size = UDim2.new(0, kArrowSize, 0, kArrowSize)
 	self._minimizeButton.AnchorPoint = Vector2.new(0.5, 0.5)
 	self._minimizeButton.Position = UDim2.new(0, self._titleBarHeight * 0.5, 0, self._titleBarHeight * 0.5)
@@ -153,21 +176,26 @@ function CollapsibleTitledSectionClass:_CreateTitleBar(titleText)
 	settings().Studio.ThemeChanged:Connect(_UpdateMinimizeButtonTheme)
 	_UpdateMinimizeButtonTheme()
 
-	titleBar.InputBegan:Connect(function(input)
+	titleBar.InputBegan:Connect(function(input: Enum.UserInputType)
 		if input.UserInputType == Enum.UserInputType.MouseMovement then
 			self._hovered = true
 			self:_updateButtonVisual()
 		end
 	end)
 
-	titleBar.InputEnded:Connect(function(input)
+	titleBar.InputEnded:Connect(function(input: Enum.UserInputType)
 		if input.UserInputType == Enum.UserInputType.MouseMovement then
 			self._hovered = false
 			self._clicked = false
 			self:_updateButtonVisual()
 		end
 	end)
 
+	self._minimizeButton.MouseButton1Click:Connect(function()
+		self._clicked = true
+		self:_ToggleCollapsedState()
+	end)
+
 	titleBar.MouseButton1Down:Connect(function()
 		self._clicked = true
 		self:_updateButtonVisual()
@@ -176,20 +204,15 @@ function CollapsibleTitledSectionClass:_CreateTitleBar(titleText)
 			self:_ToggleCollapsedState()
 		end
 	end)
-
-	titleBar.MouseButton1Up:Connect(function()
-		self._clicked = false
-		self:_updateButtonVisual()
-	end)
 end
 
+-- Updates the visual of the button
 function CollapsibleTitledSectionClass:_updateButtonVisual()
 	local kTitlebarDefaultBackgroundColor =
 		settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.CategoryItem, Enum.StudioStyleGuideModifier.Default)
 	local kTitlebarHoverBackgroundColor =
 		settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Button, Enum.StudioStyleGuideModifier.Hover)
 
-
 	if self._hovered then
 		self._titleBar.BackgroundColor3 = kTitlebarHoverBackgroundColor
 	else