From bebe9bc1a82237f986efd68fca7526a12029fa21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Tue, 4 Jun 2024 17:09:56 -0300
Subject: [PATCH] fix(fuselage): `IconButton` with badge positioning (#1388)

---
 .changeset/poor-toes-knock.md                 |  5 ++++
 .../components/Button/IconButton.stories.tsx  | 27 +++++++++++++++++++
 .../src/components/Button/IconButton.tsx      |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-toes-knock.md

diff --git a/.changeset/poor-toes-knock.md b/.changeset/poor-toes-knock.md
new file mode 100644
index 0000000000..41813c380f
--- /dev/null
+++ b/.changeset/poor-toes-knock.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `IconButton` with badge positioning
diff --git a/packages/fuselage/src/components/Button/IconButton.stories.tsx b/packages/fuselage/src/components/Button/IconButton.stories.tsx
index 7df37dc131..63c614e587 100644
--- a/packages/fuselage/src/components/Button/IconButton.stories.tsx
+++ b/packages/fuselage/src/components/Button/IconButton.stories.tsx
@@ -12,9 +12,11 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { PropsVariationSection } from '../../../.storybook/helpers';
+import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
 import Box from '../Box/Box';
 import { ButtonGroup } from '../ButtonGroup';
+import { avatarUrl } from '../Message/helpers';
 import { IconButton } from './IconButton';
 
 const EmojiElement = (
@@ -233,3 +235,28 @@ export const _IconButtonWithBadge: ComponentStory<typeof IconButton> = () => (
     </IconButton>
   </ButtonGroup>
 );
+
+export const _IconButtonAvatarWithBadge: ComponentStory<
+  typeof IconButton
+> = () => (
+  <ButtonGroup>
+    <IconButton
+      icon={<Avatar size='x28' url={avatarUrl} />}
+      small
+      position='relative'
+      overflow='visible'
+    >
+      <Box
+        position='absolute'
+        role='status'
+        className={css`
+          top: 0;
+          right: 0;
+          transform: translate(30%, -30%);
+        `}
+      >
+        <Badge variant='danger'>2</Badge>
+      </Box>
+    </IconButton>
+  </ButtonGroup>
+);
diff --git a/packages/fuselage/src/components/Button/IconButton.tsx b/packages/fuselage/src/components/Button/IconButton.tsx
index 05293e97ca..1b40fe7675 100644
--- a/packages/fuselage/src/components/Button/IconButton.tsx
+++ b/packages/fuselage/src/components/Button/IconButton.tsx
@@ -123,7 +123,6 @@ export const IconButton = forwardRef(
         ref={ref}
         {...props}
       >
-        {children}
         {isValidElement(icon) ? (
           icon
         ) : (
@@ -132,6 +131,7 @@ export const IconButton = forwardRef(
             size={getIconSize()}
           />
         )}
+        {children}
       </Box>
     );
   }