Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix font & spaces in settings subsection #28631

Merged
merged 6 commits into from
Dec 4, 2024
Merged

Fix font & spaces in settings subsection #28631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3ac8d27
Fix settings header
florianduros Dec 4, 2024
75dd99b
Fix gap between subsection
florianduros Dec 4, 2024
9dc6eb2
Update tests
florianduros Dec 4, 2024
a60cd14
Update e2e tests
florianduros Dec 4, 2024
a7973a7
Merge branch 'develop' into florianduros/fix-heading-settings
florianduros Dec 4, 2024
147a10d
Update snapshots
florianduros Dec 4, 2024
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
Binary file modified ...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ettings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...earance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...arance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 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 @@ -13,7 +13,16 @@ Please see LICENSE files in the repository root for full details.
&.mx_SettingsSubsection_newUi {
display: flex;
flex-direction: column;
gap: var(--cpd-space-8x);
gap: var(--cpd-space-6x);
}

*[role="separator"] {
/**
* The gap between subsections is 32px and inside the subsection is 24px.
* The separator separates the subsections, so it should have the same gap as the subsections.
* We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
*/
margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/settings/shared/SettingsSubsection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
mx_SettingsSubsection_newUi: !legacy,
})}
>
{typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} legacy={legacy} /> : <>{heading}</>}
{typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
{!!description && (
<div className="mx_SettingsSubsection_description">
<SettingsSubsectionText>{description}</SettingsSubsectionText>
Expand Down
12 changes: 2 additions & 10 deletions src/components/views/settings/shared/SettingsSubsectionHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,13 @@ import Heading from "../../typography/Heading";

export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
heading: string;
legacy?: boolean;
children?: React.ReactNode;
}

export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({
heading,
legacy = true,
children,
...rest
}) => {
const size = legacy ? "4" : "3";

export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => {
return (
<div {...rest} className="mx_SettingsSubsectionHeading">
<Heading className="mx_SettingsSubsectionHeading_heading" size={size} as="h3">
<Heading className="mx_SettingsSubsectionHeading_heading" size="4" as="h3">
{heading}
</Heading>
{children}
Expand Down
2 changes: 1 addition & 1 deletion test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Message layout
</h3>
Expand Down
6 changes: 3 additions & 3 deletions test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
Expand Down Expand Up @@ -287,7 +287,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
Expand Down Expand Up @@ -564,7 +564,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
Expand Down
4 changes: 2 additions & 2 deletions ...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 @@ -23,7 +23,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Comment on lines 25 to 27
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate this classnaming, how does a h3 with class ..._h4 make any sense

Theme
</h3>
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Message layout
</h3>
Expand Down
Loading