Commit graph

5114 commits

Author SHA1 Message Date
Germain
4243847f4f
Integrate compound design tokens (#11091)
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* lintfix

* Use correct SpyInstance import

* Using npm build of design tokens
2023-06-14 15:49:14 +00:00
Suguru Hirahara
b40f29f04c
Fix visual regressions around widget permissions (#10954)
* Add a Jest snapshot of AppPermission

* Move the test inside 'for a pinned widget' category

* Make only spinner message bold

* Set font size specified with "mx_AppPermission_smallText" by default

- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning

* Make AppPermission panel scrollable, keeping the content at the center

* Run prettier

* Use Heading component

* Use Icon component

* Fix the test
2023-06-14 11:11:06 +00:00
Suguru Hirahara
0ce3664434
Conform to the naming policy - AppsContainer resizer (#11042)
* Add a snapshot to track AppTile in AppsDrawer

* Conform to the naming policy - AppsContainer resizer

* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style

- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle

* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"

PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
2023-06-13 11:13:07 +00:00
Suguru Hirahara
87f329789b
Fix translucent TextualEvent on search results panel (#10810)
* Unset the opacity value of textual events on the search results panel

* Add a test for checking opacity
2023-06-08 11:11:18 +00:00
Suguru Hirahara
d340fa8d2a
Remove TODO comments about spacing variables (#10695)
The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686
2023-06-06 14:03:52 +00:00
Suguru Hirahara
b3545736dc
Replace Sass variables specific to each CSS file with CSS custom properties (#11039)
* Use CSS custom properties on _LeftPanel.pcss

* Use CSS custom properties on _SpacePanel.pcss

* Use CSS custom properties on _SpaceRoomView.pcss

* Use CSS custom properties on _ImageView.pcss

* Use CSS custom properties on _EventTile.pcss

* Remove a CSS custom properties on _SpaceCreateMenu.pcss

Used only on one instance

* Revert "Use CSS custom properties on _ImageView.pcss"

This reverts commit 0210659f94fcf1107adabecf1bce443fc970a31b.

* Revert "Use CSS custom properties on _EventTile.pcss"

This reverts commit 83cf824a57b174e62935bb9a4433aadcd8f8164f.

* Run prettier
2023-06-06 11:09:04 +00:00
Suguru Hirahara
68a1721b8d
Align list items on the tooltip to the start (#11041) 2023-06-06 07:29:22 +00:00
Suguru Hirahara
43d9e30673
Fix fadein spinner placement on AppTileBody (#10970) 2023-06-01 15:17:28 +00:00
Suguru Hirahara
610ee53257
Extract style rules specific to ThreadsList to prevent a visual regression (#10894) 2023-06-01 15:04:52 +00:00
Michael Weimann
b5727cb463
Include thread replies in message previews (#10631)
* Include thread replies to message previews

* Extend tests

* Fix type issue

* Use currentColor for thread icon

* Fix long room name overflow

* Update snapshots

* Fix preview

* Fix typing issue

* Fix type issues

* Tweak thread reply detection

* Extend tests

* Fix type issue

* Fix test
2023-06-01 07:53:48 +00:00
Robin
6be09eec09
Remove STIXGeneral from the font stack (#10980)
* Remove STIXGeneral from the font stack

STIXGeneral was originally added to our font stack to work around a bug in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=591346) which caused some obscure combining marks to render as tofu. However, because STIXGeneral unexpectedly has glyphs for a handful of common Japanese characters, it's ended up making Japanese text in Element look patchy. I previously attempted to fix this by prioritizing sans-serif over STIXGeneral, but as is evident from our screenshot tests and user reports, this is still not enough on some systems to get Chrome to pick a consistent font for Japanese. On the basis that i18n is more important than supporting a few mathematical diacritics, I propose we remove the font. STIXGeneral is deprecated anyways, so if we want to get these diacritics back there's always the option of looking at its successor, STIXTwo.

* Remove STIXGeneral installation from Cypress workflow
2023-06-01 02:13:55 +00:00
Kerry
e9a8f4a11d
Use semantic headings in space preferences (#11021)
* remove mx_SettingsTab_heading style

* use semantic headings in space preferences dialog

* remove unused settings style: mx_SettingsTab_subheading
2023-05-31 21:22:03 +00:00
Michael Telatynski
176daad49f
Fix room list notification badges going missing in compact layout (#11022) 2023-05-31 12:20:26 +00:00
Kerry
7ef6e1b6f8
Use semantic headings in user settings - Ignored users (#11006)
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

* use semantic headings in mjolnir settings

* remove debug

* unit test UI changes for mjolnir settings
2023-05-30 22:42:53 +00:00
Suguru Hirahara
50f7317762
Remove hover effect from user name on a DM creation UI (#10887) 2023-05-30 09:23:23 +00:00
Michael Telatynski
aa5a2e1363
Fix layout regression in session dropdown (#10999)
* Fix layout regression in session dropdown

* Fix layout regression in session dropdown
2023-05-30 07:59:00 +00:00
Suguru Hirahara
e6cddcbfe1
Remove obsolete style rules - mx_SpaceRoomView_inviteTeammates_betaDisclaimer (#11004)
* Remove obsolete style rules - mx_SpaceRoomView_inviteTeammates_betaDisclaimer

* Remove the deprecated disclaimer

* Remove ExternalLink

* Add a Percy snapshot - 'Invite your teammates' dialog
2023-05-29 21:13:52 +00:00
Kerry
b35fb4fed2
Use semantic headings in user settings - profile (#10973)
* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot
2023-05-29 01:36:09 +00:00
Kerry
520659242b
Fix spacing regression in user settings - roles & permissions (#10993)
* add content container to settingsfieldset

* fix spacing
2023-05-28 22:20:44 +00:00
Suguru Hirahara
6871667741
Tidy style rules related to mx_Dialog (#10549)
* Nest - .mx_Dialog .markdown-body

* Nest - .mx_Dialog .markdown-body *

* Run prettier

* Nest

* Nest - * .mx_Dialog_background

* Run prettier

* Nest - * .mx_Dialog

* Nest - mx_Dialog_title.danger

* Use a variable for z-index: default wrapper index

* Use a variable for z-index: static dialog background

* Use a variable for z-index: static dialog itself

* Use a variable for z-index: standard dialog background

* Use a variable for z-index: standard dialog

* Merge :root selector blocks

* Calculate z-index values to fix the order

* Rename the variables

* Include mx_Dialog_buttons_row in mx_Dialog_buttons

mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}

* Run prettier

* Nest `pre code` in `pre`
2023-05-26 13:28:29 +00:00
Kerry
530197bfcd
Move session manager out of beta (#10968)
* remove old device manager

* undo type fix for cypress crypto

* update test case
2023-05-26 01:58:28 +00:00
Kerry
d0d9a36d07
Use semantic headings in user settings - account (#10972)
* account password section

* account email and phone numbers

* update cypress selectors
2023-05-25 22:42:01 +00:00
Suguru Hirahara
953da1ae2a
Remove _RoleButton.pcss (#10958)
* Remove obsolete style rules

These have been obsolete since 3c5c2bef6d.

* Remove _RoleButton.pcss

mx_RoleButton_tooltip style rules are used only on NotificationBadge.tsx.

* Rename the class
2023-05-25 04:03:19 +00:00
Suguru Hirahara
0c30f0c838
Simplify nodes on ThirdPartyMemberInfo (#10889)
* Remove mx_MemberInfo_profileField

* Merge mx_MemberInfo_profile with mx_MemberInfo_container

* Remove redundant div elements

* Update a Jest snapshot
2023-05-24 08:28:15 +00:00
Kerry
9f011b955b
Use semantic headings in user settings - discovery (#10838)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone
2023-05-24 02:37:10 +00:00
Kerry
9211da20f4
Use semantic headings in user settings - Notifications (#10948)
* use semantic headings in user notif settings

* unset margin for subsection content when no heading

* remove debug
2023-05-23 23:36:09 +00:00
Kerry
f491f2f951
use semantic headings for spellcheck and language (#10959) 2023-05-23 23:34:56 +00:00
Kerry
2f2804f8af
fix content overflow in settings subsection (#10960) 2023-05-23 23:31:56 +00:00
Suguru Hirahara
b7cd1f00fc
Use Icon component for icons on AppTile's menu bar (#10955)
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
2023-05-22 07:48:40 +00:00
Suguru Hirahara
2e3cb0adf7
Replace a Sass variable with a CSS custom property - hover-transition (#10786) 2023-05-22 07:40:40 +00:00
Suguru Hirahara
08c0f332b3
Remove an obsolete CSS file - _ChatCreateOrReuseChatDialog.pcss (#10949)
It has been obsolete since f85898cdca.
2023-05-21 23:50:14 +00:00
Kerry
b3b03e5dcb
Use semantic headings in user settings Appearance (#10827)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
2023-05-21 21:12:11 +00:00
Kerry
55336bf932
Use semantic heading in user settings Sidebar & Voip (#10782)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* semantic headings and cleanup in Sidebar user settings

* semantic heading in voice user settings

* sonarcloud bug and test
2023-05-19 00:03:39 +00:00
Kerry
d9a61c093c
Use semantic headings in user settings Security (#10774)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* test cross signing panel

* strict

* more strict

* tweak

* test eventindexpanel

* strict fixes
2023-05-18 22:32:10 +00:00
Suguru Hirahara
fabfae172b
Update _AuxPanel.pcss (#10888)
* Fix class names - from m_ to mx_

* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss

The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView

* Correct naming

* Strictify: mx_RoomView_auxPanel *

* Nest mx_AuxPanel_stateViews_span

* Sort

* Run prettier

* Use custom properties

* Revert "Use custom properties"

This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
2023-05-18 08:54:31 +00:00
Suguru Hirahara
9f574cc764
Replace Sass variable with CSS custom property: --selected-message-border-width (#10876) 2023-05-18 04:18:59 +00:00
Suguru Hirahara
7917d973e7
Fix widget permission tooltip style rules by applying the naming policy properly (#10916) 2023-05-17 08:51:18 +00:00
Kerry
8cd84b0e7b
Use semantic headings in user settings - integrations and account deletion (#10837)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* test manage integration settings

* test deactivate account section display

* remove debug

* fix cypress test

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-05-17 07:52:44 +00:00
Kerry
68b1930852
Use semantic headings in user settings Keyboard (#10793)
* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* findByTestId

* prettier

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
2023-05-17 02:34:55 +00:00
Kerry
38ae8e98e4
Use semantic headings in user settings Preferences (#10794)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
2023-05-17 01:16:49 +00:00
Suguru Hirahara
4cc6ab1187
Remove AnalyticsPolicyLink (#10924) 2023-05-16 15:52:30 +00:00
Suguru Hirahara
e01d47923d
Deprecate mx_RightPanel_headerButton class (#10821)
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used
2023-05-16 15:42:58 +00:00
Suguru Hirahara
7f017a84c2
Make Privacy Notice external link on integration manager ToS clickable (#10914) 2023-05-16 12:54:38 +00:00
Suguru Hirahara
2eedfbf566
Split mx_AppPermissionWarning on _AppsDrawer.pcss into two classes (#10824)
* Separate mx_AppWarning and mx_AppPermission

* Remove mx_AppPermission_row for a type selector

* Nest: mx_AppPermission

* Run prettier

* Create a CSS file for AppPermission
2023-05-16 11:14:52 +01:00
Suguru Hirahara
ae692f712a
Replace Sass variables with custom properties - mx_Indicator (#10808) 2023-05-16 11:12:45 +01:00
Kerry
9bab356e20
Use semantic headings in user settings Labs (#10773)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-05-16 01:22:45 +00:00
Suguru Hirahara
77d18f1a43
Remove default margin and padding from mx_TabbedView_tabLabels (#10907) 2023-05-15 18:57:29 +01:00
Michael Telatynski
296ed2273e
Use semantic list elements for menu lists and tab lists (#10902)
* Use semantic list elements for pop up menu lists

* Use semantic list elements for tab lists

* Fix tests

* Update snapshot
2023-05-15 13:33:49 +00:00
Suguru Hirahara
4d59a6ff1f
Fix timeline search bar being overlapped by the right panel (#10809)
* Set zero min-width to prevent input area blowout

* Set min-width values to mx_SearchBar_input and mx_SearchBar_button

* Prevent the input area and cancel button from being overlapped by BaseCard

* Use custom properties: --size-button-search

* Take Percy snapshot of mx_SearchBar

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Edit a comment

* Feedback

* Edit a comment

* Update cypress/e2e/timeline/timeline.spec.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-05-15 11:58:59 +00:00
Robin
d213dff4c6
Make widgets take up the full height of the PiP again (#10886)
This fixes a visual regression introduced in 73007d6dd6: AppTiles with the class mx_AppTile_mini don't get an mx_AppsDrawer as their parent, so the --AppTile_mini-height variable needs a broader scope.
2023-05-15 11:54:29 +00:00