From b2e71b7ad12912fdb0385d78451816c2b73ebf07 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 23 Oct 2026 11:42:45 -0300 Subject: [PATCH] fix(fuselage): IconButton badge stays in its corner while pressed The press animation sets `transform: translateY(1px)` on every child of an IconButton but a `role='status'` one. The badge wrapper has no role, so on press that transform replaced the badge's own `translate(30%, -30%)` and the badge jumped toward the button's center. Positioning it with the `translate` property lets both apply: the badge keeps its corner and moves 1px with the icon. --- .changeset/fuselage-icon-button-badge-press.md | 5 +++++ packages/fuselage/src/components/Button/Button.styles.scss | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/fuselage-icon-button-badge-press.md diff --git a/.changeset/fuselage-icon-button-badge-press.md b/.changeset/fuselage-icon-button-badge-press.md new file mode 100644 index 0000000000000..518441af455dc --- /dev/null +++ b/.changeset/fuselage-icon-button-badge-press.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage': patch +--- + +Fixed the `IconButton` badge jumping from the button's corner toward its center while the button is pressed. The badge now moves with the icon by the same 1px press offset. diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss index 4c031cdf40295..bd2a292fb92b0 100644 --- a/packages/fuselage/src/components/Button/Button.styles.scss +++ b/packages/fuselage/src/components/Button/Button.styles.scss @@ -103,10 +103,10 @@ display: flex; - transform: translate(30%, -30%); + translate: 30% -30%; &:dir(rtl) { - transform: translate(-30%, -30%); + translate: -30% -30%; } }