diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx index c9a654f63d64c1e04c1f07752c1e1cdc03e5ad2c..6fadb90419480774c233e84a911def7638adfeee 100644 --- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx +++ b/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, diff --git a/packages/ui-client/src/components/Header/ToolBox/ToolBoxAction.tsx b/packages/ui-client/src/components/Header/ToolBox/ToolBoxAction.tsx index 8bf83cb9a9a3d7580143f955ced0086c7a43b94a..a0265dccde7dab948095494e7383826425667e3e 100644 --- a/packages/ui-client/src/components/Header/ToolBox/ToolBoxAction.tsx +++ b/packages/ui-client/src/components/Header/ToolBox/ToolBoxAction.tsx @@ -1,25 +1,21 @@ 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} /> ); });