Merge branch 'dev' of https://github.com/ImAvafe/OnyxUI into dev

README.md

@@ -31,7 +31,7 @@
 
 ## Documentation 📄
 
-None as of yet. I'll work on Moonwave documentation along with component typings in a future update. Sorry! 😬
+None as of yet. I'll work on Moonwave documentation in a future update. Sorry! Components are fully typed however, so props will autocomplete.
 
 ## Features ✨
 
@@ -50,21 +50,15 @@ OnyxUI should provide a beautiful, simple and flexible components toolset for de
 
 It should follow Roblox Fusion's way of doing things, while innovating upon areas as necessary.
 
-### Props
-
 - **Component props should be as consistent as possible**: `Color` for a `Button` should mean the same as `Color` does for a `Badge`.
 
 - **Props should be inherited across components**: `Button` should support the props from `BaseButton`, `Frame` and `GuiObject`.
 
 - **Engine-provided properties should be supported**: `Size`, `AutomaticSize`, etc are useful nearly everywhere, and should be supported nearly everywhere.
 
-### Theming
-
 - **Theming should be both easy and comprehensive**, letting the developer choose how much, or how little they need to customize.
 
-### Utilities
-
-- **Utilities should enhance the developer experience, while remaining optional**: use `EnsureValue`, `Colors` and `Modifier`, or don't. It's up to you.
+- **OnyxUI should enhance the developer experience, while remaining optional**: use `EnsureValue`, `Colors` and styling props, or don't. It's up to you.
 
 ##
 

src/Components/Badge.story.lua

@@ -3,7 +3,6 @@ local Fusion = require(OnyxUI.Parent.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
 local Value = Fusion.Value
@@ -29,15 +28,12 @@ return {
 
 		local Instance = Frame {
 			Parent = Parent,
+			ListEnabled = true,
+			ListPadding = Computed(function()
+				return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
+			end),
 
 			[Children] = {
-				New "UIListLayout" {
-					SortOrder = Enum.SortOrder.LayoutOrder,
-					FillDirection = Enum.FillDirection.Vertical,
-					Padding = Computed(function()
-						return UDim.new(0, Themer.Theme.Spacing["0.25"]:get())
-					end),
-				},
 				Badge {
 					Contents = { "BADGE" },
 				},

src/Components/Base.lua

@@ -128,13 +128,13 @@ export type Props = {
 	MinTextSize: PubTypes.CanBeState<number>?,
 }
 
-return function(Props: Props)
+return function(Props: Props): GuiObject
 	local Name = EnsureValue(Props.Name, "string", "Base")
 	local CornerRadius = EnsureValue(
 		Props.CornerRadius,
 		"UDim",
 		Computed(function()
-			return UDim.new(0, Themer.Theme.CornerRadius["1"]:get())
+			return UDim.new(0, 0)
 		end)
 	)
 	local StrokeThickness = EnsureValue(Props.StrokeThickness, "number", Themer.Theme.StrokeThickness["1"])
@@ -155,7 +155,7 @@ return function(Props: Props)
 		Props.ListPadding,
 		"UDim",
 		Computed(function()
-			return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
+			return UDim.new(0, Themer.Theme.Spacing["1"]:get())
 		end)
 	)
 	local ListSortOrder = EnsureValue(Props.ListSortOrder, "EnumItem", Enum.SortOrder.LayoutOrder)

src/Components/BaseButton.lua

@@ -29,7 +29,7 @@ export type Props = Base.Props & {
 	ClickSound: PubTypes.CanBeState<Sound>?,
 }
 
-local function Button(Props: Props): () -> TextButton
+return function(Props: Props)
 	local Disabled = EnsureValue(Props.Disabled, "boolean", false)
 
 	local IsHovering = EnsureValue(Props.IsHovering, "boolean", false)
@@ -108,5 +108,3 @@ local function Button(Props: Props): () -> TextButton
 		end,
 	}
 end
-
-return Button

src/Components/Button.lua

@@ -18,7 +18,6 @@ local Icon = require(script.Parent.Icon)
 
 local DISABLED_BACKGROUND_TRANSPARENCY = 0.925
 local DISABLED_CONTENT_TRANSPARENCY = 0.75
-local HOLDING_BACKGROUND_TRANSPARENCY = 0.95
 
 export type Props = BaseButton.Props & {
 	Disabled: PubTypes.CanBeState<boolean>?,
@@ -30,7 +29,7 @@ export type Props = BaseButton.Props & {
 	IsHolding: PubTypes.CanBeState<boolean>?,
 }
 
-local function Button(Props: Props)
+return function(Props: Props)
 	local Disabled = EnsureValue(Props.Disabled, "boolean", false)
 	local Contents = EnsureValue(Props.Contents, "table", {})
 	local Style = EnsureValue(Props.Style, "string", "Filled")
@@ -92,11 +91,7 @@ local function Button(Props: Props)
 					return 0
 				end
 			else
-				if (not Disabled:get()) and IsHolding:get() then
-					return HOLDING_BACKGROUND_TRANSPARENCY
-				else
-					return 1
-				end
+				return 1
 			end
 		end),
 		BackgroundColor3 = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
@@ -160,5 +155,3 @@ local function Button(Props: Props)
 		},
 	}))
 end
-
-return Button

src/Components/Button.story.lua

@@ -2,7 +2,6 @@ local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
 local Themer = require(OnyxUI.Utils.Themer)
 
