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

Use semantic headings in user settings - profile #10973

Merged
merged 10 commits into from
May 29, 2023
Merged

Use semantic headings in user settings - profile #10973

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0c1b0a4
account password section
May 23, 2023
aea0711
Merge branch 'develop' into kerry/24922/user-settings-headings-account
May 24, 2023
fb3e965
account email and phone numbers
May 24, 2023
c594adb
update cypress selectors
May 24, 2023
f5bcf63
use settingsection for General section
May 24, 2023
3546013
use semantic headings for profile settings
May 24, 2023
4189dd2
Merge branch 'develop' into kerry/24922/user-settings-headings-profile
May 26, 2023
92df4b4
fix show advanced spacing
May 28, 2023
96e18e9
Merge branch 'develop' into kerry/24922/user-settings-headings-profile
May 29, 2023
e7e00d6
udpate snapshot
May 29, 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
2 changes: 1 addition & 1 deletion cypress/e2e/settings/general-user-settings-tab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe("General user settings tab", () => {

cy.findByTestId("mx_GeneralUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("general").should("have.text", "General").should("be.visible");
cy.findByText("General").should("be.visible");

cy.get(".mx_ProfileSettings_profile")
.scrollIntoView()
Expand Down
5 changes: 2 additions & 3 deletions res/css/views/settings/_ProfileSettings.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ limitations under the License.
*/

.mx_ProfileSettings {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
border-bottom: 1px solid $quinary-content;

.mx_ProfileSettings_avatarUpload {
Expand All @@ -29,8 +28,8 @@ limitations under the License.
flex-grow: 1;
margin-inline-end: 54px;

.mx_Field:first-child {
margin-top: 0;
.mx_Field {
margin-top: $spacing-8;
}

.mx_ProfileSettings_profile_controls_topic {
Expand Down
3 changes: 2 additions & 1 deletion src/components/views/settings/ProfileSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import AvatarSetting from "./AvatarSetting";
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import PosthogTrackers from "../../../PosthogTrackers";
import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";

interface IState {
originalDisplayName: string;
Expand Down Expand Up @@ -183,7 +184,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
/>
<div className="mx_ProfileSettings_profile">
<div className="mx_ProfileSettings_profile_controls">
<span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
<SettingsSubsectionHeading heading={_t("Profile")} />
<Field
label={_t("Display Name")}
type="text"
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
);
}
return (
<SettingsSubsection heading={<></>}>
<SettingsSubsection>
{toggle}
{advanced}
</SettingsSubsection>
Expand Down
21 changes: 6 additions & 15 deletions src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,14 +320,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
});
};

private renderProfileSection(): JSX.Element {
return (
<div className="mx_SettingsTab_section">
<ProfileSettings />
</div>
);
}

private renderAccountSection(): JSX.Element {
let threepidSection: ReactNode = null;

Expand Down Expand Up @@ -558,13 +550,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta

return (
<SettingsTab data-testid="mx_GeneralUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="general">
{_t("General")}
</div>
{this.renderProfileSection()}
{this.renderAccountSection()}
{this.renderLanguageSection()}
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
<SettingsSection heading={_t("General")}>
<ProfileSettings />
{this.renderAccountSection()}
{this.renderLanguageSection()}
{supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
</SettingsSection>
{discoverySection}
{this.renderIntegrationManagerSection()}
{accountManagementSection}
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 @@ -345,7 +345,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsection_content"
class="mx_SettingsSubsection_content mx_SettingsSubsection_noHeading"
>
<div
aria-expanded="false"
Expand Down