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

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

res/css/views/room_settings/_AliasSettings.pcss

@@ -27,8 +27,7 @@ limitations under the License.
     box-shadow: none;
 }
 
-.mx_AliasSettings {
+.mx_AliasSettings_localAddresses {
-    summary {
     cursor: pointer;
     color: $accent;
     font-weight: var(--font-semi-bold);
@@ -38,9 +37,4 @@ limitations under the License.
     &::-webkit-details-marker {
         display: none;
     }
-    }
-
-    .mx_AliasSettings_localAliasHeader {
-        margin-top: 35px;
-    }
 }

res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss

@@ -1,19 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_GeneralRoomSettingsTab_profileSection {
-    margin-top: 10px;
-}

src/components/views/room_settings/AliasSettings.tsx

@@ -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>
+            </>
         );
     }
 }

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.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>
                 </SettingsSection>
 
                 <SettingsSection heading={_t("Room Addresses")}>

src/components/views/spaces/SpaceSettingsGeneralTab.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,14 +97,13 @@ const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space })
     };
 
     return (
-        <div className="mx_SettingsTab">
+        <SettingsTab>
-            <div className="mx_SettingsTab_heading">{_t("General")}</div>
+            <SettingsSection 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}
@@ -126,8 +128,7 @@ const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space })
                     </AccessibleButton>
                 </div>
 
-            <span className="mx_SettingsTab_subheading">{_t("Leave Space")}</span>
+                <SettingsSubsection heading={_t("Leave Space")}>
-            <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
                     <AccessibleButton
                         kind="danger"
                         onClick={() => {
@@ -136,8 +137,9 @@ const SpaceSettingsGeneralTab: React.FC<IProps> = ({ matrixClient: cli, space })
                     >
                         {_t("Leave Space")}
                     </AccessibleButton>
-            </div>
+                </SettingsSubsection>
-        </div>
+            </SettingsSection>
+        </SettingsTab>
     );
 };
 

src/components/views/spaces/SpaceSettingsVisibilityTab.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,8 +126,7 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
     let addressesSection: JSX.Element | undefined;
     if (space.getJoinRule() === JoinRule.Public) {
         addressesSection = (
-            <>
+            <SettingsSection heading={_t("Address")}>
-                <span className="mx_SettingsTab_subheading">{_t("Address")}</span>
                 <AliasSettings
                     roomId={space.roomId}
                     canSetCanonicalAlias={canSetCanonical}
@@ -133,14 +134,13 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                     canonicalAliasEvent={canonicalAliasEv ?? undefined}
                     hidePublishSetting={!serverSupportsExploringSpaces}
                 />
-            </>
+            </SettingsSection>
         );
     }
 
     return (
-        <div className="mx_SettingsTab">
+        <SettingsTab>
-            <div className="mx_SettingsTab_heading">{_t("Visibility")}</div>
+            <SettingsSection heading={_t("Visibility")}>
-
                 {error && (
                     <div data-testid="space-settings-error" className="mx_SpaceRoomView_errorText">
                         {error}
@@ -162,7 +162,9 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                         <LabelledToggleSwitch
                             value={historyVisibility === HistoryVisibility.WorldReadable}
                             onChange={(checked: boolean): void => {
-                            setHistoryVisibility(checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared);
+                                setHistoryVisibility(
+                                    checked ? HistoryVisibility.WorldReadable : HistoryVisibility.Shared,
+                                );
                             }}
                             disabled={!canSetHistoryVisibility}
                             label={_t("Preview Space")}
@@ -176,7 +178,8 @@ const SpaceSettingsVisibilityTab: React.FC<IProps> = ({ matrixClient: cli, space
                 </SettingsFieldset>
 
                 {addressesSection}
-        </div>
+            </SettingsSection>
+        </SettingsTab>
     );
 };
 

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -21,10 +21,19 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
     class="mx_SettingsTab"
   >
     <div
-      class="mx_SettingsTab_heading"
+      class="mx_SettingsTab_sections"
+    >
+      <div
+        class="mx_SettingsSection"
+      >
+        <h2
+          class="mx_Heading_h2"
         >
           Visibility
-    </div>
+        </h2>
+        <div
+          class="mx_SettingsSection_subSections"
+        >
           <fieldset
             class="mx_SettingsFieldset"
             data-testid="access-fieldset"
@@ -134,5 +143,8 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
             </div>
           </fieldset>
         </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;