chore: `ToolboxAction` pressed state (#29397)

apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx

@@ -76,7 +76,6 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	// }, [visibleActions.length, open]);
 
 	// TODO: Create helper for render Actions
-	// TODO: Add proper Vertical Divider Component
 
 	return (
 		<>
@@ -87,7 +86,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 					title: t(title),
 					className,
 					index,
-					info: id === tab?.id,
+					pressed: id === tab?.id,
 					action,
 					key: id,
 					disabled,
@@ -106,7 +105,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 					title: t(title),
 					className,
 					index,
-					info: id === tab?.id,
+					pressed: id === tab?.id,
 					action,
 					key: id,
 					disabled,

packages/ui-client/src/components/Header/ToolBox/ToolBoxAction.tsx

 import { IconButton } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
 import { forwardRef } from 'react';
 
-const ToolBoxAction: FC<any> = forwardRef(function ToolBoxAction(
-	{ id, icon, color, action, className, index, title, 'data-tooltip': tooltip, ...props },
+const ToolBoxAction = forwardRef<HTMLButtonElement, any>(function ToolBoxAction(
+	{ id, icon, action, index, title, 'data-tooltip': tooltip, ...props },
 	ref,
 ) {
 	return (
 		<IconButton
 			data-qa-id={`ToolBoxAction-${icon}`}
-			className={className}
+			ref={ref}
 			onClick={() => action(id)}
 			data-toolbox={index}
 			key={id}
 			icon={icon}
-			position='relative'
 			tiny
-			overflow='visible'
-			ref={ref}
-			color={!!color && color}
-			{...{ ...props, ...(tooltip ? { 'data-tooltip': tooltip, 'title': '' } : { title }) }}
+			{...(tooltip ? { 'data-tooltip': tooltip, 'title': '' } : { title })}
+			{...props}
 		/>
 	);
 });