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

Compound Typography pass regression fixes #11189

Merged
merged 4 commits into from
Jul 4, 2023
Merged

Compound Typography pass regression fixes #11189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ebc5be2
Compound Typography pass regression fixes
Jul 4, 2023
2122678
updates to the room list sizing
Jul 4, 2023
96776c6
fix subtitle clipping
Jul 4, 2023
134ad74
revert display name to use medium variant
Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/components/views/settings/shared/_SettingsSubsection.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ limitations under the License.
.mx_SettingsSubsection_text {
width: 100%;
box-sizing: inherit;
font-size: $font-15px;
color: $secondary-content;
}

Expand Down
10 changes: 6 additions & 4 deletions res/css/views/rooms/_RoomTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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;
}
}

Expand Down
1 change: 0 additions & 1 deletion res/css/views/settings/_NotificationSettings2.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/settings/tabs/_SettingsSection.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/dialogs/BaseDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/RoomTileSubtitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
8 changes: 7 additions & 1 deletion src/components/views/settings/shared/SettingsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
4 changes: 2 additions & 2 deletions test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/UserSettingsDialog-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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…
Expand Down Expand Up @@ -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…
Expand Down Expand Up @@ -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!
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -728,7 +728,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
class="mx_Heading_h3"
>
Notifications
</h2>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/settings/tabs/room/__snapshots__/BridgeSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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?
Expand Down
2 changes: 1 addition & 1 deletion ...components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/user/__snapshots__/KeyboardUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/user/__snapshots__/MjolnirUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
class="mx_Heading_h3"
>
Preferences
</h2>
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
class="mx_Heading_h3"
>
Encryption
</h2>
Expand Down Expand Up @@ -315,7 +315,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
class="mx_Heading_h3"
>
Advanced
</h2>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings 1`] = `
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
class="mx_Heading_h3"
>
Sidebar
</h2>
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading