Use semantic headings in space settings (#10751)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

Author: Kerry

Diff for: res/css/_components.pcss

@@ -341,7 +341,6 @@
 @import "./views/settings/_UpdateCheckButton.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";
 @import "./views/settings/tabs/_SettingsTab.pcss";
-@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.pcss";
 @import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
 @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";

Diff for: res/css/views/room_settings/_AliasSettings.pcss

@@ -27,20 +27,14 @@ limitations under the License.
     box-shadow: none;
 }
 
-.mx_AliasSettings {
-    summary {
-        cursor: pointer;
-        color: $accent;
-        font-weight: var(--font-semi-bold);
-        list-style: none;
-
-        /* list-style doesn't do it for webkit */
-        &::-webkit-details-marker {
-            display: none;
-        }
-    }
-
-    .mx_AliasSettings_localAliasHeader {
-        margin-top: 35px;
+.mx_AliasSettings_localAddresses {
+    cursor: pointer;
+    color: $accent;
+    font-weight: var(--font-semi-bold);
+    list-style: none;
+
+    /* list-style doesn't do it for webkit */
+    &::-webkit-details-marker {
+        display: none;
     }
 }

Diff for: res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 - 2021 The Matrix.org Foundation C.I.C.
+Copyright 2016 - 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -402,7 +402,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_AliasSettings">
+            <>
                 <SettingsFieldset
                     data-testid="published-address-fieldset"
                     legend={_t("Published Addresses")}
@@ -416,15 +416,6 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                         </>
                     }
                 >
-                    {/*
-                <span className='mx_SettingsTab_subheading'>{ _t("Published Addresses") }</span>
-                <p>
-                    { isSpaceRoom
-                        ? _t("Published addresses can be used by anyone on any server to join your space.")
-                        : _t("Published addresses can be used by anyone on any server to join your room.") }
-                    &nbsp;
-                    { _t("To publish an address, it needs to be set as a local address first.") }
-                </p> */}
                     {canonicalAliasSection}
                     {this.props.hidePublishSetting ? null : (
                         <RoomPublishSetting
@@ -472,11 +463,13 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     }
                 >
                     <details onToggle={this.onLocalAliasesToggled} open={this.state.detailsOpen}>
-                        <summary>{this.state.detailsOpen ? _t("Show less") : _t("Show more")}</summary>
+                        <summary className="mx_AliasSettings_localAddresses">
+                            {this.state.detailsOpen ? _t("Show less") : _t("Show more")}
+                        </summary>
                         {localAliasesList}
                     </details>
                 </SettingsFieldset>
-            </div>
+            </>
         );
     }
 }

Diff for: src/components/views/room_settings/AliasSettings.tsx

@@ -86,9 +86,7 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
         return (
             <SettingsTab>
                 <SettingsSection heading={_t("General")}>
-                    <div className="mx_SettingsTab_section mx_GeneralRoomSettingsTab_profileSection">
-                        <RoomProfileSettings roomId={room.roomId} />
-                    </div>
+                    <RoomProfileSettings roomId={room.roomId} />
                 </SettingsSection>
 
                 <SettingsSection heading={_t("Room Addresses")}>

Diff for: src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx

@@ -27,6 +27,9 @@ import { avatarUrlForRoom } from "../../../Avatar";
 import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
 import { leaveSpace } from "../../../utils/leave-behaviour";
 import { getTopic } from "../../../hooks/room/useTopic";
+import SettingsTab from "../settings/tabs/SettingsTab";
+import { SettingsSection } from "../settings/shared/SettingsSection";
+import SettingsSubsection from "../settings/shared/SettingsSubsection";
 
 interface IProps {
     matrixClient: MatrixClient;
@@ -94,50 +97,49 @@ const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space })
     };
 
     return (
-        <div className="mx_SettingsTab">
-            <div className="mx_SettingsTab_heading">{_t("General")}</div>
-
-            <div>{_t("Edit settings relating to your space.")}</div>
-
-            {error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
-
-            <div className="mx_SettingsTab_section">
-                <SpaceBasicSettings
-                    avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
-                    avatarDisabled={busy || !canSetAvatar}
-                    setAvatar={setNewAvatar}
-                    name={name}
-                    nameDisabled={busy || !canSetName}
-                    setName={setName}
-                    topic={topic}
-                    topicDisabled={busy || !canSetTopic}
-                    setTopic={setTopic}
-                />
-
-                <AccessibleButton
-                    onClick={onCancel}
-                    disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
-                    kind="link"
-                >
-                    {_t("Cancel")}
-                </AccessibleButton>
-                <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
-                    {busy ? _t("Saving…") : _t("Save Changes")}
-                </AccessibleButton>
-            </div>
-
-            <span className="mx_SettingsTab_subheading">{_t("Leave Space")}</span>
-            <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
-                <AccessibleButton
-                    kind="danger"
-                    onClick={() => {
-                        leaveSpace(space);
-                    }}
-                >
-                    {_t("Leave Space")}
-                </AccessibleButton>
-            </div>
-        </div>
+        <SettingsTab>
+            <SettingsSection heading={_t("General")}>
+                <div>
+                    <div>{_t("Edit settings relating to your space.")}</div>
+
+                    {error && <div className="mx_SpaceRoomView_errorText">{error}</div>}
+
+                    <SpaceBasicSettings
+                        avatarUrl={avatarUrlForRoom(space, 80, 80, "crop") ?? undefined}
+                        avatarDisabled={busy || !canSetAvatar}
+                        setAvatar={setNewAvatar}
+                        name={name}
+                        nameDisabled={busy || !canSetName}
+                        setName={setName}
+                        topic={topic}
+                        topicDisabled={busy || !canSetTopic}
+                        setTopic={setTopic}
+                    />
+
+                    <AccessibleButton
+                        onClick={onCancel}
+                        disabled={busy || !(avatarChanged || nameChanged || topicChanged)}
+                        kind="link"
+                    >
+                        {_t("Cancel")}
+                    </AccessibleButton>
+                    <AccessibleButton onClick={onSave} disabled={busy} kind="primary">
+                        {busy ? _t("Saving…") : _t("Save Changes")}
+                    </AccessibleButton>
+                </div>
+
+                <SettingsSubsection heading={_t("Leave Space")}>
+                    <AccessibleButton
+                        kind="danger"
+                        onClick={() => {
+                            leaveSpace(space);
+                        }}
+                    >
+                        {_t("Leave Space")}
+                    </AccessibleButton>
+                </SettingsSubsection>
+            </SettingsSection>
+        </SettingsTab>
     );
 };
 

