Use keycode for hints instead of image

Signed-off-by: GitHub <noreply@github.com>

Author: ryanlua

src/Components/Hotbar.luau

@@ -16,12 +16,12 @@ local function Hotbar(props: Props)
 		[React.Tag] = "Hotbar",
 	}, {
 		SlotLeftHint = React.createElement(HotbarHint, {
-			hintImage = UserInputService:GetImageForKeyCode(Enum.KeyCode.ButtonL1),
+			hintKey = Enum.KeyCode.ButtonL1,
 			forceVisible = props.forceHintVisible,
 			order = -1,
 		}),
 		SlotRightHint = React.createElement(HotbarHint, {
-			hintImage = UserInputService:GetImageForKeyCode(Enum.KeyCode.ButtonR1),
+			hintKey = Enum.KeyCode.ButtonR1,
 			forceVisible = props.forceHintVisible,
 			order = 100,
 		}),

src/Components/HotbarHint.luau

@@ -5,7 +5,7 @@ local UserInputService = game:GetService("UserInputService")
 local React = require("../../react")
 
 export type Props = {
-	hintImage: string,
+	hintKey: Enum.KeyCode,
 	order: number?,
 	forceVisible: boolean?,
 
@@ -39,7 +39,7 @@ local function HotbarHint(props: Props)
 	local visible = props.forceVisible == true or isGamepadPreferred
 
 	return React.createElement("ImageLabel", {
-		Image = props.hintImage,
+		Image = UserInputService:GetImageForKeyCode(props.hintKey),
 		LayoutOrder = props.order,
 		Visible = visible,
 		[React.Tag] = "HintSlot",

src/Stories/HotbarHint.story.luau

@@ -6,7 +6,6 @@ local ReactRoblox = require("../../react-roblox")
 local HotbarHint = require("../Components/HotbarHint")
 
 local controls = {
-	HintImage = "rbxasset://textures/ui/Controls/DesignSystem/ButtonX.png",
 	Visible = true,
 }
 
@@ -16,7 +15,7 @@ return {
 	controls = controls,
 	story = function(props)
 		local component = React.createElement(HotbarHint, {
-			hintImage = props.controls.HintImage,
+			hintKey = Enum.KeyCode.ButtonX,
 			forceVisible = props.controls.Visible,
 		}, {
 			StyleLink = React.createElement("StyleLink", {