Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Refine styles of controls to match Compound #12299

Merged
merged 1 commit into from
Mar 5, 2024

Conversation

robintown
Copy link
Member

@robintown robintown commented Feb 29, 2024

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 #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.

For element-hq/element-web#26992
Closes element-hq/element-web#26987 by way of upgrading compound-design-tokens, which brings in the fix element-hq/compound-design-tokens#77

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 matrix-org#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.
@robintown robintown added this pull request to the merge queue Mar 5, 2024
Merged via the queue into matrix-org:develop with commit 6eafe0e Mar 5, 2024
19 checks passed
@robintown robintown deleted the refine-controls branch March 5, 2024 04:47
github-merge-queue bot pushed a commit that referenced this pull request Mar 7, 2024
It is unused as of #12246. I noticed this while working on #12299.
thoraj added a commit to verji/matrix-react-sdk that referenced this pull request Mar 13, 2024
* Upgrade dependency to matrix-js-sdk@31.5.0-rc.0

* v3.94.0-rc.0

* Handle up/down as well as left/right for horizontal toolbars for improved a11y (matrix-org#12305)

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

* Remove references to internal js-sdk type `CryptoBackend` (matrix-org#12321)

* Remove references to internal js-sdk type `CryptoBackend`

* Use `Paramteters` to avoid `ts-ignore`

* Use `strong` element to semantically denote visually emphasised content (matrix-org#12320)

* Use `strong` element to semantically denote visually emphasised content

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

* Update snapshots

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

* Add comment

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

---------

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

* Remove unused slider component (matrix-org#12303)

It is unused as of matrix-org#12246. I noticed this while working on matrix-org#12299.

* Update matrix-org (matrix-org#11966)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update all non-major dependencies (matrix-org#12322)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update dependency stylelint-scss to v6.2.0 (matrix-org#12323)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update dependency @vector-im/compound-web to v3.1.3 (matrix-org#12281)

* Update dependency @vector-im/compound-web to v3.1.3

* Update snapshots

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

* Update snapshots

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

* Update snapshots

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

* Fix TAC width due to compound update (matrix-org#12326)

---------

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>
Co-authored-by: Florian Duros <florianduros@element.io>

* Call guest access link creation to join calls as a non registered user via the EC SPA (matrix-org#12259)

* Add externall call link button if in public call room

Signed-off-by: Timo K <toger5@hotmail.de>

* Allow configuring a spa homeserver url.

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* remove homeserver url

Signed-off-by: Timo K <toger5@hotmail.de>

* Add custom title to share dialog.
So that we can use it as a "share call" dialog.

Signed-off-by: Timo K <toger5@hotmail.de>

* - rename config options
- only show link button if a guest url is provided
- share dialog custom Title
- rename call share labels

Signed-off-by: Timo K <toger5@hotmail.de>

* rename to title_link

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for ShareDialog

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for share call button

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* remove comment

Signed-off-by: Timo K <toger5@hotmail.de>

* Update src/components/views/dialogs/ShareDialog.tsx

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

* Fix spotlight opening in TAC (matrix-org#12315)

* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`

* Reset power selector on API failure to prevent state mismatch (matrix-org#12319)

* Reset power selector on API failure to prevent state mismatch

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

* Allow onChange to be sync or async

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

* Add unmounted check

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

* Improve coverage

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

* Iterate

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

---------

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

* Use correct push rule to evaluate room-wide mentions (matrix-org#12318)

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

* Improve Forward Dialog a11y by switching to roving tab index interactions (matrix-org#12306)

* Improve Forward Dialog a11y by switching to roving tab index interactions

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

* Improve screen reader readout

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

* Improve screen reader readout

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

* Add tests

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

---------

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

* [create-pull-request] automated change (matrix-org#12330)

Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>

* Reuse media content/info types from the js-sdk (matrix-org#12308)

* TAC: Fix CSS & component typos (matrix-org#12333)

* Fix CSS & component typo

* Update snapshots

* Element Call: fix widget shown while its still loading (`waitForIframeLoad=false`) (matrix-org#12292)

* show loading spinner also if waitForIframeLoad = false
Configure EC so it waits for the content loaded action
!WARNING This breaks compatibility with the full mesh branch.
I would like to discuss here if/when we can do that.

Signed-off-by: Timo K <toger5@hotmail.de>

* stop show loading screen on widget ready (instead of preparing)

Signed-off-by: Timo K <toger5@hotmail.de>

* wait until widget loading is over before comparing screenshots

Signed-off-by: Timo K <toger5@hotmail.de>

* fix waitForIFrame=true widgets

Signed-off-by: Timo K <toger5@hotmail.de>

* test

Signed-off-by: Timo K <toger5@hotmail.de>

* always start with loading true. + cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify loading

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots (start not in loading state for waitForIframe = true widgets)

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

* Upgrade dependency to matrix-js-sdk@31.5.0

* v3.94.0

* Resetting package fields for development

* Reset matrix-js-sdk back to develop branch

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: RiotRobot <releases@riot.im>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request Mar 13, 2024
https://build.opensuse.org/request/show/1157523
by user dheidler + anag+factory
- Version 1.11.60
  ## ✨ Features
  * Refine styles of controls to match Compound (matrix-org/matrix-react-sdk#12299). Contributed by @robintown.
  * Hide the archived section (matrix-org/matrix-react-sdk#12286). Contributed by @dbkr.
  * Add theme data to EC widget Url (matrix-org/matrix-react-sdk#12279). Contributed by @toger5.
  * Update MSC2965 OIDC Discovery implementation (matrix-org/matrix-react-sdk#12245). Contributed by @t3chguy.
  * Use green dot for activity notification in `LegacyRoomHeader` (matrix-org/matrix-react-sdk#12270). Contributed by @florianduros.
  ## 🐛 Bug Fixes
  * Fix requests for senders to submit auto-rageshakes (https://github.com/matrix-org/ma
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request Mar 13, 2024
https://build.opensuse.org/request/show/1157524
by user dheidler + anag+factory
- Version 1.11.60
  ## ✨ Features
  * Refine styles of controls to match Compound (matrix-org/matrix-react-sdk#12299). Contributed by @robintown.
  * Hide the archived section (matrix-org/matrix-react-sdk#12286). Contributed by @dbkr.
  * Add theme data to EC widget Url (matrix-org/matrix-react-sdk#12279). Contributed by @toger5.
  * Update MSC2965 OIDC Discovery implementation (matrix-org/matrix-react-sdk#12245). Contributed by @t3chguy.
  * Use green dot for activity notification in `LegacyRoomHeader` (matrix-org/matrix-react-sdk#12270). Contributed by @florianduros.
  ## 🐛 Bug Fixes
  * Fix requests for senders to submit auto-rageshakes (https://github.com/matrix-org/ma
thoraj added a commit to verji/matrix-react-sdk that referenced this pull request Mar 14, 2024
* Upgrade dependency to matrix-js-sdk@31.5.0-rc.0

* v3.94.0-rc.0

* Handle up/down as well as left/right for horizontal toolbars for improved a11y (matrix-org#12305)

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

* Remove references to internal js-sdk type `CryptoBackend` (matrix-org#12321)

* Remove references to internal js-sdk type `CryptoBackend`

* Use `Paramteters` to avoid `ts-ignore`

* Use `strong` element to semantically denote visually emphasised content (matrix-org#12320)

* Use `strong` element to semantically denote visually emphasised content

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

* Update snapshots

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

* Add comment

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

---------

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

* Remove unused slider component (matrix-org#12303)

It is unused as of matrix-org#12246. I noticed this while working on matrix-org#12299.

* Update matrix-org (matrix-org#11966)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update all non-major dependencies (matrix-org#12322)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update dependency stylelint-scss to v6.2.0 (matrix-org#12323)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update dependency @vector-im/compound-web to v3.1.3 (matrix-org#12281)

* Update dependency @vector-im/compound-web to v3.1.3

* Update snapshots

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

* Update snapshots

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

* Update snapshots

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

* Fix TAC width due to compound update (matrix-org#12326)

---------

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>
Co-authored-by: Florian Duros <florianduros@element.io>

* Call guest access link creation to join calls as a non registered user via the EC SPA (matrix-org#12259)

* Add externall call link button if in public call room

Signed-off-by: Timo K <toger5@hotmail.de>

* Allow configuring a spa homeserver url.

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* remove homeserver url

Signed-off-by: Timo K <toger5@hotmail.de>

* Add custom title to share dialog.
So that we can use it as a "share call" dialog.

Signed-off-by: Timo K <toger5@hotmail.de>

* - rename config options
- only show link button if a guest url is provided
- share dialog custom Title
- rename call share labels

Signed-off-by: Timo K <toger5@hotmail.de>

* rename to title_link

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for ShareDialog

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for share call button

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* remove comment

Signed-off-by: Timo K <toger5@hotmail.de>

* Update src/components/views/dialogs/ShareDialog.tsx

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

* Fix spotlight opening in TAC (matrix-org#12315)

* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`

* Reset power selector on API failure to prevent state mismatch (matrix-org#12319)

* Reset power selector on API failure to prevent state mismatch

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

* Allow onChange to be sync or async

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

* Add unmounted check

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

* Improve coverage

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

* Iterate

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

---------

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

* Use correct push rule to evaluate room-wide mentions (matrix-org#12318)

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

* Improve Forward Dialog a11y by switching to roving tab index interactions (matrix-org#12306)

* Improve Forward Dialog a11y by switching to roving tab index interactions

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

* Improve screen reader readout

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

* Improve screen reader readout

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

* Add tests

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

---------

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

* [create-pull-request] automated change (matrix-org#12330)

Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>

* Reuse media content/info types from the js-sdk (matrix-org#12308)

* TAC: Fix CSS & component typos (matrix-org#12333)

* Fix CSS & component typo

* Update snapshots

* Element Call: fix widget shown while its still loading (`waitForIframeLoad=false`) (matrix-org#12292)

* show loading spinner also if waitForIframeLoad = false
Configure EC so it waits for the content loaded action
!WARNING This breaks compatibility with the full mesh branch.
I would like to discuss here if/when we can do that.

Signed-off-by: Timo K <toger5@hotmail.de>

* stop show loading screen on widget ready (instead of preparing)

Signed-off-by: Timo K <toger5@hotmail.de>

* wait until widget loading is over before comparing screenshots

Signed-off-by: Timo K <toger5@hotmail.de>

* fix waitForIFrame=true widgets

Signed-off-by: Timo K <toger5@hotmail.de>

* test

Signed-off-by: Timo K <toger5@hotmail.de>

* always start with loading true. + cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify loading

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots (start not in loading state for waitForIframe = true widgets)

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

* Upgrade dependency to matrix-js-sdk@31.5.0

* v3.94.0

* Resetting package fields for development

* Reset matrix-js-sdk back to develop branch

* Refine styles of menus, toasts, popovers, and modals (matrix-org#12332)

* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of matrix-org#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

* Make EC widget theme reactive - Update widget url when the theme changes (matrix-org#12295)

* update widget url when the theme changes

Signed-off-by: Timo K <toger5@hotmail.de>

* quick "make it EC specific" workaround proposal.

Signed-off-by: Timo K <toger5@hotmail.de>

* use `matches`

Signed-off-by: Timo K <toger5@hotmail.de>

* test coverage

Signed-off-by: Timo K <toger5@hotmail.de>

* more test coverage

Signed-off-by: Timo K <toger5@hotmail.de>

* fix jest

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for theme changes

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots

Signed-off-by: Timo K <toger5@hotmail.de>

* test for theme update with non ec widget

Signed-off-by: Timo K <toger5@hotmail.de>

* add dark custom theme widget url

Signed-off-by: Timo K <toger5@hotmail.de>

* trigger conditions for theme cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* update tests using testId

Signed-off-by: Timo K <toger5@hotmail.de>

* use typed event emitter for theme watcher

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify condition

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: RiotRobot <releases@riot.im>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

avatar placeholders are transparent
2 participants