Added theme constructors and text state

nightcycle · Feb 19, 2024 · 432288f · 432288f
1 parent d07fa9f
commit 432288f
Show file tree

Hide file tree

Showing 9 changed files with 1,028 additions and 18 deletions.
diff --git a/sourcemap.json b/sourcemap.json
diff --git a/src/Component/Search/Base.luau b/src/Component/Search/Base.luau
@@ -49,6 +49,7 @@ local Icons = MaterialIcons.default.dp_48.scale_1
 
 
 function newPanel(
+	isFilled: boolean,
 	onClick: (content: string) -> (),
 	initialText: string,
 	button: GuiObject,
@@ -225,7 +226,7 @@ function newPanel(
 		BackgroundColor3 = _Computed(function(s: Style, bC: Color3, e: number): Color3
 			return s:GetElevatedColor(bC, e)
 		end, styleState, backgroundColorState, elevationState),
-		BackgroundTransparency = 0,
+		BackgroundTransparency = if isFilled then 0 else 1,
 		AutomaticSize = Enum.AutomaticSize.Y,
 		Children = {
 			_new("UICorner")({
@@ -353,6 +354,7 @@ function Base.newBar(
 	local nextElevationState = _Computed(function(e: number): number
 		return e + 1
 	end, elevationState)
+	local backgroundColorState: State<Color3> = _import(backgroundColor, Color3.new())
 
 
 	local function newLabel(
@@ -366,14 +368,19 @@ function Base.newBar(
 		local elevatedTextColorState = fuse.Computed(function(s: Style, tC: Color3, e: number): Color3
 			return s:GetElevatedColor(tC, e)
 		end, styleState, textColorState, nextElevationState)
+		local elevatedBackgroundColorState = fuse.Computed(function(s: Style, tC: Color3, e: number): Color3
+			return s:GetElevatedColor(tC, e)
+		end, styleState, backgroundColorState, nextElevationState)
 		local isHoveredState = fuse.Value(false)
 
 		local out = fuse.new("TextButton")({
 			Text = key,
 			AutomaticSize = Enum.AutomaticSize.Y,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			Size = UDim2.fromScale(1,0),
-			BackgroundTransparency = 1,
+			AutoButtonColor = true,
+			BackgroundTransparency = if isFilled then 0 else 1,
+			BackgroundColor3 = elevatedBackgroundColorState,
 			TextColor3 = elevatedTextColorState,
 			ClipsDescendants = false,
 			TextSize = _Computed(function(s: Style): number
@@ -396,10 +403,10 @@ function Base.newBar(
 					isHoveredState:Set(false)
 				end,
 				SelectionGained = function()
-					isFocusedState:Set(true)
+					isHoveredState:Set(true)
 				end,
 				SelectionLost = function()
-					isFocusedState:Set(false)
+					isHoveredState:Set(false)
 				end,
 			},
 			Children = {
@@ -421,7 +428,6 @@ function Base.newBar(
 		return out
 	end
 
-	local backgroundColorState: State<Color3> = _import(backgroundColor, Color3.new())
 	local optionSolverState = _import(optionSolver, function(input: string): {[number]: string}
 		return {}
 	end)
@@ -443,6 +449,7 @@ function Base.newBar(
 	local function onClick()
 		panelMaid:DoCleaning()
 		local panel = newPanel(
+			isFilled,
 			function(content: string)
 				inputState:Set(content)
 				panelMaid:DoCleaning()
@@ -599,7 +606,7 @@ function Base.newBar(
 						s.Scale,
 						Types.newAppearanceData(s:GetElevatedColor(hC, e), 1),
 						Types.newAppearanceData(s:GetElevatedColor(hC, e), 1),
-						Types.newAppearanceData(s:GetElevatedColor(dC, e), 1 - 0.38),
+						Types.newAppearanceData(s:GetElevatedColor(dC, e), 1),
 						s:GetFontData(Enums.FontType.LabelLarge),
 						i,
 						nil,

diff --git a/src/Component/Search/Filled/cfusion-theme.story.luau b/src/Component/Search/Filled/cfusion-theme.story.luau
@@ -36,12 +36,122 @@ return function(frame: Frame)
 
 			do
 				local button = maid:GiveTask(
-					Module.ColdFusion.new(
+					Module.ColdFusion.primaryContainer(
 						function(input: string): string
 							print(`entered: {input}`)
 							return input
 						end,
-						"Test search here",
+						"Primary container search",
+						function(input: string): {[number]: string}
+							local options: {[number]: string} = {}
+							for i=1, math.random(12) do
+								options[i] = string.rep(input, math.random(5))
+							end
+							return options
+						end,
+						nil,
+						0,
+						style
+					)
+				)
+				button.Parent = halfFrame
+			end
+			do
+				local button = maid:GiveTask(
+					Module.ColdFusion.secondaryContainer(
+						function(input: string): string
+							print(`entered: {input}`)
+							return input
+						end,
+						"Secondary container search",
+						function(input: string): {[number]: string}
+							local options: {[number]: string} = {}
+							for i=1, math.random(12) do
+								options[i] = string.rep(input, math.random(5))
+							end
+							return options
+						end,
+						nil,
+						0,
+						style
+					)
+				)
+				button.Parent = halfFrame
+			end
+			do
+				local button = maid:GiveTask(
+					Module.ColdFusion.tertiaryContainer(
+						function(input: string): string
+							print(`entered: {input}`)
+							return input
+						end,
+						"Tertiary container search",
+						function(input: string): {[number]: string}
+							local options: {[number]: string} = {}
+							for i=1, math.random(12) do
+								options[i] = string.rep(input, math.random(5))
+							end
+							return options
+						end,
+						nil,
+						0,
+						style
+					)
+				)
+				button.Parent = halfFrame
+			end
+			do
+				local button = maid:GiveTask(
+					Module.ColdFusion.primary(
+						function(input: string): string
+							print(`entered: {input}`)
+							return input
+						end,
+						"Primary search",
+						function(input: string): {[number]: string}
+							local options: {[number]: string} = {}
+							for i=1, math.random(12) do
+								options[i] = string.rep(input, math.random(5))
+							end
+							return options
+						end,
+						nil,
+						0,
+						style
+					)
+				)
+				button.Parent = halfFrame
+			end
+			do
+				local button = maid:GiveTask(
+					Module.ColdFusion.secondary(
+						function(input: string): string
+							print(`entered: {input}`)
+							return input
+						end,
+						"Secondary search",
+						function(input: string): {[number]: string}
+							local options: {[number]: string} = {}
+							for i=1, math.random(12) do
+								options[i] = string.rep(input, math.random(5))
+							end
+							return options
+						end,
+						nil,
+						0,
+						style
+					)
+				)
+				button.Parent = halfFrame
+			end
+			do
+				local button = maid:GiveTask(
+					Module.ColdFusion.tertiary(
+						function(input: string): string
+							print(`entered: {input}`)
+							return input
+						end,
+						"Tertiary search",
 						function(input: string): {[number]: string}
 							local options: {[number]: string} = {}
 							for i=1, math.random(12) do
@@ -50,15 +160,12 @@ return function(frame: Frame)
 							return options
 						end,
 						nil,
-						style:GetColor(Enums.ColorRoleType.Primary),
-						style:GetColor(Enums.ColorRoleType.PrimaryContainer),
 						0,
 						style
 					)
 				)
 				button.Parent = halfFrame
 			end
-
 			return halfFrame
 		end
 

diff --git a/src/Component/Search/Filled/cfusion.story.luau b/src/Component/Search/Filled/cfusion.story.luau
@@ -4,8 +4,6 @@ local _Packages = _Package.Parent
 -- Services
 -- Packages
 local Maid = require(_Packages:WaitForChild("Maid"))
-local MaterialIcons = require(_Packages:WaitForChild("MaterialIcons"))
-
 -- Modules
 local Style = require(_Package:WaitForChild("Style"))
 local Enums = require(_Package:WaitForChild("Enums"))
@@ -14,8 +12,6 @@ local Enums = require(_Package:WaitForChild("Enums"))
 -- Constants
 -- Variables
 -- References
-local Icons = MaterialIcons.default.dp_48.scale_1
-
 -- Class
 return function(frame: Frame)
 	local maid = Maid.new()