From 2a7780052e60f23a8a7a90d549f27dea471e5ccd Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 4 Jul 2023 17:54:28 +0100 Subject: [PATCH] Compound Typography pass regression fixes (#11189) * Compound Typography pass regression fixes * updates to the room list sizing * fix subtitle clipping * revert display name to use medium variant --- .../views/settings/shared/_SettingsSubsection.pcss | 1 - res/css/views/rooms/_RoomTile.pcss | 10 ++++++---- res/css/views/settings/_NotificationSettings2.pcss | 1 - res/css/views/settings/tabs/_SettingsSection.pcss | 2 +- src/components/views/dialogs/BaseDialog.tsx | 2 +- src/components/views/rooms/RoomTileSubtitle.tsx | 2 +- .../views/settings/shared/SettingsSection.tsx | 8 +++++++- .../structures/__snapshots__/MatrixChat-test.tsx.snap | 4 ++-- .../views/dialogs/UserSettingsDialog-test.tsx | 2 +- .../__snapshots__/ChangelogDialog-test.tsx.snap | 2 +- .../dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap | 2 +- .../dialogs/__snapshots__/ExportDialog-test.tsx.snap | 2 +- .../dialogs/__snapshots__/FeedbackDialog-test.tsx.snap | 2 +- .../ManualDeviceKeyVerificationDialog-test.tsx.snap | 4 ++-- .../MessageEditHistoryDialog-test.tsx.snap | 4 ++-- .../__snapshots__/ServerPickerDialog-test.tsx.snap | 2 +- .../__snapshots__/CreateKeyBackupDialog-test.tsx.snap | 6 +++--- .../__snapshots__/ImportE2eKeysDialog-test.tsx.snap | 2 +- .../__snapshots__/Notifications2-test.tsx.snap | 4 ++-- .../AdvancedRoomSettingsTab-test.tsx.snap | 2 +- .../room/__snapshots__/BridgeSettingsTab-test.tsx.snap | 4 ++-- .../SecurityRoomSettingsTab-test.tsx.snap | 4 ++-- .../AppearanceUserSettingsTab-test.tsx.snap | 2 +- .../__snapshots__/GeneralUserSettingsTab-test.tsx.snap | 2 +- .../KeyboardUserSettingsTab-test.tsx.snap | 2 +- .../__snapshots__/LabsUserSettingsTab-test.tsx.snap | 2 +- .../__snapshots__/MjolnirUserSettingsTab-test.tsx.snap | 2 +- .../PreferencesUserSettingsTab-test.tsx.snap | 2 +- .../SecurityUserSettingsTab-test.tsx.snap | 4 ++-- .../__snapshots__/SidebarUserSettingsTab-test.tsx.snap | 2 +- .../AddExistingToSpaceDialog-test.tsx.snap | 2 +- .../SpaceSettingsVisibilityTab-test.tsx.snap | 2 +- 32 files changed, 50 insertions(+), 44 deletions(-) diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index 2d8894150f0..6ee9ac429c8 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -26,7 +26,6 @@ limitations under the License. .mx_SettingsSubsection_text { width: 100%; box-sizing: inherit; - font-size: $font-15px; color: $secondary-content; } diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index 8d0cf1c802a..78eb6f4bf1e 100644 --- a/res/css/views/rooms/_RoomTile.pcss +++ b/res/css/views/rooms/_RoomTile.pcss @@ -24,7 +24,7 @@ limitations under the License. contain: content; /* Not strict as it will break when resizing a sublist vertically */ box-sizing: border-box; - font-size: $font-13px; + font-size: var(--cpd-font-size-body-sm); &.mx_RoomTile_selected, &:hover, @@ -60,7 +60,7 @@ limitations under the License. color: $secondary-content; display: flex; gap: $spacing-4; - line-height: $font-18px; + line-height: 1.2; } .mx_RoomTile_title, @@ -71,7 +71,8 @@ limitations under the License. } .mx_RoomTile_title { - font: var(--cpd-font-heading-sm-medium); + font: var(--cpd-font-body-md-regular); + line-height: 1; &.mx_RoomTile_titleHasUnreadEvents { font-weight: var(--cpd-font-weight-semibold); @@ -79,7 +80,8 @@ limitations under the License. } .mx_RoomTile_titleWithSubtitle { - margin-top: -3px; /* shift the title up a bit more */ + margin-top: -2px; /* shift the title up a bit more */ + margin-bottom: 1px; } } diff --git a/res/css/views/settings/_NotificationSettings2.pcss b/res/css/views/settings/_NotificationSettings2.pcss index 0bad2e992c6..8f806e22948 100644 --- a/res/css/views/settings/_NotificationSettings2.pcss +++ b/res/css/views/settings/_NotificationSettings2.pcss @@ -69,7 +69,6 @@ limitations under the License. .mx_Tag { border-radius: 18px; - line-height: 2.4rem; padding: 6px 12px; background: $panel-actions; margin: 0; diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss index d3a35b7f47a..0f911ea6908 100644 --- a/res/css/views/settings/tabs/_SettingsSection.pcss +++ b/res/css/views/settings/tabs/_SettingsSection.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_SettingsSection { --SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_heading_nth_child-margin-top: 30px; - --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ + --SettingsTab_tooltip-max-width: 20px; /* So it fits in the space provided by the page */ color: $primary-content; diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index 089e7b16187..84759219282 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/src/components/views/dialogs/BaseDialog.tsx @@ -174,8 +174,8 @@ export default class BaseDialog extends React.Component { > {!!(this.props.title || headerImage) && ( diff --git a/src/components/views/rooms/RoomTileSubtitle.tsx b/src/components/views/rooms/RoomTileSubtitle.tsx index 55ff0dea9ae..f3f8604acab 100644 --- a/src/components/views/rooms/RoomTileSubtitle.tsx +++ b/src/components/views/rooms/RoomTileSubtitle.tsx @@ -57,7 +57,7 @@ export const RoomTileSubtitle: React.FC = ({ "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply, }); - const icon = messagePreview.isThreadReply ? : null; + const icon = messagePreview.isThreadReply ? : null; return (
diff --git a/src/components/views/settings/shared/SettingsSection.tsx b/src/components/views/settings/shared/SettingsSection.tsx index 926ef5e2323..be37fd39730 100644 --- a/src/components/views/settings/shared/SettingsSection.tsx +++ b/src/components/views/settings/shared/SettingsSection.tsx @@ -43,7 +43,13 @@ export interface SettingsSectionProps extends HTMLAttributes { */ export const SettingsSection: React.FC = ({ className, heading, children, ...rest }) => (
- {typeof heading === "string" ? {heading} : <>{heading}} + {typeof heading === "string" ? ( + + {heading} + + ) : ( + <>{heading} + )}
{children}
); diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap index bfc1e25d9ed..9acb721a82a 100644 --- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap +++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap @@ -32,7 +32,7 @@ exports[` with an existing session onAction() room actions leave_r class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Leave room @@ -89,7 +89,7 @@ exports[` with an existing session onAction() room actions leave_r class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Leave space diff --git a/test/components/views/dialogs/UserSettingsDialog-test.tsx b/test/components/views/dialogs/UserSettingsDialog-test.tsx index cba01bc1e17..fc0e36b93b6 100644 --- a/test/components/views/dialogs/UserSettingsDialog-test.tsx +++ b/test/components/views/dialogs/UserSettingsDialog-test.tsx @@ -75,7 +75,7 @@ describe("", () => { const getActiveTabLabel = (container: Element) => container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent; const getActiveTabHeading = (container: Element) => - container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent; + container.querySelector(".mx_SettingsSection .mx_Heading_h3")?.textContent; it("should render general settings tab when no initialTabId", () => { const { container } = render(getComponent()); diff --git a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap index 92adabae26c..83bc2f7d3f3 100644 --- a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap @@ -18,7 +18,7 @@ exports[` should fetch github proxy url for each repo with ol class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Changelog diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index 58e176af615..1262a0840b4 100644 --- a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -17,7 +17,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Developer Tools diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap index a95a4c094be..e9f10f6e9b0 100644 --- a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap @@ -12,7 +12,7 @@ exports[` renders export dialog 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Export Chat diff --git a/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap index 08739563f68..505e7de4c0d 100644 --- a/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap @@ -18,7 +18,7 @@ exports[`FeedbackDialog should respect feedback config 1`] = ` class="mx_Dialog_header" >

Feedback diff --git a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap index 535485e094c..5987b6e0f6f 100644 --- a/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap @@ -18,7 +18,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Verify session @@ -133,7 +133,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Verify session diff --git a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap index 7944df4cc1d..8c4dac800ee 100644 --- a/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap @@ -17,7 +17,7 @@ exports[` should match the snapshot 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Message edits @@ -133,7 +133,7 @@ exports[` should support events with 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Message edits diff --git a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap index cdda9726d0b..7f16d4ee59d 100644 --- a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap @@ -18,7 +18,7 @@ exports[` should render dialog 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Sign into your homeserver diff --git a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap index bc0a4384f5b..9d62384e3c1 100644 --- a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap +++ b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap @@ -17,7 +17,7 @@ exports[`CreateKeyBackupDialog should display the error message when backup crea class="mx_Dialog_header" >

Starting backup… @@ -77,7 +77,7 @@ exports[`CreateKeyBackupDialog should display the spinner when creating backup 1 class="mx_Dialog_header" >

Starting backup… @@ -124,7 +124,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Success! diff --git a/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap index 68e683aceed..2de1ec824e3 100644 --- a/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap +++ b/test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap @@ -17,7 +17,7 @@ exports[`ImportE2eKeysDialog renders 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Import room keys diff --git a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap index 9eef11fbaea..8a26524dbe5 100644 --- a/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap +++ b/test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap @@ -9,7 +9,7 @@ exports[` correctly handles the loading/disabled state 1`] = ` class="mx_SettingsSection" >

Notifications

@@ -728,7 +728,7 @@ exports[` matches the snapshot 1`] = ` class="mx_SettingsSection" >

Notifications

diff --git a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap index 3263647932a..17390e6b00c 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = ` class="mx_SettingsSection" >

Advanced

diff --git a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap index ed78d3834cb..81f01b20368 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[` renders when room is bridging messages 1`] = ` class="mx_SettingsSection" >

Bridges

@@ -101,7 +101,7 @@ exports[` renders when room is not bridging messages to any class="mx_SettingsSection" >

Bridges

diff --git a/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap index c14c11b1286..397368d3994 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap @@ -122,7 +122,7 @@ exports[` join rule handles error when updating join class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Failed to update the join rules @@ -164,7 +164,7 @@ exports[` join rule warns when trying to make an encr class="mx_Dialog_header mx_Dialog_headerWithCancel" >

Are you sure you want to make this encrypted room public? diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap index 90471147793..ea9883a6a52 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap @@ -13,7 +13,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` class="mx_SettingsSection" >

Customise your appearance

diff --git a/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap index 80baa862ade..8da6784d2df 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap @@ -60,7 +60,7 @@ exports[` deactive account should render section when class="mx_SettingsSection" >

Deactivate account

diff --git a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap index 8ed1855cdc5..515126f1fe1 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = ` class="mx_SettingsSection" >

Keyboard

diff --git a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap index 209d6604e1c..32a8facee1d 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap @@ -5,7 +5,7 @@ exports[` renders settings marked as beta as beta cards 1 class="mx_SettingsSection" >

Upcoming features

diff --git a/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap index fc40fdd8309..25ed78b6e36 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[` renders correctly when user has no ignored u class="mx_SettingsSection" >

Ignored users

diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap index b38ea84d3a9..29c41ba181b 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap @@ -13,7 +13,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = ` class="mx_SettingsSection" >

Preferences

diff --git a/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap index 36a5be799ac..e675bfdd4dc 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[` renders security section 1`] = ` class="mx_SettingsSection" >

Encryption

@@ -315,7 +315,7 @@ exports[` renders security section 1`] = ` class="mx_SettingsSection" >

Advanced

diff --git a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap index 0c4eba7f425..328327afb33 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap @@ -12,7 +12,7 @@ exports[` renders sidebar settings 1`] = ` class="mx_SettingsSection" >

Sidebar

diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap index 7078e8f78f3..95c4ef83f5e 100644 --- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap +++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap @@ -18,7 +18,7 @@ exports[` looks as expected 1`] = ` class="mx_Dialog_header mx_Dialog_headerWithCancel" >

renders container 1`] = ` class="mx_SettingsSection" >

Visibility