Commit Graph

49 Commits

Author SHA1 Message Date
David Langley
6da1412de8 Migrate the room list view to shared components (#31921)
* Add NotificationDecoration component

Add the NotificationDecoration component to shared-components.
This is a leaf component that renders notification badges and indicators
for rooms/items including mentions, unread counts, call indicators, etc.

* Add RoomListItem component

Add the RoomListItem component to shared-components.
Includes context menu, hover menu, notification menu, and more options menu.

* Add RoomListPrimaryFilters component

Add filter chips component for filtering the room list by
unread, people, rooms, favourites, mentions, invites, and low priority.

* Update VirtualizedList component

Update VirtualizedList to support the room list virtualization requirements.

* Add RoomList component

Add RoomList component that renders a virtualized list of room items.
Includes story mocks for testing.

* Add RoomListView component

Add RoomListView component that composes RoomList with filters,
empty states, and loading skeleton.

* Export room-list components from shared-components

Add exports for RoomListView, RoomListItem, RoomListPrimaryFilters, and RoomList.
Include i18n strings for room list components.

* Add RoomListItemViewModel

Add view model for individual room list items.
Manages per-room subscriptions and updates only when specific room data changes.

* Add RoomListViewViewModel

Add view model for the room list view.
Manages room list state, filtering, keyboard navigation, and child view models.

* Integrate shared components into RoomListView

Update RoomListView to use the new ViewModels and shared components.
Includes i18n string updates for element-web.

* Remove old room list implementation

Remove old ViewModels, hooks, and view components that are now
replaced by the shared-components implementation.

* Update sliding-sync playwright test

Update test expectations for new room list implementation.

* Add figma links

* Move viewModels to the right folder

* Rename to RoomListEmptyStateView

* Update VirtualizedRoomListView naming

* Update screenshots and snapshots

* Move viewmodel tests to the right location and fix some imports

* lint

* Use unknown as an Opaque type rather than any. It discourages property access within shared components and can still be cast back in EW.

* Update screenshots for new shared component rendering params

* Make room order tests deterministic
2026-02-05 21:05:14 +00:00
renovate[bot]
6dba71a453 Update dependency @playwright/test to v1.58.1 (#31957)
* Update dependency @playwright/test to v1.58.1

* Update snapshots & screenshots

* Another screenshot

* Un-focus room tile and scroll it into view

possibly some change in what ends up focused after a popup disappears

* uncomment the screenshots

* Correct screenshot

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2026-02-05 16:41:48 +00:00
Zack
c647c8ee3d Refactor Timeline Seperator (#31937)
* Refactor TimelineSeparator to shared-components package

  • New TimelineSeparator component in packages/shared-components/
  • Updated MessagePanel.tsx to import from shared-components

* Fix copyright text

* Timeline Unit Tests + Timeline Snapshot Tests

* Imported correct timeline seperator

* Update snapshots because of css update

* Apply suggestion from @florianduros

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

* Created className prop

* Removal of element x unused css

* Update snapshot because of Flex

* Update snapshots because of Flex

* Update css to correct values and compund name

* Added letter spacing to timelineseperator

* rremoval of letter spacing

* added align center to flex to apply correct css changes

* Update snapshots to reflect new css changes

* Update snapshots to reflect css changes

* Added letter-spacing to timeline seperator

* Update snapshots after css update

* update snapshots

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-02-04 13:25:36 +00:00
Florian Duros
877ab183d9 refactor: move Clock from class component to functional component (#31964) 2026-02-04 11:15:06 +00:00
ElementRobot
ae013686f5 [create-pull-request] automated change (#31968)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-04 06:43:01 +00:00
rbondesson
a1be203683 Move EventTileBubble to shared components (#31911)
* Move EventTileBubble to shared components as is

* Added documentation and updated stories and unit tests

* Move 'global' element web css to _common.pcss

* Adding playwright snapshots

* Updated comments

* Added legacy mx_MessageTimestamp class and updated snapshots

* Regenerate snapshots with correct hash

* Changes to css and removed timestamp from properties after review.

* Update screenshot for room-list and fix flaky CI playwright test.

* Blur the play button before matching screenshots

* Changed to button focused instead of blur for consistancy

* Stabilize play button appearance in CI (disabled due to decoding)

* Force play button appearance in CI (disabled due to decoding)

* Add comments on playwright test changes.
Change from React.RefObject<any> to Ref<HTMLDivElement> in EncryptionEvent.tsx

* Update playwright/e2e/composer/CIDER.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright/e2e/composer/CIDER.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright/e2e/crypto/toasts.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-03 14:37:57 +00:00
Richard van der Hoff
af55def428 Add badge for history visibiltity to room info panel (#31927)
* Add `HistoryVisibilityBadge` shared component

* Add `historyVisibility` to `RoomSummaryCardViewModel`

* Add a history visibility badge to the room info panel

* Allow roominfo panel badges to wrap

Now that we have an extra one, it's quite likely we'll have to spill onto more
lines.

* update screenshots

* Set icons in badges to be 16px

Having discussed this with the design team, the icons in badges should be 16px, not 13px,
at default font size settings.

* Add stories for all history visibility states

* fix incorrect use of useRoomState

* fix snapshots

* more snapshot updates

* Update screenshots
2026-02-03 12:50:00 +00:00
ElementRobot
0053bedc38 [create-pull-request] automated change (#31935)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-02-02 06:49:46 +00:00
rbondesson
25d24d478f Refactor DecryptionFailureBody using MVVM and move to shared-components (#31829)
* Refactor DecryptionFailureBody to MVVM and moving it to shared components

* Added unit test for DecryptionFailureBodyViewModel

* Removing the dependency to matrix.js-sdk from the shared component

* Kepp class mx_EventTile_content for tile layout

* Required changes after rebase

* Updates after PR review requests

* Clean up unused translation tags in element-web

* Added missing unit tests to improve coverage

* Additional unit tests to improve test coverage

* Removing obsolete tests from the snap

* Only listen to verification state changes in the wrapper components and also limit the view model to only allow updates in verification state.

* Updates after review requests

* Updated and added missing playwright snapshots

* Bettter structure on view model

---------

Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Zack <zazi21@student.bth.se>
2026-01-30 12:44:23 +00:00
Zack
62c7fe5408 Refactor ReactionsRowButtonTooltip to shared-components (#31866)
* Setting up structure for the init refactoring of ReactionsRowButtonTooltip

* implemented example to follow for refactoring to MVVM

* Refactoring of ReactionsRowButtonTooltipView

* updated reactionrowbutton to use our new viewmodel and removed unessecery comments

* Updated children from reactnode to propswithchildren

* removal of children on the vm have it as a props

* implemented constructor into reactionrowbutton to use vm to viewmodel

* Removal of old component

* Added ViewModel Tests for new viewmodel

* Fix issues after merging develop

* Updated import placement for eslint failure CI

* Add tests for ReactionsRowButton ViewModel integration and click handlers to pass coverage

* Added more tests to cover all conditions

* Pass MatrixClient as prop instead of using global; replace expect(true).toBe(true) with not.toThrow()

* Added new snapshot to reflect modifications on tests

* Update images to fit the CI tests

* Optimize reactions tooltip viewmodel updates

* Removal of module.css for reactionbuttontooltip, we dont need it since we dont use any css

* Fixed snapshots to show the tooltip by introducing a boolean to set open to true in Storybook.

* Update snapshots

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-30 11:53:57 +00:00
ElementRobot
8cef5df140 [create-pull-request] automated change (#31918)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-30 06:40:43 +00:00
Michael Telatynski
e07e26cae5 Fix emoji verification responsive layout (#31899)
* Extract SasEmoji to shared-components

and improve responsive layout

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add baseline screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix e2e test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add SasEmoji snapshot test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add figma link

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve doc

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add new dir to crypto-web-reviewers codeowners as per ask

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-29 17:40:04 +00:00
ElementRobot
b31527261d [create-pull-request] automated change (#31862)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-29 10:57:38 +00:00
Marc
8bb1cb5e63 MVVM WidgetContextMenu component to shared component (#31190)
* Create WidgetContextMenu component in shared-components

* Modify WidgetMenuContext call (apptile, extensioncard, widgetcard), test and stories

* Correctly use new widgetcontextmenu component

* WidgetContextMenuViewModel unit test

* Lint and add comments

* Finalize widgetcontextmenuviewmodel test

* fix lint errors

* Fix test error

* Update playwright screenshots

* add userWidget in widgetcontexstmenu props

* Fix some a11y issues on playwright

* fix linter error widget card

* Use new i18n way for share component widget context menu

* Add i18n context provider for widget context menu

* chore: lint and update snapshot widgetcontextmenu
2026-01-29 10:22:47 +00:00
Skye Elliot
d0c60e6ee4 Remove "history may be shared" banner. (#31881)
* Revert "Update algorithm for history visible banner. (#31577)"

This reverts commit ce9c66ba4c.

* Revert "Update prop type & documentation for HistoryVisibleBanner and VM. (#31545)"

This reverts commit 4da149e56f.

* Revert "Prevent history visible banner from displaying in threads. (#31535)"

This reverts commit c7134e8532.

* Revert "Implement UI for history visibility acknowledgement. (#31156)"

This reverts commit cff9119324.
2026-01-27 11:28:33 +00:00
David Langley
d6f11d828b Migrate ListView to shared components (#31860)
* Migrate ListView to shared components

* Add stories

* lint

* Update name of component

* Use compound spacing

* lint

* VirtualizedList

* Simplify story

* Add git diff check before uploading artifacts

* Fix git diff workaround for vis

* Ignore coverage report in .gitignore

Add coverage report to .gitignore

* Add screenshot test

* Fix package and lock files

* clear unneeded lock file changes

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-26 17:58:46 +00:00
Florian Duros
3fc3653809 refactor: move vm hooks into view model folder (#31832) 2026-01-22 17:28:14 +00:00
Michael Telatynski
35fca4d339 Switch shared-components from jest & test-runner to vitest (#31800)
* Remove babel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove duplicated patch-package dep

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to @fetch-mock/vitest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests to import & call vitest functions

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update test-utils imports

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update unit test snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from jest->vitest for unit tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update visual test screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from test-runner->vitest for visual tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update README

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update CI for shared-components unit & visual tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update yarn.lock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update README

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix storybook trying to import vitest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix css modules leaking between storybook tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak screenshot update script to accept args

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-22 14:17:36 +00:00
R Midhun Suresh
d6d647f56d Unread Sorting - Add option for sorting in OptionsMenuView (#31754)
* Add new sort option

* Support new sorting algorithm in vm

* Add option item for unread sorter

* Add tests
2026-01-22 09:56:47 +00:00
Florian Duros
bc6375d7ab Add message preview toggle to room list header option (#31821)
* feat: add message preview action to room list header option

https://github.com/element-hq/element-web/issues/31214

* test: add e2e test
2026-01-21 10:43:35 +00:00
Florian Duros
9edddce149 RoomList: move room list header to shared components (#31675)
* chore: ignore jest-sonar.xml in gitconfig

* chore: add missing rtl types to shared component

* chore: add `symbol` to `Disposables.trackListener`

* feat: add room list header view to shared components

* fix: change `Space Settings` to `Space settings`

* feat: add room list header view model

* chore: remove old room list header

* chore: update i18n

* test: fix Room-test

* test: update playwright screenshot

* fix: remove extra margin at the top of Sort title in room options

* test: fix room status bar test

* fix: change for correct copyright

* refactor: use `Disposables#track` instead of manually disposing the listener

* refactor: avoid to recompute all the snapshot of `RoomListHeaderViewModel`

* wip

* fix: make header buttons the same size than figma

* test: update shared component snapshots

* test: update shared component screenshots

* test: update EW screenshots
2026-01-21 09:06:01 +00:00
ElementRobot
1c42173e5b [create-pull-request] automated change (#31786)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-19 09:23:52 +00:00
Florian Duros
b9638695b7 Update compound to 8.3.5 (#31736)
* chore: update compound to `8.3.5`

* refactor: remove incorrect color in shared components

* test: update shared components snapshots

* test: update shared component screenshots

* test: update EW snapshots

* test: update EW screenshots

* test: update snapshot
2026-01-16 14:30:08 +00:00
ElementRobot
e2dad68169 [create-pull-request] automated change (#31753)
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
2026-01-16 11:45:30 +00:00
ElementRobot
575b3b5400 Localazy Download (#31595)
* [create-pull-request] automated change

* chore: format i18n files

---------

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-01-15 10:52:53 +00:00
Michael Telatynski
6f0cd7621b Update fetch-mock-jest to @fetch-mock/jest (#31720)
* Remove tests which assert feature_oidc_native_flow=false behaviour, that setting is long gone

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Upgrade fetch-mock-jest to @fetch-mock/jest

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update yarn.lock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Make knip happy

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Disable broken tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix shared-components tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-15 09:21:25 +00:00
Will Hunt
2e6cf8734b Refactor RoomStatusBar into MVVM (#31523)
* Refactor RoomStatusBar into MVVM

* cleanup

* updated snaps

* More cleanup

* fix loop

* fixup

* drop comment

* lint

* cleanup console statements

* Starting to move to a MVVM v2 component.

* extra

* Refactor as a shared-componend / MVVM v2

* some cleanup

* i18n for banner

* remove removed css

* Update playwright tests to have a two stage on the consent bar.

* Update snaps

* Update snapshots

* cleanup

* update snaps

* refactor to use enum

* fix slight differences in pw snaps

* Add unit tests

* fix snaps

* snaps updated

* more test cleanups

* fix snaps

* fixed now?

* Disable animationsq

* lint lint lint

* remove console

* lint

* fix snap

* Refactor based on review comments.

* update view model test

* oops!

* fix snap

* Update snaps

* snap snap snap

* switch to a const map of strings

* Use this.disposables

* Update translations to be inside shared-components

* fix the tac

* Also retry

* Cleanup

* update snaps

* update other snaps

* snap updates
2026-01-12 21:13:15 +00:00
David Baker
2f817f32ce Fix shared components i18n check (#31672)
* Remove extra encryption strings

Found their way in during the i18n changes

* Remove log level silent

to try & work out why it only fails on CI

* Try giving it its own prettierrc

so the import is correct

* Comment why it needs its own prettierrc & put log level silent back

* Comment the right .prettierrc
2026-01-07 12:42:30 +00:00
David Baker
13696af194 Split translations between EW and shared components (#31441)
* Split translations between EW and shared components

Uses update module API with global TranslationKey type that can be
overridden.

WIP.

* Removed the wrong script (for now)

* Add the type files

* Add shared components i18n file

* More i18n strings

* Add i18n check for shared conmponents

* Needs a different name

* rerun i18n for merge from develop, fix test

* Move translated strings to shared components file

NB. there are lots of removed strings for a few languages where we
seem to have hit a localazy bug or something where the key/value
for plurals got switched, making the translations invalid. They've
been missing for a while so I'm removing them rather than trying to
restore them,

* Add shared components files to localazy

* Merge element web & shared component translations

for the built app

* Use right translations for shared component tests

and fix missign en_EN strings

* Pull shared components translations too

* Fix/disable warnings

* We can now remove the build:res call

...right? (right?)

* Remove webpack import for languages index

..and just load it using a relative path which we do for the individual
language files and also did anyway for the index because even in non-test
it was an object, not a string, so we always usesd the 'test' code path.

* Make the storybook language selector work

...without referring to the parent app's files

* Revert unnecessary yarn lock change

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment on why we use merge

* Fix localazy download config

to actually put the translations in the right place

* Better typescript syntax

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Watch both translations files

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-07 11:49:01 +00:00
Will Hunt
cf7bf71d01 Fix Compound Link elements not having an underline. (#31583)
* Do not alter text-decoration if an <a> tag is a Link.

* Update screenshots

* update compound web to 8.3.4

* Update snaps

* Update alllllll the snaps

* update screenshots
2026-01-05 09:27:00 +00:00
Skye Elliot
aa84b2e07c fix: Allow wrapping in Banner component. (#31532)
* fix: Allow wrapping in `Banner` component.

* chore: Remove translations from stories, update snapshot.
2025-12-19 15:40:45 +00:00
ElementRobot
d1762ed29d Localazy Download (#31563)
* [create-pull-request] automated change

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-19 14:41:00 +00:00
Florian Duros
5b900ab6e2 Move room list search to shared components (#31502)
* refactor: move room list search to shared components

* refactor: add view model

* refactor: use view and vm in room list search component

* refactor: use room list id instead of class for landmark navigation

* refactor: remove old room list search css

* test: add screenshots test for room list search view

* test: fix e2e test using class as selector...
2025-12-11 15:43:20 +00:00
Skye Elliot
cff9119324 Implement UI for history visibility acknowledgement. (#31156)
* feat: Implement UI for history visibility acknowledgement.

Shows a banner above the message composer whenever a user opens a room
with non-join history visibility, which they can dismiss.

- Whenever a user opens an encrypted room with non-join history
  visibility, show them a banner, unless we have already marked it as
  dismissed.
- Whenever a user opens an encrypted room with joined history
  visibility, we unmark it as dismissed.

Issue: https://github.com/element-hq/element-meta/issues/2875

* tests: Add test suite for `RoomStatusBarHistoryVisible`.

* docs: Document `RoomStatusBarHistoryVisible` and props interface.

* feat: Use newer `@vector-im/compound` components.

* test: Update snapshots for `RoomStatusBarHistoryVisible` tests.

* chore: Update playwright screenshots.

* feat: Move `RoomStatusBarHistoryVisible` to `shared-components`.

* fix: Address review comments on `RoomStatusBarHistoryVisible`.

* fix: Address review comments on `RoomStatusBar` and tests.

* chore: Move `RoomStatusBarHistoryVisible` to `room/RoomStatusBarHistoryVisible`

* chore: Fix linting issues.

* feat: Gate behind history visibility labs flag.

* feat: Add link to history sharing docs.

* fix: Resolve build issue with shared-components.

* tests: Enable history sharing lab for unit tests.

* tests: Set labs flag in SettingsStore mock.

* fix: Remove non-existent arg - documentation should be updated!

* chore: Remove old CSS rule filter.

* fix: Use package name for import over relative path.

* fix: Mark styles as important due to improper CSS load order.

* docs: Add doc comments to `!important` directives.

This change should restore my status as a good person.

* docs: Correct license header.

* tests: Update `RoomStatusBarHistoryVisible` snapshot.

* tests: Update shared history invite screenshot.

* tests: Revert spurious screenshot changes.

* feat: Update to use `Banner` component.

* chore: Remove broken import.

* chore: Remove unused translation string.

* tests: Add `getHistoryVisibility` to `currentState` of stub room.

* tests: Update screenshot.

* chore: Remove old snapshots.

* tests: Update playwright screenshot.

* feat: Separate `HistoryVisibleBanner` hooks into MVVM architecture.

* chore: Remove unused imports.

* feat: Use info link over action button for `HistoryVisibleBanner`

* tests: Update snapshot for `HistoryVisibleBanner`.

* chore: Remove unused imports.

* feat: Switch to MVVM architecture per style guide.

* tests: Update snapshot for `HistoryVisibleBanner`.

* tests: Update shared components snapshots.

* tests: Add unit tests for `HistoryVisibleBannerView` stories.

* fix: Linting errors from SonarCloud.

* feat: Finalise conversion to MVVM.

* fix: Silent `this` binding issue.

* tests: Update playwright snapshot.

* feat: Introduce wrapper component for `HistoryVisibleBanner`.

* tests: Update playwright screenshots for `HistoryVisibleBanner`.

* docs: Add doc comments to fields in `HistoryVisibleBannerViewModel`.

* tests: Update playwright snapshot.
2025-12-10 10:37:04 +00:00
R Midhun Suresh
a13e9c1285 Export disposing hook from package (#31498)
* Export disposing hook from package

* Increment package version

* Fix lint: Add back new-line
2025-12-10 09:59:54 +00:00
R Midhun Suresh
f4e74c8dd2 Introduce a hook to auto dispose view models (#31178)
* Create hook to auto dispose vm

* Write test

* Fix lint error

* Use proper license

* whatever -> whichever

* Remove eslint comments

* Add clarifying comment
2025-12-05 06:48:50 +00:00
David Baker
5370f25870 Introduce i18nContext (#31347)
* Introduce i18nContext

 * Adds a context that holds the module i1n API
 * Switches shared components to use that instead of importing it directly
 * Adds the context to MatrixChat and BaseDalog so it should be available most places in EW

This is a relatively small PR but does change the way the shared components do i18n so
just doing this one by itself (it stands by itself anyway).

This will allow shared components to use i18n when used in modules.

* Add the file

* Fix import lint

* Name the translate function _t

Then it should continue to get picked up by the script

This seems a bit flaky and ew but I'm not sure I want to get into
changing this in this PR.

* Put humanize back to calling something called _t too

* Missed one

* Add i18n context wrapper to stories

* Unused import

* Fix imports

* wrap richitem

* Wrap other richitem & richlist

* One day I will get my head around this syntax

* Fix import spacing

* Add wrapper to test

* unused import

* Hack around dependency cycle

* Make a moduleapi instance for tests

* Add i18n wrapper to jest-matrix-react

* Simple test for i18napi

* Import type

* Move i18n context wrapper to storybook template

* Unused imports & fix pill story

* Move i18n to its own provider

* Add i18ncontext wrapper to jest tests

* imports

* Bump module api to 1.7.0

* tsdoc
2025-12-02 13:47:14 +00:00
renovate[bot]
99178bce86 Update vector-im (#31306)
* Update vector-im

* Update Jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix playwright styling overrides

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hold back Compound Design Tokens as threads icons unexpectedly grew a dot in the top corner where we conditionally draw a dot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Compound Design Tokens to 6.4.1

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak bubble

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update storybook snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-02 09:57:28 +00:00
Skye Elliot
f00b643774 <Banner/>: Hide Dismiss button if onClose handler is not provided. (#31362)
* feat: Hide `Dismiss` button if `onClose` handler is not provided.

* tests: Update snapshots for `packages/shared-components`.
2025-12-01 11:44:12 +00:00
Skye Elliot
fd152c9c7e Implement a shared Banner component. (#31266)
* feat: Create composer `Banner` shared component.

* fix: Yarn resolution issues corrupting package store.

* chore: Revert "fix: Yarn resolution issues corrupting package store."

This reverts commit 2c1335420331e9cf086cad5c68f7c7432af4b3a5.

* fix: Revert lockfile changes.

* chore: Resolve linting errors.

* chore: Update playwright screenshots.
2025-11-26 15:13:55 +00:00
David Baker
250d6571fe Fix pill buttons in dialogs (#31246)
* Fix pill buttons in dialogs

Add the magic class that makes the buttons not be broken by the
dialog button styles.

* Update snapshot
2025-11-17 15:14:34 +00:00
renovate[bot]
d85e5fca8d Update dependency vite to v7.1.11 [SECURITY] (#31048)
* Update dependency vite to v7.1.11 [SECURITY]

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-11-12 12:32:59 +00:00
David Baker
b0cdbf5eff Make shared component build work in isolation (#31066)
* Make shared component build work in isolation

 * Add deps that were missing because they were getting picked up
   from element-web main but shared-components needs itself
 * Exclude test files from dts generation
 * Bump version

* Change all the shared-component import to be the built artifact

* Don't randomly inhale eslint configs in parent dirs please

* maybe we don't need this anymore?

* maybe fix build

* Maybe fix docker build

* More build faff

 * build:res on the parent as part of shared component prepare
 * link shared component repo inn docker build

* 💅

* 💅x2

* Try converting the translation keys to a .d.ts file manually

so it gets bundled rather than left as a relative import to the json
file

* add the script

* Add this back for 2nd time now I think

* Shouldn't need this anymore

* patch-package on prepare

because we're patching a dev dependency so it won't be there if we're
installed as a dependency

* Unused import

* Prettier compliance

* Only use counterpart from shared components

as per comment

* Import shared components CSS

* Prettier

* Call the one from shared components

rather than recurse infinitely

* Hopefully make tests work

* wake up, comment goes before import

* Fix lint errors

* Fix dupe TranslationKey export

* Update compound-web to fix type error

An update to @types.react adds the 'hint' value to the enum of the
'popover' attribute and this version of compound-web uses the maching
verson of @types/react so they don't conflict.

* Maybe, hopefully, get the types working?

Please?

* Add copyright header to i18nkeys

as eslint complains otherwise since it's now in src

* prettier

* stop running shared-component tests in EW

* update snapshots

because flex is now from an external stylesheet I guess

* More snapshots

* Manual class update

* Avoid bundling compound bits

Because a) it's silly and b) it means we end up bundling a copy of
floating-ui too which causes absolute madness with its useDelayGroup
contexts.

* ignore test util files for coverage

* Add !important

because the styles are being applied in a different order now

* Another !important because css order has changed

* Try adding it here to make the test files ignored

* More !important

* commit yarn lock change

* Add shared components coverage file

* Update snapshots

Because the line height was being overridden to 22.5px somehow by
something I can't find, and now isn't: surely the normal 1.5rem is
more sensible.

* Update snapshots, attempt 2

* Another !important

* More snapshot updates

* Add test for i18n wrappers

& add test script

* lint

* Prettier

* Hopefully run shared component tests

* don't need this bit for non-matrix

* install ew deps

* rigfht coverage location

* Rename job here too

* Try different coverage filename

* Fix copyrights & comment

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-11-03 16:26:47 +00:00
Florian Duros
0e6bacffed Replace ViewWrapper by useMockedViewModel (#31067)
* feat: replace `ViewWrapper` by `useMockedViewModel`

* feat: update existing story
2025-10-23 08:06:06 +00:00
Florian Duros
55a7bc5b13 fix: only export setLanguage for shared-component build (#31053) 2025-10-21 13:08:13 +00:00
R Midhun Suresh
2598e4ea22 Move view model code to shared components package (#31024)
* Remove vm related code from element-web/src

* Add and export view model code from package

* Update imports

* Rewrite vm tests using vitest

* Add github action to run vm tests

* Fix lint errors

* Mvoe tests over to jest

* Try fixing code coverage

* Second attempt at fixing code coverage
2025-10-15 13:49:12 +00:00
renovate[bot]
ac96ab0d46 Update react monorepo (#31014)
* Update react monorepo

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update shared-components snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2025-10-15 11:20:34 +00:00
David Baker
5dc8edcae0 Build the published shared components (#30986)
* Move shared components to a packages/ directory

so they can be publish more sensibly

* Iterate towards split out shared-components module

 * Move shared component source into src/ subdir
 * Fix up imports
 * Include shared components in babel-ing (again)

* Remove now unused dependencies

* Update import in storybook preview

* ...except of course they aren't unused

if we import the shared components by source

* Ignore shared components deps

* Add shared-components to i18n paths

and upgrade web-i18n to version that supports doing so

* Move storybook stuff to shared-components

* Seems we don't need this anymore...

* Remove unused deps

and remove storybook plugin from eslint

* Presumably working-directory is only valid on run steps

* Ignore dep & run prettier

* Prettier on knips.ts

* Hopefully run in right dir

* Remember how to software write

* Okay... how about THIS way?

* Oh right, they were git ignored. Sigh.

* Add concurrently

* Ignore in knip

* Better?

* Paaaaaaaackageeeeeeees

* More packages

* Move playwright snapshots

* Still need a custom snapshots dir

* Build shared components in their separate package

Port https://github.com/element-hq/element-web/pull/30963
to https://github.com/element-hq/element-web/pull/30962

* Add prepare script

* try making it a postinstall

* no, this probably does want to be prepare

postinstall doesn't really make sense since you would not have the
dev dependencies at that point

* Add workflow to publish shared components

* Put in the namespace

* Add eslint back

* Oh, now knip sees them

* Fix another import

* Don't lint shared-components with everything else

Okay, eslint & tsconfig are tied too closely for this to work and
running tsc on the shared components will need its deps installing

* Maybe lint shared components

please?

* Not quite

* Fix name, add main, move patch-package to dependencies

Although the only patched package is a dev dependency, but the postinstall
will fail if patch-package isn't there.

* Switch to npm for publishing

Mostly because knip seems to this that yarn publish doesn't exist,
although actually it seems super confused about versioning so let's
just skip it.

* Also hopefully enable provenance

because why not

* Maybe get exports right

* Add richlist

* Yeah, of course the keys are ordered

why would the keys not be ordered

* Build web resources first

Otherwise yarn prepare won't work

* Fix exports

and add web-i18n as a dep

* prettier

* build res for static analysis

* more build:res

* ViewModel is only an interface

so export type

* Prettier

* Bump to 5

as I'll do at least one test with the publish action
2025-10-14 10:04:23 +00:00
David Baker
2698ad422e Move shared components to a packages/ directory (#30962)
* Move shared components to a packages/ directory

so they can be publish more sensibly

* Iterate towards split out shared-components module

 * Move shared component source into src/ subdir
 * Fix up imports
 * Include shared components in babel-ing (again)

* Remove now unused dependencies

* Update import in storybook preview

* ...except of course they aren't unused

if we import the shared components by source

* Ignore shared components deps

* Add shared-components to i18n paths

and upgrade web-i18n to version that supports doing so

* Move storybook stuff to shared-components

* Seems we don't need this anymore...

* Remove unused deps

and remove storybook plugin from eslint

* Presumably working-directory is only valid on run steps

* Ignore dep & run prettier

* Prettier on knips.ts

* Hopefully run in right dir

* Remember how to software write

* Okay... how about THIS way?

* Oh right, they were git ignored. Sigh.

* Add concurrently

* Ignore in knip

* Better?

* Paaaaaaaackageeeeeeees

* More packages

* Move playwright snapshots

* Still need a custom snapshots dir

* Add eslint back

* Oh, now knip sees them

* Fix another import

* Don't lint shared-components with everything else

Okay, eslint & tsconfig are tied too closely for this to work and
running tsc on the shared components will need its deps installing

* Maybe lint shared components

please?

* Not quite

* Remove storybook again

Re-check if it does work without it

* Remove storybook eslint plugin

as we're not linting storybook here anymore

* Remove this too

* We do need it here though
2025-10-13 10:54:50 +00:00