From a18768da2102904bfbe9f50404c99ebd91919d1f Mon Sep 17 00:00:00 2001 From: Avafe <65048459+ImAvafe@users.noreply.github.com> Date: Fri, 7 Jun 2024 13:54:02 -0400 Subject: [PATCH] Update Checkbox to new standards --- src/Components/Checkbox.lua | 111 +++++++++++++----------------- src/Components/Checkbox.story.lua | 23 ++----- 2 files changed, 51 insertions(+), 83 deletions(-) diff --git a/src/Components/Checkbox.lua b/src/Components/Checkbox.lua index 02b3564..0ce3e9b 100644 --- a/src/Components/Checkbox.lua +++ b/src/Components/Checkbox.lua @@ -3,62 +3,45 @@ local Fusion = require(OnyxUI.Packages.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) local ColorUtils = require(OnyxUI.Packages.ColorUtils) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(script.Parent.Parent.PubTypes) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring -local BaseButton = require(OnyxUI.Components.BaseButton) -local Icon = require(OnyxUI.Components.Icon) +local BaseButton = require(script.Parent.BaseButton) +local Icon = require(script.Parent.Icon) + +export type Props = BaseButton.Props & { + Checked: PubTypes.CanBeState?, + Icon: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, +} local DISABLED_BACKGROUND_TRANSPARENCY = 0.925 local DISABLED_CONTENT_TRANSPARENCY = 0.75 -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Checkbox") - - Props.Checked = EnsureValue(Props.Checked, "boolean", false) - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) - Props.ContrastColor = EnsureValue( - Props.ContrastColor, - "Color3", - Computed(function() - return ColorUtils.Emphasize(Props.Color:get(), 1) - end) - ) - Props.Icon = EnsureValue(Props.Icon, "string", "rbxassetid://16743325652") +return function(Props: Props) + local Checked = EnsureValue(Props.Checked, "boolean", false) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local IconId = EnsureValue(Props.Icon, "string", "rbxassetid://13858821963") return BaseButton { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - + Name = "Checkbox", BackgroundColor3 = Computed(function() - if Props.Disabled:get() then + if Disabled:get() then return Themer.Theme.Colors.BaseContent.Main:get() else - return Props.Color:get() + return Color:get() end end), BackgroundTransparency = Spring( Computed(function() - if Props.Disabled:get() then + if Disabled:get() then return DISABLED_BACKGROUND_TRANSPARENCY else - if Props.Checked:get() then + if Checked:get() then return 0 else return 1 @@ -68,42 +51,38 @@ return function(Props: { [any]: any }) Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), + Disabled = Disabled, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["0.5"]:get()) + end), + StrokeEnabled = true, + StrokeColor = Computed(function() + if Disabled:get() then + return Themer.Theme.Colors.BaseContent.Main:get() + else + return Color:get() + end + end), + StrokeTransparency = Computed(function() + if Disabled:get() then + return DISABLED_BACKGROUND_TRANSPARENCY + else + return 0 + end + end), - Disabled = Props.Disabled, OnActivated = function() - Props.Checked:set(not Props.Checked:get()) + Checked:set(not Checked:get()) end, [Children] = { - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["0.5"]:get()) - end), - }, - Modifier.Stroke { - Color = Computed(function() - if Props.Disabled:get() then - return Themer.Theme.Colors.BaseContent.Main:get() - else - return Props.Color:get() - end - end), - Transparency = Computed(function() - if Props.Disabled:get() then - return DISABLED_BACKGROUND_TRANSPARENCY - else - return 0 - end - end), - }, - Icon { Name = "CheckIcon", - Image = Props.Icon, + Image = IconId, ImageTransparency = Spring( Computed(function() - if Props.Checked:get() then - if Props.Disabled:get() then + if Checked:get() then + if Disabled:get() then return DISABLED_CONTENT_TRANSPARENCY else return 0 @@ -115,10 +94,12 @@ return function(Props: { [any]: any }) Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), - ImageColor3 = Props.ContrastColor, + ImageColor3 = Computed(function() + return ColorUtils.Emphasize(Color:get(), 1) + end), Rotation = Spring( Computed(function() - return (Props.Checked:get() and 0) or -30 + return (Checked:get() and 0) or -30 end), Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening diff --git a/src/Components/Checkbox.story.lua b/src/Components/Checkbox.story.lua index 9ecb001..b5fe63d 100644 --- a/src/Components/Checkbox.story.lua +++ b/src/Components/Checkbox.story.lua @@ -3,7 +3,6 @@ local Fusion = require(OnyxUI.Packages.Fusion) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed @@ -12,27 +11,15 @@ local Checkbox = require(OnyxUI.Components.Checkbox) return { story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, - New "UIListLayout" { - SortOrder = Enum.SortOrder.LayoutOrder, - FillDirection = Enum.FillDirection.Horizontal, - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - }, Checkbox {}, Checkbox { Checked = true,