From 603e2f8ae025722dd4483cc0a947c149813b7974 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Fri, 5 May 2023 08:38:24 +1200 Subject: [PATCH 1/5] allow testids in settings sections --- .../settings/shared/_SettingsSubsection.pcss | 4 ++++ res/css/views/elements/_SettingsFlag.pcss | 1 + res/css/views/settings/tabs/_SettingsTab.pcss | 1 - .../settings/shared/SettingsSubsection.tsx | 19 +++++++++++++++++-- .../views/settings/tabs/SettingsTab.tsx | 8 ++++---- 5 files changed, 26 insertions(+), 7 deletions(-) diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index e90585122b5..9ab33c93536 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -46,4 +46,8 @@ limitations under the License. margin-bottom: $spacing-8; } } + + &.mx_SettingsSubsection_contentStretch { + justify-items: stretch; + } } diff --git a/res/css/views/elements/_SettingsFlag.pcss b/res/css/views/elements/_SettingsFlag.pcss index b3908a158ad..16be54ef3c9 100644 --- a/res/css/views/elements/_SettingsFlag.pcss +++ b/res/css/views/elements/_SettingsFlag.pcss @@ -20,6 +20,7 @@ limitations under the License. align-items: flex-start; justify-content: space-between; margin-bottom: 4px; + width: 100%; .mx_ToggleSwitch { flex: 0 0 auto; diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index fac189e8587..b060a025418 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_SettingsTab { - --SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 8fcdf327a9a..6c60de1296f 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import classNames from "classnames"; import React, { HTMLAttributes } from "react"; import { SettingsSubsectionHeading } from "./SettingsSubsectionHeading"; @@ -22,6 +23,8 @@ export interface SettingsSubsectionProps extends HTMLAttributes heading: string | React.ReactNode; description?: string | React.ReactNode; children?: React.ReactNode; + // when true content will be justify-items: stretch + stretchContent?: boolean; } export const SettingsSubsectionText: React.FC> = ({ children, ...rest }) => ( @@ -30,7 +33,13 @@ export const SettingsSubsectionText: React.FC> = ); -export const SettingsSubsection: React.FC = ({ heading, description, children, ...rest }) => ( +export const SettingsSubsection: React.FC = ({ + heading, + description, + children, + stretchContent, + ...rest +}) => (
{typeof heading === "string" ? : <>{heading}} {!!description && ( @@ -38,7 +47,13 @@ export const SettingsSubsection: React.FC = ({ heading, {description}
)} -
{children}
+
+ {children} +
); diff --git a/src/components/views/settings/tabs/SettingsTab.tsx b/src/components/views/settings/tabs/SettingsTab.tsx index e9f25ec7406..7ecd4d3c5af 100644 --- a/src/components/views/settings/tabs/SettingsTab.tsx +++ b/src/components/views/settings/tabs/SettingsTab.tsx @@ -13,9 +13,9 @@ 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. */ -import React from "react"; +import React, { HTMLAttributes } from "react"; -export interface SettingsTabProps { +export interface SettingsTabProps extends Omit, "className"> { children?: React.ReactNode; } @@ -37,8 +37,8 @@ export interface SettingsTabProps { * * ``` */ -const SettingsTab: React.FC = ({ children }) => ( -
+const SettingsTab: React.FC = ({ children, ...rest }) => ( +
{children}
); From dd5560545dfe83c95ab54e8b5492dbcfa99ce47c Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Fri, 5 May 2023 08:43:04 +1200 Subject: [PATCH 2/5] use semantic headings in LabsUserSettingsTab --- res/css/_components.pcss | 1 - res/css/views/beta/_BetaCard.pcss | 5 - .../tabs/user/_LabsUserSettingsTab.pcss | 27 --- .../tabs/user/LabsUserSettingsTab.tsx | 51 ++--- .../tabs/user/LabsUserSettingsTab-test.tsx | 17 +- .../LabsUserSettingsTab-test.tsx.snap | 187 ++++++++++-------- 6 files changed, 138 insertions(+), 150 deletions(-) delete mode 100644 res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3a70f71c930..538556a9149 100644 --- a/res/css/_components.pcss +++ b/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 --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 591fff2d954..62f7d7b93a7 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/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 --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss deleted file mode 100644 index f10b681668c..00000000000 --- a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss +++ /dev/null @@ -1,27 +0,0 @@ -/* -Copyright 2021 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. -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_LabsUserSettingsTab { - .mx_SettingsTab_subsectionText, - .mx_SettingsTab_section { - margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs); - } - - .mx_SettingsFlag { - margin-right: 0; /* remove right margin to align with beta cards */ - align-items: center; - } -} diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx index f505ebb76f9..da6f614780f 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx @@ -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 = ( -
+ <> {this.betas.map((f) => ( ))} -
+ ); } @@ -93,31 +96,35 @@ export default class LabsUserSettingsTab extends React.Component<{}> { labsSections = ( <> {sortBy(Array.from(groups.entries()), "0").map(([group, flags]) => ( -
- {_t(labGroupNames[group])} + {flags} -
+ ))} ); } return ( -
-
{_t("Upcoming features")}
-
- {_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") }, - )} -
- {betaSection} + + + + {_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") }, + )} + + {betaSection} + + {labsSections && ( - <> -
{_t("Early previews")}
-
+ + {_t( "Feeling experimental? " + "Try out our latest ideas in development. " + @@ -139,11 +146,11 @@ export default class LabsUserSettingsTab extends React.Component<{}> { }, }, )} -
+ {labsSections} - + )} -
+ ); } } diff --git a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx index ddf6105274c..4933deda6d2 100644 --- a/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/user/LabsUserSettingsTab-test.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,17 +51,16 @@ describe("", () => { }); 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", () => { @@ -69,8 +68,10 @@ describe("", () => { 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 () => { diff --git a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap index 2d562b8c32f..8d7d5628095 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/LabsUserSettingsTab-test.tsx.snap @@ -2,121 +2,134 @@ exports[` renders settings marked as beta as beta cards 1`] = `
+

+ Upcoming features +

+ What's next for false? Labs are the best way to get things early, test out new features and help shape them before they actually launch. +
+
-

- - Video rooms - - - Beta - -

-

- A new way to chat over voice and video in . -

-

- Video rooms are always-on VoIP channels embedded within a room in . -

-
-
+

+ + Video rooms + + + Beta + +

- Join the beta +

+ A new way to chat over voice and video in . +

+

+ Video rooms are always-on VoIP channels embedded within a room in . +

+
+
+ Join the beta +
+
+
+ Joining the beta will reload . +
+
- Joining the beta will reload . +
-
-
-
-
-
-
-

- - New session manager - - - Beta - -

-

- Have greater visibility and control over all your sessions. -

-

- Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications. -

-
-
+

+ + New session manager + + + Beta + +

- Join the beta +

+ Have greater visibility and control over all your sessions. +

+

+ Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications. +

+
+
+
+ Join the beta +
-
-
- +
+ +
From e0f0dcf60db9141ec121c3acc604f59f4cc01f74 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 8 May 2023 08:49:03 +1200 Subject: [PATCH 3/5] put back margin var --- res/css/views/settings/tabs/_SettingsTab.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index b060a025418..fac189e8587 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -15,6 +15,7 @@ limitations under the License. */ .mx_SettingsTab { + --SettingsTab_section-margin-bottom-preferences-labs: 30px; --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ --SettingsTab_fullWidthField-margin-inline-end: 100px; --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ From a7c2b4a8a0efb75e645ffa4e7a8390ea358890eb Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 11 May 2023 09:29:28 +1200 Subject: [PATCH 4/5] explicit cast to boolean --- src/components/views/settings/shared/SettingsSubsection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 6c60de1296f..01cab4d87d6 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -49,7 +49,7 @@ export const SettingsSubsection: React.FC = ({ )}
{children} From 071d970c93805ec27a9c24d8ee6a152f7d890545 Mon Sep 17 00:00:00 2001 From: Kerry Date: Fri, 12 May 2023 10:32:33 +1200 Subject: [PATCH 5/5] Update src/components/views/settings/shared/SettingsSubsection.tsx Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- src/components/views/settings/shared/SettingsSubsection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/shared/SettingsSubsection.tsx b/src/components/views/settings/shared/SettingsSubsection.tsx index 01cab4d87d6..eaf534cab0d 100644 --- a/src/components/views/settings/shared/SettingsSubsection.tsx +++ b/src/components/views/settings/shared/SettingsSubsection.tsx @@ -23,7 +23,7 @@ export interface SettingsSubsectionProps extends HTMLAttributes heading: string | React.ReactNode; description?: string | React.ReactNode; children?: React.ReactNode; - // when true content will be justify-items: stretch + // when true content will be justify-items: stretch, which will make items within the section stretch to full width. stretchContent?: boolean; }