@rbxts/uiblox 0.2.0-alpha.15 → 0.2.0-alpha.17

package/out/ui/packages/toast/components/Toast.d.ts

@@ -6,6 +6,8 @@ export interface ToastProps {
     duration?: number;
     variant?: ToastVariants;
     toggledAt?: number;
+    action?: string;
+    onAction?: () => void;
 }
 declare function Toast(props: CustomizedProps<Frame, ToastProps>): JSX.Element;
 export default Toast;

package/out/ui/packages/toast/components/Toast.luau

@@ -18,6 +18,8 @@ local function Toast(props)
 	if duration == nil then
 		duration = 4
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -26,6 +28,7 @@ local function Toast(props)
 	local container = _binding_1.container
 	local label = _binding_1.label
 	local close = _binding_1.close
+	local actionStyle = _binding_1.action
 	local activePosition = _binding_1.activePosition
 	local inActivePosition = _binding_1.inActivePosition
 	local frameRef = useRef()
@@ -90,6 +93,28 @@ local function Toast(props)
 	end
 	_attributes_1.Text = text
 	local _exp_2 = React.createElement("textlabel", _attributes_1)
+	local _condition_1 = action ~= nil and #action > 0
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Action",
+		}
+		for _k, _v in actionStyle do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = action
+		_attributes_2.Event = {
+			Activated = function()
+				if onAction then
+					onAction()
+				end
+				tween(Directions.Out)
+				if onDismiss then
+					onDismiss()
+				end
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_2))
+	end
 	local _attributes_2 = {
 		key = "Close",
 	}
@@ -104,7 +129,7 @@ local function Toast(props)
 			end
 		end,
 	}
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("imagebutton", _attributes_2))
 end
 local default = Toast
 return {

package/out/ui/packages/toast/components/Toast.styles.luau

@@ -11,6 +11,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 	if variant == nil then
 		variant = ToastVariants.default
 	end
+	local action = _param.action
 	local getToastColors = function()
 		repeat
 			if variant == (ToastVariants.success) then
@@ -38,6 +39,8 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 		until true
 	end
 	local toastColors = getToastColors()
+	local hasAction = action ~= nil and #action > 0
+	local actionSlot = if hasAction then theme.spacing.calc(8) else 0
 	local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
 	local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
 	return createStyles({
@@ -50,17 +53,32 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
 			ZIndex = 50000,
 		},
 		label = {
-			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
-			Position = UDim2.new(0.5, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(0.5, 0.5),
+			Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 1, -theme.padding.calc(4)),
+			Position = if hasAction then UDim2.new(0, theme.padding.calc(2), 0.5, 0) else UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = if hasAction then Vector2.new(0, 0.5) else Vector2.new(0.5, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = toastColors.content,
 			Font = theme.typography.fontFamilies.default,
+			TextXAlignment = if hasAction then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
 			TextScaled = false,
 			ZIndex = 50001,
 		},
+		action = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.new(0, 0, 0, theme.spacing.calc(3)),
+			Position = UDim2.new(1, -(theme.padding.calc(2) + theme.options.constants.iconSizes.small + theme.padding.calc(1)), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = toastColors.content,
+			AutoButtonColor = false,
+			ZIndex = 50001,
+		},
 		close = {
 			Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
 			Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.15",
+	"version": "0.2.0-alpha.17",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",