fix(fuselage): IconButton with badge positioning (#1388)

RocketChat · Jun 4, 2024 · bebe9bc · bebe9bc
1 parent 0e3d3c1
commit bebe9bc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/.changeset/poor-toes-knock.md 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
@@ -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
@@ -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>
     );
   }