imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic headings in user settings Appearance (#10827)

Browse source 
* 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

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
This commit is contained in:
Kerry 2023-05-22 09:12:11 +12:00 • committed by GitHub
parent e652177706
commit b3b03e5dcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 765 additions and 770 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/audio-player/audio-player.spec.ts
View file

@ -176,7 +176,7 @@ describe("Audio player", () => {
// Enable high contrast manually
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero

45
cypress/e2e/settings/appearance-user-settings-tab.spec.ts
View file

@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => {
it("should be rendered properly", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
// Assert that the top heading is rendered
cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get("h2").should("have.text", "Customise your appearance").should("be.visible");
});
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options collapsed)",
{
// Emulate TabbedView's actual min and max widths
@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => {
// Assert that "Hide advanced" link button is rendered
cy.findByRole("button", { name: "Hide advanced" }).should("exist");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
"User settings tab - Appearance (advanced options expanded)",
{
// Emulate TabbedView's actual min and max widths
@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Assert that the layout selected by default is "Modern"
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
cy.findByLabelText("Modern").should("exist");
@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to group (modern) layout
cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => {
// Assert that the room layout is set to IRC layout
cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the last layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => {
it("should support changing font size by clicking the font slider", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
cy.findByLabelText("Font size").should("exist");
});
@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => {
it("should disable font size slider when custom font size is used", () => {
cy.openUserSettings("Appearance");
cy.get(".mx_FontScalingPanel").within(() => {
cy.findByTestId("mx_FontScalingPanel").within(() => {
cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
// Assert that the font slider is disabled
@ -167,10 +166,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
});
// Assert that the room layout is set to compact group (modern) layout
cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
@ -178,13 +175,7 @@ describe("Appearance user settings tab", () => {
it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
const checkDisabled = () => {
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
cy.get(".mx_Checkbox")
.first()
.within(() => {
cy.get("input[type='checkbox'][disabled]").should("exist");
});
});
cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
};
cy.openUserSettings("Appearance");
@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => {
cy.findByRole("button", { name: "Show advanced" }).click();
// Enable IRC layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => {
checkDisabled();
// Enable bubble layout
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
// Select the first layout
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => {
// Click "Show advanced" link button
cy.findByRole("button", { name: "Show advanced" }).click();
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
// force click as checkbox size is zero
cy.findByLabelText("Use a system font").click({ force: true });
});
// Assert that the font-family value was removed
cy.get("body").should("have.css", "font-family", '""');
@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => {
it("should be rendered with the light theme selected", () => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.within(() => {
cy.findByTestId("checkbox-use-system-theme").within(() => {
cy.findByText("Match system theme").should("be.visible");
@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => {
cy.get(".mx_Checkbox_checkmark").should("not.be.visible");
});
cy.get(".mx_ThemeSelectors").within(() => {
cy.findByTestId("theme-choice-panel-selectors").within(() => {
cy.get(".mx_ThemeSelector_light").should("exist");
cy.get(".mx_ThemeSelector_dark").should("exist");
@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => {
"the system theme is clicked",
() => {
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Match system theme")
.click({ force: true }); // force click because the size of the checkbox is zero
cy.get(".mx_ThemeChoicePanel").within(() => {
cy.findByTestId("mx_ThemeChoicePanel").within(() => {
// Assert that the labels for the light theme and dark theme are disabled
cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist");
cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist");
@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => {
});
cy.openUserSettings("Appearance")
.get(".mx_ThemeChoicePanel")
.findByTestId("mx_ThemeChoicePanel")
.findByLabelText("Use high contrast")
.click({ force: true }); // force click because the size of the checkbox is zero

1
res/css/_components.pcss
View file

@ -179,7 +179,6 @@
@import "./views/elements/_Dropdown.pcss";
@import "./views/elements/_EditableItemList.pcss";
@import "./views/elements/_ErrorBoundary.pcss";
@import "./views/elements/_EventTilePreview.pcss";
@import "./views/elements/_ExternalLink.pcss";
@import "./views/elements/_FacePile.pcss";
@import "./views/elements/_Field.pcss";

21
res/css/views/elements/_EventTilePreview.pcss
View file

@ -1,21 +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_FontScalingPanel {
.mx_FontScalingPanel_preview.mx_EventTilePreview_loader {
padding: var(--FontScalingPanel_preview-padding-block) 0;
}
}

21
res/css/views/settings/_FontScalingPanel.pcss
View file

@ -14,15 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_FontScalingPanel {
color: $primary-content;
.mx_FontScalingPanel_preview,
.mx_FontScalingPanel_fontSlider {
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
}
.mx_FontScalingPanel_preview {
.mx_FontScalingPanel_preview {
--FontScalingPanel_preview-padding-block: 9px;
border: 1px solid $quinary-content;
@ -42,17 +34,15 @@ limitations under the License.
.mx_EventTile_msgOption {
display: none;
}
}
}
.mx_FontScalingPanel_fontSlider {
.mx_FontScalingPanel_fontSlider {
display: flex;
align-items: center;
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
background: rgba($quinary-content, 0.2);
border-radius: 10px;
font-size: $font-10px;
margin-top: $spacing-24;
margin-bottom: $spacing-24;
.mx_FontScalingPanel_fontSlider_smallText,
.mx_FontScalingPanel_fontSlider_largeText {
@ -68,9 +58,4 @@ limitations under the License.
font-size: $font-18px;
padding-inline-start: $spacing-20;
}
}
.mx_FontScalingPanel_customFontSizeField {
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
}
}

9
res/css/views/settings/_ImageSizePanel.pcss
View file

@ -14,12 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ImageSizePanel {
color: $primary-content;
.mx_ImageSizePanel_radios {
.mx_ImageSizePanel_radios {
display: flex;
margin-top: 16px; /* move away from header a bit */
flex-direction: row;
gap: $spacing-16;
> label {
margin-right: 68px; /* keep the boxes separate */
@ -43,5 +41,4 @@ limitations under the License.
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
}
}
}
}

6
res/css/views/settings/_LayoutSwitcher.pcss
View file

@ -15,8 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LayoutSwitcher {
.mx_LayoutSwitcher_RadioButtons {
.mx_LayoutSwitcher_RadioButtons {
display: flex;
flex-direction: row;
gap: 24px;
@ -29,7 +28,7 @@ limitations under the License.
display: flex;
flex-direction: column;
width: 300px;
flex-basis: 33%;
min-width: 0;
border: 1px solid $quinary-content;
@ -89,5 +88,4 @@ limitations under the License.
max-width: 90%;
}
}
}
}

8
res/css/views/settings/_ThemeChoicePanel.pcss
View file

@ -14,17 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ThemeChoicePanel {
.mx_ThemeChoicePanel_themeSelectors {
color: $primary-content;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 4px;
margin-bottom: 30px;
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
@ -62,5 +57,4 @@ limitations under the License.
color: #f3f8fd;
}
}
}
}

24
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
View file

@ -14,25 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_AppearanceUserSettingsTab {
--AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
.mx_SettingsTab_subsectionText {
margin-block: $spacing-12 $spacing-32;
color: $primary-content; /* Same as mx_SettingsTab */
}
.mx_Field {
.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
width: 256px;
}
.mx_AppearanceUserSettingsTab_Advanced {
.mx_Checkbox {
margin-block: $spacing-16;
}
.mx_AppearanceUserSettingsTab_systemFont {
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
}
}
// matches checkbox box + padding
// to align with checkbox label
margin-inline-start: calc($font-16px + 10px);
}

4
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View file

@ -82,11 +82,11 @@ $roomtopic-color: $secondary-content;
background-color: $panel-actions !important;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
border-color: $primary-content;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
.mx_ThemeChoicePanel_themeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
color: $primary-content;
}

8
src/components/views/settings/FontScalingPanel.tsx
View file

@ -28,6 +28,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { SettingLevel } from "../../../settings/SettingLevel";
import { _t } from "../../../languageHandler";
import { clamp } from "../../../utils/numbers";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {}
@ -108,8 +109,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
const max = 18;
return (
<div className="mx_SettingsTab_section mx_FontScalingPanel">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<SettingsSubsection heading={_t("Font size")} stretchContent data-testid="mx_FontScalingPanel">
<EventTilePreview
className="mx_FontScalingPanel_preview"
message={this.MESSAGE_PREVIEW_TEXT}
@ -159,9 +159,9 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
onValidate={this.onValidateFontSize}
onChange={(value: ChangeEvent<HTMLInputElement>) => this.setState({ fontSize: value.target.value })}
disabled={!this.state.useCustomFontSize}
className="mx_FontScalingPanel_customFontSizeField"
className="mx_AppearanceUserSettingsTab_checkboxControlledField"
/>
</div>
</SettingsSubsection>
);
}
}

7
src/components/views/settings/ImageSizePanel.tsx
View file

@ -21,6 +21,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
import { _t } from "../../../languageHandler";
import { SettingLevel } from "../../../settings/SettingLevel";
import { ImageSize } from "../../../settings/enums/ImageSize";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {
// none
@ -49,9 +50,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
public render(): React.ReactNode {
return (
<div className="mx_SettingsTab_section mx_ImageSizePanel">
<span className="mx_SettingsTab_subheading">{_t("Image size in the timeline")}</span>
<SettingsSubsection heading={_t("Image size in the timeline")}>
<div className="mx_ImageSizePanel_radios">
<label>
<div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
@ -76,7 +75,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
</StyledRadioButton>
</label>
</div>
</div>
</SettingsSubsection>
);
}
}

7
src/components/views/settings/LayoutSwitcher.tsx
View file

@ -25,6 +25,7 @@ import StyledRadioButton from "../elements/StyledRadioButton";
import { _t } from "../../../languageHandler";
import { Layout } from "../../../settings/enums/Layout";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {
userId?: string;
@ -67,9 +68,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
});
return (
<div className="mx_SettingsTab_section mx_LayoutSwitcher">
<span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
<SettingsSubsection heading={_t("Message layout")}>
<div className="mx_LayoutSwitcher_RadioButtons">
<label className={ircClasses}>
<EventTilePreview
@ -126,7 +125,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
</StyledRadioButton>
</label>
</div>
</div>
</SettingsSubsection>
);
}
}

8
src/components/views/settings/ThemeChoicePanel.tsx
View file

@ -30,6 +30,7 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import { SettingLevel } from "../../../settings/SettingLevel";
import PosthogTrackers from "../../../PosthogTrackers";
import SettingsSubsection from "./shared/SettingsSubsection";
interface IProps {}
@ -245,10 +246,9 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
const orderedThemes = getOrderedThemes();
return (
<div className="mx_SettingsTab_section mx_ThemeChoicePanel">
<span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
<SettingsSubsection heading={_t("Theme")} data-testid="mx_ThemeChoicePanel">
{systemThemeSection}
<div className="mx_ThemeSelectors">
<div className="mx_ThemeChoicePanel_themeSelectors" data-testid="theme-choice-panel-selectors">
<StyledRadioGroup
name="theme"
definitions={orderedThemes.map((t) => ({
@ -264,7 +264,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
</div>
{this.renderHighContrastCheckbox()}
{customThemeForm}
</div>
</SettingsSubsection>
);
}

22
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -31,6 +31,9 @@ import LayoutSwitcher from "../../LayoutSwitcher";
import FontScalingPanel from "../../FontScalingPanel";
import ThemeChoicePanel from "../../ThemeChoicePanel";
import ImageSizePanel from "../../ImageSizePanel";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
interface IProps {}
@ -115,7 +118,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
onChange={(checked) => this.setState({ useSystemFont: checked })}
/>
<Field
className="mx_AppearanceUserSettingsTab_systemFont"
className="mx_AppearanceUserSettingsTab_checkboxControlledField"
label={SettingsStore.getDisplayName("systemFont")!}
onChange={(value: ChangeEvent<HTMLInputElement>) => {
this.setState({
@ -133,10 +136,10 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
);
}
return (
<div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
<SettingsSubsection heading={<></>}>
{toggle}
{advanced}
</div>
</SettingsSubsection>
);
}
@ -144,13 +147,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
const brand = SdkConfig.get().brand;
return (
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
<div className="mx_SettingsTab_heading" data-testid="appearance">
{_t("Customise your appearance")}
</div>
<div className="mx_SettingsTab_subsectionText">
<SettingsTab data-testid="mx_AppearanceUserSettingsTab">
<SettingsSection heading={_t("Customise your appearance")}>
<SettingsSubsectionText>
{_t("Appearance Settings only affect this %(brand)s session.", { brand })}
</div>
</SettingsSubsectionText>
<ThemeChoicePanel />
<LayoutSwitcher
userId={this.state.userId}
@ -162,7 +163,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
<FontScalingPanel />
{this.renderAdvancedSection()}
<ImageSizePanel />
</div>
</SettingsSection>
</SettingsTab>
);
}
}

19
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View file

@ -3,13 +3,21 @@
exports[`FontScalingPanel renders the font scaling UI 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab_section mx_FontScalingPanel"
class="mx_SettingsSubsection"
data-testid="mx_FontScalingPanel"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Font size
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
@ -85,7 +93,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
</label>
</span>
<div
class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
@ -103,5 +111,6 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
</label>
</div>
</div>
</div>
</DocumentFragment>
`;

20
test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View file

@ -3,15 +3,24 @@
exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab_section mx_ThemeChoicePanel"
class="mx_SettingsSubsection"
data-testid="mx_ThemeChoicePanel"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Theme
</span>
</h3>
</div>
<div
class="mx_ThemeSelectors"
class="mx_SettingsSubsection_content"
>
<div
class="mx_ThemeChoicePanel_themeSelectors"
data-testid="theme-choice-panel-selectors"
>
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
@ -59,5 +68,6 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
</label>
</div>
</div>
</div>
</DocumentFragment>
`;

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

@ -3,29 +3,47 @@
exports[`AppearanceUserSettingsTab should render 1`] = `
<DocumentFragment>
<div
class="mx_SettingsTab mx_AppearanceUserSettingsTab"
class="mx_SettingsTab"
data-testid="mx_AppearanceUserSettingsTab"
>
<div
class="mx_SettingsTab_heading"
data-testid="appearance"
class="mx_SettingsTab_sections"
>
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h2"
>
Customise your appearance
</div>
</h2>
<div
class="mx_SettingsTab_subsectionText"
class="mx_SettingsSection_subSections"
>
<div
class="mx_SettingsSubsection_text"
>
Appearance Settings only affect this Element session.
</div>
<div
class="mx_SettingsTab_section mx_ThemeChoicePanel"
class="mx_SettingsSubsection"
data-testid="mx_ThemeChoicePanel"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Theme
</span>
</h3>
</div>
<div
class="mx_ThemeSelectors"
class="mx_SettingsSubsection_content"
>
<div
class="mx_ThemeChoicePanel_themeSelectors"
data-testid="theme-choice-panel-selectors"
>
<label
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
@ -73,14 +91,22 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</label>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_LayoutSwitcher"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Message layout
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_LayoutSwitcher_RadioButtons"
>
@ -204,14 +230,23 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</label>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_FontScalingPanel"
class="mx_SettingsSubsection"
data-testid="mx_FontScalingPanel"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Font size
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
@ -287,7 +322,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</label>
</span>
<div
class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
@ -305,8 +340,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</label>
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced"
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsection_content"
>
<div
aria-expanded="false"
@ -317,14 +356,22 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
Show advanced
</div>
</div>
</div>
<div
class="mx_SettingsTab_section mx_ImageSizePanel"
class="mx_SettingsSubsection"
>
<span
class="mx_SettingsTab_subheading"
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Image size in the timeline
</span>
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div
class="mx_ImageSizePanel_radios"
>
@ -382,5 +429,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;