use semantic headings in LabsUserSettingsTab

Author: Kerry Archibald

Diff for: res/css/_components.pcss

@@ -344,7 +344,6 @@
 @import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
-@import "./views/settings/tabs/user/_LabsUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";

Diff for: res/css/views/beta/_BetaCard.pcss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_BetaCard {
-    margin-bottom: $spacing-20;
     padding: $spacing-24;
     background-color: $system;
     border-radius: 8px;
@@ -114,10 +113,6 @@ limitations under the License.
             }
         }
     }
-
-    &:last-child {
-        margin-bottom: 0;
-    }
 }
 
 .mx_BetaCard_betaPill {

Diff for: res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss

@@ -25,6 +25,9 @@ import BetaCard from "../../../beta/BetaCard";
 import SettingsFlag from "../../../elements/SettingsFlag";
 import { LabGroup, labGroupNames } from "../../../../../settings/Settings";
 import { EnhancedMap } from "../../../../../utils/maps";
+import { SettingsSection } from "../../shared/SettingsSection";
+import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
+import SettingsTab from "../SettingsTab";
 
 export default class LabsUserSettingsTab extends React.Component<{}> {
     private readonly labs: string[];
@@ -54,11 +57,11 @@ export default class LabsUserSettingsTab extends React.Component<{}> {
         let betaSection: JSX.Element | undefined;
         if (this.betas.length) {
             betaSection = (
-                <div data-testid="labs-beta-section" className="mx_SettingsTab_section">
+                <>
                     {this.betas.map((f) => (
                         <BetaCard key={f} featureId={f} />
                     ))}
-                </div>
+                </>
             );
         }
 
@@ -93,31 +96,35 @@ export default class LabsUserSettingsTab extends React.Component<{}> {
             labsSections = (
                 <>
                     {sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => (
-                        <div className="mx_SettingsTab_section" key={group} data-testid={`labs-group-${group}`}>
-                            <span className="mx_SettingsTab_subheading">{_t(labGroupNames[group])}</span>
+                        <SettingsSubsection
+                            key={group}
+                            data-testid={`labs-group-${group}`}
+                            heading={_t(labGroupNames[group])}
+                        >
                             {flags}
-                        </div>
+                        </SettingsSubsection>
                     ))}
                 </>
             );
         }
 
         return (
-            <div className="mx_SettingsTab mx_LabsUserSettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Upcoming features")}</div>
-                <div className="mx_SettingsTab_subsectionText">
-                    {_t(
-                        "What's next for %(brand)s? " +
-                            "Labs are the best way to get things early, " +
-                            "test out new features and help shape them before they actually launch.",
-                        { brand: SdkConfig.get("brand") },
-                    )}
-                </div>
-                {betaSection}
+            <SettingsTab>
+                <SettingsSection heading={_t("Upcoming features")}>
+                    <SettingsSubsectionText>
+                        {_t(
+                            "What's next for %(brand)s? " +
+                                "Labs are the best way to get things early, " +
+                                "test out new features and help shape them before they actually launch.",
+                            { brand: SdkConfig.get("brand") },
+                        )}
+                    </SettingsSubsectionText>
+                    {betaSection}
+                </SettingsSection>
+
                 {labsSections && (
-                    <>
-                        <div className="mx_SettingsTab_heading">{_t("Early previews")}</div>
-                        <div className="mx_SettingsTab_subsectionText">
+                    <SettingsSection heading={_t("Early previews")}>
+                        <SettingsSubsectionText>
                             {_t(
                                 "Feeling experimental? " +
                                     "Try out our latest ideas in development. " +
@@ -139,11 +146,11 @@ export default class LabsUserSettingsTab extends React.Component<{}> {
                                     },
                                 },
                             )}
-                        </div>
+                        </SettingsSubsectionText>
                         {labsSections}
-                    </>
+                    </SettingsSection>
                 )}
-            </div>
+            </SettingsTab>
         );
     }
 }

Diff for: src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { defer } from "matrix-js-sdk/src/utils";
 
 import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
@@ -51,26 +51,27 @@ describe("<LabsUserSettingsTab />", () => {
     });
 
     it("renders settings marked as beta as beta cards", () => {
-        const { getByTestId } = render(getComponent());
-        expect(getByTestId("labs-beta-section")).toMatchSnapshot();
+        render(getComponent());
+        expect(screen.getByText("Upcoming features").parentElement!).toMatchSnapshot();
     });
 
     it("does not render non-beta labs settings when disabled in config", () => {
-        const { container } = render(getComponent());
+        render(getComponent());
         expect(sdkConfigSpy).toHaveBeenCalledWith("show_labs_settings");
 
-        const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
         // only section is beta section
-        expect(labsSections.length).toEqual(1);
+        expect(screen.queryByText("Early previews")).not.toBeInTheDocument();
     });
 
     it("renders non-beta labs settings when enabled in config", () => {
         // enable labs
         sdkConfigSpy.mockImplementation((configName) => configName === "show_labs_settings");
         const { container } = render(getComponent());
 
-        const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
-        expect(labsSections).toHaveLength(12);
+        // non-beta labs section
+        expect(screen.getByText("Early previews")).toBeInTheDocument();
+        const labsSections = container.getElementsByClassName("mx_SettingsSubsection");
+        expect(labsSections).toHaveLength(11);
     });
 
     it("allow setting a labs flag which requires unstable support once support is confirmed", async () => {