[ggazzo]

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

1. Open any IconButton with a badge (e.g. the room header's threads or discussions action with unread items, or the IconButton badge stories in Storybook).
2. 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.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is still a draft
• This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: b2e71b7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@rocket.chat/fuselage	Patch
@rocket.chat/meteor	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/fuselage-forms	Patch
@rocket.chat/fuselage-toastbar	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/layout	Patch
@rocket.chat/onboarding-ui	Patch
@rocket.chat/storybook-config	Patch
@rocket.chat/ui-account	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-composer	Patch
@rocket.chat/ui-conference	Patch
@rocket.chat/ui-media	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/ui-livekit	Patch
@rocket.chat/rest-typings	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[ggazzo]

Folded into #42974.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71.97%. Comparing base (977a114) to head (b2e71b7).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #43066      +/-   ##
===========================================
- Coverage    71.99%   71.97%   -0.02%     
===========================================
  Files         5274     5274              
  Lines       224972   224972              
  Branches     41655    41804     +149     
===========================================
- Hits        161966   161934      -32     
- Misses       57792    57825      +33     
+ Partials      5214     5213       -1     

Flag	Coverage Δ
unit	71.99% <ø> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.