Diff for: src/components/views/spaces/SpaceSettingsGeneralTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -30,6 +30,8 @@ import JoinRuleSettings from "../settings/JoinRuleSettings";
 import { useRoomState } from "../../../hooks/useRoomState";
 import SettingsFieldset from "../settings/SettingsFieldset";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
+import { SettingsSection } from "../settings/shared/SettingsSection";
+import SettingsTab from "../settings/tabs/SettingsTab";
 
 interface IProps {
     matrixClient: MatrixClient;
@@ -124,59 +126,60 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
     let addressesSection: JSX.Element | undefined;
     if (space.getJoinRule() === JoinRule.Public) {
         addressesSection = (
-            <>
-                <span className="mx_SettingsTab_subheading">{_t("Address")}</span>
+            <SettingsSection heading={_t("Address")}>
                 <AliasSettings
                     roomId={space.roomId}
                     canSetCanonicalAlias={canSetCanonical}
                     canSetAliases={true}
                     canonicalAliasEvent={canonicalAliasEv ?? undefined}
                     hidePublishSetting={!serverSupportsExploringSpaces}
                 />
-            </>
+            </SettingsSection>
         );
     }
 
     return (
-        <div className="mx_SettingsTab">
-            <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
-
-            {error && (
-                <div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
-                    {error}
-                </div>
-            )}
-
-            <SettingsFieldset
-                data-testid="access-fieldset"
-                legend={_t("Access")}
-                description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
-            >
-                <JoinRuleSettings
-                    room={space}
-                    onError={(): void => setError(_t("Failed to update the visibility of this space"))}
-                    closeSettingsFn={closeSettingsFn}
-                />
-                {advancedSection}
-                <div className="mx_SettingsTab_toggleWithDescription">
-                    <LabelledToggleSwitch
-                        value={historyVisibility === HistoryVisibility.WorldReadable}
-                        onChange={(checked: boolean): void => {
-                            setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
-                        }}
-                        disabled={!canSetHistoryVisibility}
-                        label={_t("Preview Space")}
+        <SettingsTab>
+            <SettingsSection heading={_t("Visibility")}>
+                {error && (
+                    <div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
+                        {error}
+                    </div>
+                )}
+
+                <SettingsFieldset
+                    data-testid="access-fieldset"
+                    legend={_t("Access")}
+                    description={_t("Decide who can view and join %(spaceName)s.", { spaceName: space.name })}
+                >
+                    <JoinRuleSettings
+                        room={space}
+                        onError={(): void => setError(_t("Failed to update the visibility of this space"))}
+                        closeSettingsFn={closeSettingsFn}
                     />
-                    <p>
-                        {_t("Allow people to preview your space before they join.")}
-                        <br />
-                        <b>{_t("Recommended for public spaces.")}</b>
-                    </p>
-                </div>
-            </SettingsFieldset>
-
-            {addressesSection}
-        </div>
+                    {advancedSection}
+                    <div className="mx_SettingsTab_toggleWithDescription">
+                        <LabelledToggleSwitch
+                            value={historyVisibility === HistoryVisibility.WorldReadable}
+                            onChange={(checked: boolean): void => {
+                                setHistoryVisibility(
+                                    checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
+                                );
+                            }}
+                            disabled={!canSetHistoryVisibility}
+                            label={_t("Preview Space")}
+                        />
+                        <p>
+                            {_t("Allow people to preview your space before they join.")}
+                            <br />
+                            <b>{_t("Recommended for public spaces.")}</b>
+                        </p>
+                    </div>
+                </SettingsFieldset>
+
+                {addressesSection}
+            </SettingsSection>
+        </SettingsTab>
     );
 };