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

Author: Germain

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;
 }
 

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,15 +71,17 @@ 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);
             }
         }
 
         .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;
         }
     }
 

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;

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;
 

src/components/views/dialogs/BaseDialog.tsx

@@ -174,8 +174,8 @@ export default class BaseDialog extends React.Component<IProps> {
                     >
                         {!!(this.props.title || headerImage) && (
                             <Heading
+                                size="3"
                                 as="h2"
-                                size="4"
                                 className={classNames("mx_Dialog_title", this.props.titleClass)}
                                 id="mx_BaseDialog_title"
                             >

src/components/views/rooms/RoomTileSubtitle.tsx

@@ -57,7 +57,7 @@ export const RoomTileSubtitle: React.FC<Props> = ({
             "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
         });
 
-        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_16" /> : null;
+        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_12" /> : null;
 
         return (
             <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>

src/components/views/settings/shared/SettingsSection.tsx

@@ -43,7 +43,13 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
     <div {...rest} className={classnames("mx_SettingsSection", className)}>
-        {typeof heading === "string" ? <Heading size="2">{heading}</Heading> : <>{heading}</>}
+        {typeof heading === "string" ? (
+            <Heading as="h2" size="3">
+                {heading}
+            </Heading>
+        ) : (
+            <>{heading}</>
+        )}
         <div className="mx_SettingsSection_subSections">{children}</div>
     </div>
 );

test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
     <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Leave room
@@ -89,7 +89,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
     <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Leave space

test/components/views/dialogs/UserSettingsDialog-test.tsx

@@ -75,7 +75,7 @@ describe("<UserSettingsDialog />", () => {
     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());

test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Changelog

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"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Developer Tools

test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
     <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Export Chat

test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
       class="mx_Dialog_header"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Feedback

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"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Verify session
@@ -133,7 +133,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Verify session

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -17,7 +17,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Message edits
@@ -133,7 +133,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Message edits

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Sign into your homeserver

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"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Starting backup…
@@ -77,7 +77,7 @@ exports[`CreateKeyBackupDialog should display the spinner when creating backup 1
       class="mx_Dialog_header"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Starting backup…
@@ -124,7 +124,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Success!

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"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         Import room keys

test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
       class="mx_SettingsSection"
     >
       <h2
-        class="mx_Heading_h2"
+        class="mx_Heading_h3"
       >
         Notifications
       </h2>
@@ -728,7 +728,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
       class="mx_SettingsSection"
     >
       <h2
-        class="mx_Heading_h2"
+        class="mx_Heading_h3"
       >
         Notifications
       </h2>

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"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Advanced
         </h2>

test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<BridgeSettingsTab /> renders when room is bridging messages 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Bridges
         </h2>
@@ -101,7 +101,7 @@ exports[`<BridgeSettingsTab /> renders when room is not bridging messages to any
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Bridges
         </h2>

test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap

@@ -122,7 +122,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
     <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Failed to update the join rules
@@ -164,7 +164,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
     class="mx_Dialog_header mx_Dialog_headerWithCancel"
   >
     <h2
-      class="mx_Heading_h4 mx_Dialog_title"
+      class="mx_Heading_h3 mx_Dialog_title"
       id="mx_BaseDialog_title"
     >
       Are you sure you want to make this encrypted room public?

test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -13,7 +13,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Customise your appearance
         </h2>

test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap

@@ -60,7 +60,7 @@ exports[`<GeneralUserSettingsTab /> deactive account should render section when
   class="mx_SettingsSection"
 >
   <h2
-    class="mx_Heading_h2"
+    class="mx_Heading_h3"
   >
     Deactivate account
   </h2>

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"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Keyboard
         </h2>

test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<LabsUserSettingsTab /> renders settings marked as beta as beta cards 1
   class="mx_SettingsSection"
 >
   <h2
-    class="mx_Heading_h2"
+    class="mx_Heading_h3"
   >
     Upcoming features
   </h2>

test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Ignored users
         </h2>

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -13,7 +13,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Preferences
         </h2>

test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Encryption
         </h2>
@@ -315,7 +315,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Advanced
         </h2>

test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
         class="mx_SettingsSection"
       >
         <h2
-          class="mx_Heading_h2"
+          class="mx_Heading_h3"
         >
           Sidebar
         </h2>

test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
       class="mx_Dialog_header mx_Dialog_headerWithCancel"
     >
       <h2
-        class="mx_Heading_h4 mx_Dialog_title"
+        class="mx_Heading_h3 mx_Dialog_title"
         id="mx_BaseDialog_title"
       >
         <div