Skip to content

Commit

Permalink
Update Checkbox to new standards
Browse files Browse the repository at this point in the history
  • Loading branch information
@ImAvafe
ImAvafe committed Jun 7, 2024
1 parent ec913fa commit a18768d
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 83 deletions.
111 changes: 46 additions & 65 deletions src/Components/Checkbox.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean>?,
Icon: PubTypes.CanBeState<string>?,
Color: PubTypes.CanBeState<Color3>?,
}

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
Expand All @@ -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
Expand All @@ -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
Expand Down
23 changes: 5 additions & 18 deletions src/Components/Checkbox.story.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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,
Expand Down

0 comments on commit a18768d

Please sign in to comment.