-local New = Fusion.New
 local Children = Fusion.Children
 local Computed = Fusion.Computed
 
@@ -12,24 +11,17 @@ local Frame = require(script.Parent.Frame)
 return {
 	clipsDescendants = false,
 	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,
+			ListEnabled = true,
+			ListPadding = Computed(function()
+				return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
+			end),
+			Padding = Computed(function()
+				return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get())
+			end),
 
 			[Children] = {
-				New "UIPadding" {
-					PaddingBottom = PreviewPadding,
-					PaddingLeft = PreviewPadding,
-					PaddingRight = PreviewPadding,
-					PaddingTop = PreviewPadding,
-				},
-				New "UIListLayout" {
-					Padding = UDim.new(0, Themer.Theme.Spacing["0.75"]:get()),
-					FillDirection = Enum.FillDirection.Vertical,
-				},
 				Button {
 					Contents = { "Button" },
 				},

src/Components/Divider.lua

@@ -27,7 +27,7 @@ return function(Props: Props)
 		Props.Spacing,
 		"number",
 		Computed(function()
-			return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
+			return UDim.new(0, Themer.Theme.Spacing["1"]:get())
 		end)
 	)
 

src/Components/Frame.lua

@@ -5,13 +5,11 @@ local Base = require(script.Parent.Base)
 
 export type Props = Base.Props & {}
 
-local function Frame(Props: Props)
+return function(Props: Props)
 	return Base(CombineProps(Props, {
 		ClassName = "Frame",
 		Name = "Frame",
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
 	}))
 end
-
-return Frame

src/Components/Icon.lua

@@ -9,7 +9,7 @@ local Themer = require(script.Parent.Parent.Utils.Themer)
 
 export type Props = Image.Props & {}
 
-local function Text(Props: Props)
+return function(Props: Props)
 	return Image(CombineProps(Props, {
 		Name = "Icon",
 		Size = Computed(function()
@@ -18,5 +18,3 @@ local function Text(Props: Props)
 		BackgroundTransparency = 1,
 	}))
 end
-
-return Text

src/Components/IconButton.lua

@@ -11,9 +11,15 @@ local Button = require(script.Parent.Button)
 
 export type Props = Button.Props & {
 	Image: PubTypes.CanBeState<string>?,
+	Disabled: PubTypes.CanBeState<boolean>?,
+	Style: PubTypes.CanBeState<string>?,
+	Color: PubTypes.CanBeState<Color3>?,
+	ContentColor: PubTypes.CanBeState<Color3>?,
+	ContentSize: PubTypes.CanBeState<number>?,
+	IsHolding: PubTypes.CanBeState<boolean>?,
 }
 
-local function IconButton(Props: Props)
+return function(Props: Props)
 	local Image = EnsureValue(Props.Image, "string", "")
 	local Padding = Computed(function()
 		return UDim.new(0, Themer.Theme.Spacing["0.25"]:get())
@@ -30,5 +36,3 @@ local function IconButton(Props: Props)
 		end),
 	}))
 end
-
-return IconButton

src/Components/IconButton.story.lua

@@ -3,7 +3,6 @@ local Fusion = require(OnyxUI.Parent.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,25 +11,18 @@ local Frame = require(script.Parent.Frame)
 
 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,
+			ListPadding = Computed(function()
+				return UDim.new(0, Themer.Theme.Spacing["0.5"]:get())
+			end),
 
 			[Children] = {
-				New "UIPadding" {
-					PaddingBottom = PreviewPadding,
-					PaddingLeft = PreviewPadding,
-					PaddingRight = PreviewPadding,
-					PaddingTop = PreviewPadding,
-				},
-				New "UIListLayout" {
-					Padding = UDim.new(0, Themer.Theme.Spacing["0.5"]:get()),
-					FillDirection = Enum.FillDirection.Horizontal,
-					SortOrder = Enum.SortOrder.LayoutOrder,
-				},
 				IconButton {
 					Image = "rbxassetid://10814531047",
 				},

src/Components/MenuFrame.lua

@@ -3,12 +3,10 @@ local Fusion = require(OnyxUI.Parent.Fusion)
 local Themer = require(OnyxUI.Utils.Themer)
 local CombineProps = require(OnyxUI.Utils.CombineProps)
 
-local Children = Fusion.Children
 local Computed = Fusion.Computed
 local Value = Fusion.Value
 local Out = Fusion.Out
 
-local Frame = require(script.Parent.Frame)
 local CanvasGroup = require(script.Parent.CanvasGroup)
 
 type Props = CanvasGroup.Props & {}
@@ -31,23 +29,5 @@ return function(Props: Props)
 		StrokeColor = Themer.Theme.Colors.Neutral.Main,
 
 		[Out "AutomaticSize"] = AutomaticSize,
-
-		[Children] = {
-			Frame {
-				Name = "Contents",
-				AutomaticSize = Props.AutomaticSize,
-				Size = Computed(function()
-					local AutomaticSizeScales = {
-						[Enum.AutomaticSize.None] = UDim2.fromScale(1, 1),
-						[Enum.AutomaticSize.XY] = UDim2.fromScale(0, 0),
-						[Enum.AutomaticSize.X] = UDim2.fromScale(0, 1),
-						[Enum.AutomaticSize.Y] = UDim2.fromScale(1, 0),
-					}
-					return AutomaticSizeScales[AutomaticSize:get()]
-				end),
-
-				[Children] = Props[Children],
-			},
-		},
-	}, { Children }))
+	}))
 end