Use semantic headings in user settings - profile (#10973)

* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

Author: Kerry

cypress/e2e/settings/general-user-settings-tab.spec.ts

@@ -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()

res/css/views/settings/_ProfileSettings.pcss

@@ -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 {
@@ -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 {

src/components/views/settings/ProfileSettings.tsx

@@ -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;
@@ -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"

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -136,7 +136,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             );
         }
         return (
-            <SettingsSubsection heading={<></>}>
+            <SettingsSubsection>
                 {toggle}
                 {advanced}
             </SettingsSubsection>

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

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

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

@@ -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"