19 Commits

Author SHA1 Message Date
Michael Telatynski
421a69aede Replace more icons with compound (#31381)
* Replace element-icons/chat-bubbles.svg with compound

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

* Replace element-icons/chat-bubbles.svg with compound

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

* Replace external-link.svg with compound

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

* Replace element-icons/hide.svg with compound

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

* Replace element-icons/explore.svg with compound

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

* Replace element-icons/hash-*.svg with compound

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

* Replace element-icons/share.svg with compound

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

* Replace element-icons/group-members.svg with compound

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

* Replace element-icons/mask-as-*.svg with compound

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

* Replace element-icons/low-priority.svg with compound

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

* Replace element-icons/plus-circle.svg with compound

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

* Replace element-icons/roles.svg with compound

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

* Update jest snapshots

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

* Update screenshots

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

* 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>
2025-12-02 15:58:46 +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
Michael Telatynski
7ca4c8bd7f Replace more icons with compound (#31378)
* Replace element-icons/room/composer/attach.svg with compound

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

* Replace element-icons/room/*/emoji.svg with compound

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

* Replace element-icons/room/message-bar/edit.svg with compound

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

* Replace element-icons/room/composer/poll.svg with compound

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

* Replace element-icons/room/composer/plain_text.svg with compound

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

* Remove unused star.svg

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

* Replace element-icons/upload.svg with compound

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

* Replace element-icons/settings/preference.svg with compound

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

* Replace element-icons/settings/flask.svg with compound

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

* Replace element-icons/settings/appearance.svg with compound

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 screenshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-01 13:16:08 +00:00
Matthew Hodgson
7aa7793640 Return to using Fira Code as the default monospace font (#31302)
* Return to using Fira Code as the default monospace font.

because Inconsolata lacks Box Drawings and Geometric Shapes glyphs.
Fixes https://github.com/element-hq/element-web/issues/31289
Partially reverts https://github.com/matrix-org/matrix-react-sdk/pull/3008

* fix quotes

* fix tests

* fix quotes

* appease prettier

* fix snapshot tests, hopefully

* more snapshots
2025-11-24 11:52:32 +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
David Langley
3432613195 Use the new room list by default (#30640)
* Default to new room list and enforce in config for app and develop

* Update jest tests

* Update LandmarkNavigation and e2e test

* Update viewRoomByName helper

* lint

* Update Add -> New Room flow

Keep legacy viewRoomByName until we delete the olds tests.

* Update e2e test to use Add -> Start Chat

* Update screenshots

* Fix viewRoomByName, can't use option as it contains more that just the room name. Using title which should be exact.

* Fix knocking tests

* fix layout.spec.ts and pstn.spec

* timeline snapshots

* Fix spotlight.spec

* TAC spaces and media preview settings

* Fix more screenshots and mark as unread tests

* Fix leftpanel test

* Bugfix for knocking use case. We should check EffectiveMembership when remove rooms from the new room list, so that knocking is handled

* Fix openCreateRoomDialog to new room list specifics to fix create-knock-room.spec.ts

* lint

* Fix Landmark navigation from left panel search to the next landmark

* lint

* Update window-12px-linux.png

* Update apps-drawer-linux.png

* Update sliding sync e2e tests

* Update some screenshots

* Revert change to the space create screenshot

* Use actual screenshot

as focused elements are different when generated locally

* Fix test selectors

* Morfe test screenshot selector / update

* Add test for landmark navigation

* Replace screenshots

* Fix another test that just got added an hour ago

* Not sure why this was changed, doesn't seem necessary

* Disambiguate selector

* Another screenshot that's now changed in width by 1px

* Revert changes to config files

It's being turned on by default so these are unnecessary

* Convert read.unread assertions to new room list

removing support for checking for activity in assertUnread which was
unused.

* Update room list order tests

that feel a bit like they ought to be in room-list rather than read-receipts but whatever

* Fix room titles in read receipts test

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2025-09-16 08:13:05 +00:00
Florian Duros
8086262e04 Move AudioPlayer to shared components (#30386)
* feat: add `PlayPauseButton` to storybook

* feat: add generic media body

* feat: add seekbar component

* chore: add ViewWrapper to help writing stories with vm

* refactor: move `formatBytes` from `formattingUtils` into shared component

* refactor: add `className` props to `Clock`

* feat: add new audio player component

* test(e2e): add screenshots for new shared components

* feat: add AudioPlayerViewModel

* feat: use new audio player in `MAudioBody`

* refactor: remove old audio player

* test(e2e): update existing tests

* refactor: remove unused `DurationClock`

* refactor: rename `SeekBar` into `LegacySeekBar`
2025-08-07 09:02:49 +00:00
renovate[bot]
e5c8d7dbf0 Update playwright to v1.50.1 (#29183)
* Update playwright to v1.50.1

* Update 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-02-18 18:43:40 +00:00
Michael Telatynski
db5b3359c6 Switch to using @fontsource for Inter & Inconsolata (#28540)
* Switch to using @fontsource for Inter & Inconsolata

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

* Remove unused font Open_Sans

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

* Switch to less broken imports

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

* Switch to Ubuntu 24.04

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

* Discard changes to res/themes/dark/css/dark.pcss

* Discard changes to res/themes/legacy-light/css/_fonts.pcss

* Discard changes to res/themes/light-high-contrast/css/light-high-contrast.pcss

* Discard changes to res/themes/light/css/light.pcss

* Discard changes to .github/workflows/end-to-end-tests.yaml

* Set outputDir for fonts

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

* Use headed mode for Playwright

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

* Switch to new Chrome headless mode instead

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

* Cache bust playwright browser install in CI

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

* Update screenshots

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

* Try with 22.04

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

* Update to Ubuntu Noble

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-12-04 11:55:27 +00:00
Michael Telatynski
07506253f9 Update design of files list in right panel (#144)
* Update design of files list in right panel

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

* Make i18n script happier

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

* Improve coverage

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

* Improve coverage

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

* Improve coverage

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

* Discard changes to src/components/structures/MessagePanel.tsx

* Iterate

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

* Iterate

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

* Iterate

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

* Update tests

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

* Fix flaky screenshot test

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>
2024-10-14 18:08:05 +00:00
Michael Telatynski
df4a223eb6 Deduplicate media & voip icons using Compound Design Tokens (#129)
* Deduplicate media & voip icons using Compound Design Tokens

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

* Update tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-08 12:00:37 +00:00
Michael Telatynski
ea3fff2d2f Fix some playwright flaky tests (#12357)
* Fix flaky test `should memorize the timeline position when switch Room A -> Room B -> Room A`

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

* Fix flaky test `should be correctly rendered - high contrast theme`

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

* Fix flaky test `Cryptography › setting up secure key backup should work isDeviceVerified=false`

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

* Update screenshots

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

* Update screenshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-03-21 15:49:12 +00:00
Robin
80c4c3c28c Refine styles of menus, toasts, popovers, and modals (#12332)
* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot
2024-03-13 13:38:32 +00:00
Robin
6eafe0e5a8 Refine styles of controls to match Compound (#12299)
This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
Florian Duros
96a33b800a Revert "Use Compound primary colors for most actions" (#12264)
* Revert ed5ef023b2

* Update failing snapshots

* Update snapshots after develop merge
2024-02-20 16:24:40 +00:00
Florian Duros
ac435c8d4e Revert "Refine menu, toast, and popover colors (#12247)" (#12263)
This reverts commit 0856c7617d.

Co-authored-by: David Langley <langley.dave@gmail.com>
2024-02-20 13:54:33 +00:00
Robin
0856c7617d Refine menu, toast, and popover colors (#12247)
So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.
2024-02-14 22:30:16 +00:00
Robin
ed5ef023b2 Use Compound primary colors for most actions (#12241)
* Use Compound primary colors for most actions

The "accent" color variable is something we should generally not use anymore: it maps to a Compound text token, which makes its semantics inappropriate for icons and backgrounds, and it clashes with the primary colors present on the Compound components we're now bringing into the app. As discussed with design, we would like to phase out its usage on interactive components in favor of the correct icon and background colors from Compound. This is a best-effort attempt at applying new colors to all the major places that we were previously using "accent": mainly, buttons and form controls are affected.

* Update some more colors

* Update test snapshots

* Fix broken screenshot
2024-02-13 20:10:07 +00:00
Michael Telatynski
6199287fe7 Migrate audio-player.spec.ts from Cypress to Playwright (#12008)
* Migrate audio-player.spec.ts from Cypress to Playwright

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

* Stabilise screenshots

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

* Stabilise bot MXID length

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

* Stabilise test user MXID

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

* Stabilise timestamps

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

* Update screenshots

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

* Update element-web-test.ts

* Use deterministic monospace font

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-11 14:36:30 +00:00