Skip to content

Refactor Reactions Row Button to shared-components#31993

Merged
ZacksBot merged 101 commits intoelement-hq:developfrom
ZacksBot:refactor/ReactionsRowButton
Feb 25, 2026
Merged

Refactor Reactions Row Button to shared-components#31993
ZacksBot merged 101 commits intoelement-hq:developfrom
ZacksBot:refactor/ReactionsRowButton

Conversation

@ZacksBot
Copy link
Copy Markdown
Member

@ZacksBot ZacksBot commented Feb 9, 2026

Checklist

Refactor ReactionsRowButton to shared-components

Summary

  • Moved ReactionsRowButton component to @element-hq/web-shared-components package as ReactionsRowButtonView
  • Adopted the ViewModel pattern (MVVM) for the component, introducing ReactionsRowButtonSnapshot interface

Changes

New shared component

Added ReactionsRowButtonView under packages/shared-components/src/message-body/ReactionsRowButton/ with:

  • View component using useViewModel hook
  • CSS module for styling
  • Storybook stories for visual testing
  • Unit tests with snapshot coverage

Added ReactionsRowButtonViewModel-test.tsx under element-web/test/viewmodels/message-body

Codebase migration

  • ReactionRow.tsx: Now renders ReactionsRowButtonViewModel instead of the old component

Test plan

  • Verify ReactionsRowButton renders correctly in rooms
  • Check Storybook stories render correctly

Before & After Refactoring

  • Before
image
  • After
image

Closes element-hq/wat-internal#408

@github-actions github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label Feb 9, 2026
@ZacksBot ZacksBot changed the title Refactor/reactions row button Refactor Reactions Row Button Feb 9, 2026
@ZacksBot ZacksBot changed the title Refactor Reactions Row Button Refactor Reactions Row Button to shared-components Feb 9, 2026
Comment on lines +27 to +31
className?: string;
/**
* The aria-label for the button.
*/
ariaLabel?: string;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imo it's more legit to pick up these values from HTMLButtonElement

Comment thread src/components/views/messages/ReactionsRow.tsx Outdated
Comment on lines +10 to +12
font: inherit;
all: unset;
line-height: var(--cpd-font-size-heading-sm);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is strange to set the line-height and to inherit the font

Comment thread src/components/views/messages/ReactionsRow.tsx Outdated
Comment thread src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Outdated
Comment thread src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Outdated
Comment thread src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Outdated
Comment thread test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx Outdated
ZacksBot and others added 9 commits February 24, 2026 12:45
…/ReactionsRowButtonView.tsx

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
…RowButton

# Conflicts:
#	apps/web/res/css/views/messages/_ReactionsRowButton.pcss
#	apps/web/src/components/views/messages/ReactionsRowButton.tsx
#	apps/web/src/viewmodels/message-body/ReactionsRowButtonViewModel.ts
#	apps/web/test/unit-tests/components/views/messages/ReactionsRowButton-test.tsx
#	apps/web/test/unit-tests/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
#	apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

T-Task Tasks for the team like planning Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants