1
0
mirror of https://github.com/element-hq/element-web.git synced 2026-10-24 23:19:26 +03:00

8 Commits

Author SHA1 Message Date
Zack
56281fc3a6 Move and MVVM ReplyTile to shared component (#34617)
* Move ReplyTile to shared component

* Add ReplyTile Storybook story

* Add ReplyTile visual snapshots

* Update ReplyTile snapshots

* Fix ReplyTile refactor

* Fix ReplyTile styles

* Update snapshot

* Use ReplyTile classes

* Fix ReplyTile layouts

* Refactor ReplyTile

* Fix ReplyTile sender

* Fix playwright images to refect the correct design

* Update snapshot

* Remove ReplyTile wrapper

* Remove ReplyTile layout context

* Remove ReplyPreview test

* Re-record reply screenshots after merging develop

The IRC baselines were capturing a bug. _EventTile.pcss had

    [data-layout="irc"] .mx_EventTile_line .mx_MTextBody {
        padding: 1px 0; display: inline-block;
    }

which reached into reply tiles, since the reply chain renders inside
mx_EventTile_line. At 0,3,0 it outranked ReplyTileView's
`.body > :where(*) { display: -webkit-box; -webkit-line-clamp: 2 }`
(0,1,0, as :where() adds no specificity), so reply previews never
clamped to two lines in IRC layout.

Develop's #34727 replaced that rule with .root[data-event-layout="irc"]
in the shared TextualBody module, and ReplyTileView reports the default
presentation, so it no longer applies inside replies. Reply blocks are
now tighter and the two-line clamp works.

The modern and bubble long-strings baselines move by 238px each from
develop's DisambiguatedProfile line-height/letter-spacing change. CI
never reported those because the IRC assertion runs first and aborted
the test.

* Re-record long strings reply screenshots

Regenerated all three baselines for the 'should send, reply, and display
long strings without overflowing' timeline test in a single run so they
stay mutually consistent.

* Update test by feedback request

* Fix ReplyChain snapshots

* Update apps/web/src/components/views/elements/ReplyChain.tsx

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

* Update apps/web/src/components/views/rooms/ReplyPreview.tsx

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

* Import useMatrixClientContext

* Add tsdoc to ReplyTileViewModelProps

* Chain reply tile sender locator

* Document ReplyTileViewModel

* Use role locator for reply file button

* Show reply avatar in long strings screenshots

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
2026-09-15 08:32:39 +00:00
rbondesson
4dacb8b4ca Move EventTile to shared components - #5b (#34781)
* Align view model with the current EventTileView contract

* Use presentation context at every application call for EventTileView

* Render EventTileView from UnwrappedEventTile

* Remove the legacy styling

* Added missing receipt gutter logic

* Adding Card as a new shape, used in TimelineCard panel

* Added visual tests for the Card story

* Migrate EventTile layout styling and enhanced the story book rendering

* Migrate preview, notification, thread, and file shapes

* Use MemberAvatar and RoomAvatar in storybook

* Make slot styling self-contained and clean up corresponding application styling

* Clean up action bar styling

* Clean up event tile styling overrides

* RoomView realted styling fixes

* Adjustments for threads list

* Adjustments to File view

* Adjustments to Card shape

* More styling cleanup

* Updated Playwright test selectors

* Update the story book with more relevant data

* Fix oxlint and update story screenshots

* Restored conditional notification-badge slot rendering to avoid empty wrappers

* Fixed tests and snapshots

* Remove the unused UnreadNotificationBadge

* Updated snapshots and removed a11y failing story test

* Fix test locator hooks

* Fixed styling and logic issues in appearance settings

* Fixes to slotSender and slotBody placement for group layout

* Reorder style sheet for better readability

* Fix for spacing between slotSender, slotBody and reply-chain

* Fix more Playwright test loacators

* Clean up event tile class overrides

* Fix the slotBody styling

* More clean up of unused locators

* Styling fixes

* Fixes to test locators and styling for bubble and irc layout

* Locator fixes, updated snapshots, layout adjustements

* Fix for selected and editing markers and timestamp pos

* Styling fixes to bubble layout. Also dismiss releaseAnnouncements

* Styling updates and dont wait for release announcements anymore

* Styling adjustments

* Make the Playwright test wait for UI to settle before taking screenshot.

* Updated screenshot - the only difference is scroll pos

* Fixing test locators and styling adjustments

* Updated the test to reflect ellipsis, hence the screenshot update

* More test locators and styling adjustments

* Updated snapshots and screenshots

* More locator fixes and snapshots

* Restore the original screenshot

* Added Search result specific styling and make reply chain density aware

* Test locators and styling adjustments

* More styling fixes

* Updated snapshot

* oxfmt

* Styling adjustment and updated snapshots

* Styling adjustement

* Restore the font-12px override on thread view ViewSourceEvent

* Adjust styles for thread view bubble layout of ViewEventSoucrce

* More adjustments

* Styling adjustments

* Fix the bubble  layout thread view event source alignment

* Fix the thread view without destroying the room view

* Removing !important

* Updated snapshots after merge

* Put back !important until MemberAvatarView is actually used in event tiles

* Updated snapshots

* Use hideJumpToBottomButton to avoid flakiness

* More hideJumpToBottomButton
2026-08-31 04:28:13 +00:00
Will Hunt
68f0393a75 Remove global styles for fieldset, legend (#34805)
* Remove fieldset,legend from _common.pcss

* Apply rules directly to components.
2026-08-25 12:50:05 +00:00
hayyaksi
03faca3626 Open the quick settings theme menu upwards so every theme is reachable (#34501)
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2026-08-12 11:22:55 +00:00
Michael Telatynski
49a2bdd7e4 Replace legacy $spacing-X vars with Compound Design Tokens (#34380)
* Replace legacy `$spacing-X` vars with Compound Design Tokens

* Remove unused font size vars

* Use calc to get negative spacing vars
2026-07-22 10:10:57 +00:00
Michael Telatynski
30f442208a Fix React hydration issues (#32958)
* Add more playwright axe tests to settings dialogs

* Add utility to jest setupTests to detect React hydration errors

* Iterate jest utility

* Fix axe issue heading-order

* Fix div-in-p issues

* Fix setupTests.ts

* Fix heading order

* Make types happier

* Fix hydration issues of thead containing text nodes

* Update tests

* Fix form-in-form React hydration issues

* Fix li-in-li React hydration issues

* Fix checked in form without onChange React hydration issue

* Fix styling bleeding from _common.pcss

* Update snapshots

* Fix more remaining issues

* Remove _common.pcss h2 rule altogether

* Fix test

* Update snapshots

* Iterate

* Iterate

* Update snapshots

* Simplify diff

* Test

* Update screenshots

* Update screenshot
2026-04-16 13:35:40 +00:00
Timo
6d99678ade Redesign widget pip and move into shared component (#32654)
* redesign widget pip and move into shared component

* fix onBackClick handler

* fix ci

* Update README.md prepare -> prepack

* add vm tests

* Update WidgetPipView.stories.tsx

* fix tests

* playwright tests

* fix test id

* remove unused files (reappeared after rebase)

* update storybook screenshot tests

* update playwright tests

* adjust padding

* review

* comment and docstring corrections

* fix imports and `this.props`

* fix double `complementary` item

* add WidgetPipView tests and revmoe `setViewingRoom` from
WidgetPipViewModelInterface.

* add doc sting to `setViewingRoom`

* Update RoomStatusBarView.test.tsx

* fix copyright

* Update RoomView-test.tsx.snap

* revert accidental Copyright year changes

* update snapshot RoomView-test
2026-03-10 16:59:51 +00:00
Michael Telatynski
91a3cb03c1 mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts

And a couple of gitignore tweaks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-24 15:43:58 +00:00