fix(fuselage): IconButton badge stays in its corner while pressed
Proposed changes (including videos or screenshots)
Pressing an IconButton that has a badge made the badge jump from the button's corner toward its center, then back on release.
The press animation (click-animation in interactivity.scss) sets transform: translateY(1px) on every child of the button but a role='status' one. The badge wrapper (.rcx-button__badge) has no role, so on :active that rule, being more specific, replaced the badge's own transform: translate(30%, -30%).
The badge is now placed with the translate property, which composes with transform instead of being replaced by it: the badge keeps its corner and moves 1px with the icon, like the rest of the button's content.
Measured in Chromium with a 16px badge:
| at rest → pressed | |
|---|---|
| before | moves −4.8px, +5.8px |
| after | moves 0px, +1px |
Issue(s)
https://rocketchat.atlassian.net/browse/ARCH-2590
Steps to test or reproduce
- Open any
IconButtonwith a badge (e.g. the room header's threads or discussions action with unread items, or theIconButtonbadge stories in Storybook). - Press and hold the mouse on it: the badge stays in its corner.
Further comments
Shipped in @rocket.chat/fuselage 0.96.0. Found while working on #42974, whose badgePosition='bottom-end' will need the same translate once this lands.