From 38ae8e98e494737cc9d5ad07ced809fe3d9b73d8 Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 17 May 2023 13:16:49 +1200 Subject: [PATCH] Use semantic headings in user settings Preferences (#10794) * allow testids in settings sections * use semantic headings in LabsUserSettingsTab * use semantic headings in usersettingspreferences * rethemendex * put back margin var --- .../preferences-user-settings-tab.spec.ts | 19 +- res/css/_components.pcss | 1 - .../user/_PreferencesUserSettingsTab.pcss | 25 - .../tabs/user/PreferencesUserSettingsTab.tsx | 168 +- .../PreferencesUserSettingsTab-test.tsx.snap | 2118 +++++++++-------- 5 files changed, 1200 insertions(+), 1131 deletions(-) delete mode 100644 res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss diff --git a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts index ad16f0a1c5..61f073e62c 100644 --- a/cypress/e2e/settings/preferences-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/preferences-user-settings-tab.spec.ts @@ -35,19 +35,16 @@ describe("Preferences user settings tab", () => { it("should be rendered properly", () => { cy.openUserSettings("Preferences"); - cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").within(() => { + cy.findByTestId("mx_PreferencesUserSettingsTab").within(() => { // Assert that the top heading is rendered - cy.findByTestId("preferences").should("have.text", "Preferences").should("be.visible"); + cy.contains("Preferences").should("be.visible"); }); - cy.get(".mx_SettingsTab.mx_PreferencesUserSettingsTab").percySnapshotElement( - "User settings tab - Preferences", - { - // Emulate TabbedView's actual min and max widths - // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width - // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right) - widths: [580, 796], - }, - ); + cy.findByTestId("mx_PreferencesUserSettingsTab").percySnapshotElement("User settings tab - Preferences", { + // Emulate TabbedView's actual min and max widths + // 580: '.mx_UserSettingsDialog .mx_TabbedView' min-width + // 796: 1036 (mx_TabbedView_tabsOnLeft actual width) - 240 (mx_TabbedView_tabPanel margin-right) + widths: [580, 796], + }); }); }); diff --git a/res/css/_components.pcss b/res/css/_components.pcss index f116e45c5e..808b6b024e 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -346,7 +346,6 @@ @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss"; -@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss"; diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss deleted file mode 100644 index c7eb699d4c..0000000000 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss +++ /dev/null @@ -1,25 +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_PreferencesUserSettingsTab { - .mx_Field { - margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end); - } - - .mx_SettingsTab_section { - margin-bottom: var(--SettingsTab_section-margin-bottom-preferences-labs); - } -} diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index 4fbb174516..cc485dca45 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -1,5 +1,5 @@ /* -Copyright 2019-2021 The Matrix.org Foundation C.I.C. +Copyright 2019-2023 The Matrix.org Foundation C.I.C. Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); @@ -30,6 +30,9 @@ import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPa import { Action } from "../../../../../dispatcher/actions"; import SdkConfig from "../../../../../SdkConfig"; import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage"; +import SettingsSubsection from "../../shared/SettingsSubsection"; +import SettingsTab from "../SettingsTab"; +import { SettingsSection } from "../../shared/SettingsSection"; interface IProps { closeSettingsFn(success: boolean): void; @@ -143,27 +146,21 @@ export default class PreferencesUserSettingsTab extends React.Component it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase)); return ( -
-
- {_t("Preferences")} -
+ + + {roomListSettings.length > 0 && ( + + {this.renderGroup(roomListSettings)} + + )} - {roomListSettings.length > 0 && ( -
- {_t("Room list")} - {this.renderGroup(roomListSettings)} -
- )} + + {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} + -
- {_t("Spaces")} - {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} -
- -
- {_t("Keyboard shortcuts")} -
- {_t( + click here.", {}, { @@ -174,85 +171,78 @@ export default class PreferencesUserSettingsTab extends React.Component - {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)} -
+ > + {this.renderGroup(PreferencesUserSettingsTab.KEYBINDINGS_SETTINGS)} + -
- {_t("Displaying time")} - {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.TIME_SETTINGS)} + -
- {_t("Presence")} - - {_t("Share your activity and status with others.")} - - {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.PRESENCE_SETTINGS)} + -
- {_t("Composer")} - {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)} + -
- {_t("Code blocks")} - {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.CODE_BLOCKS_SETTINGS)} + -
- {_t("Images, GIFs and videos")} - {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.IMAGES_AND_VIDEOS_SETTINGS)} + -
- {_t("Timeline")} - {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)} + -
- {_t("Room directory")} - {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} -
+ + {this.renderGroup(PreferencesUserSettingsTab.ROOM_DIRECTORY_SETTINGS)} + -
- {_t("General")} - {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} + + {this.renderGroup(PreferencesUserSettingsTab.GENERAL_SETTINGS)} - - - - - + + + + + - - - -
-
+ + + + + + ); } } diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap index 45340dac36..2426d97f3a 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap @@ -3,1047 +3,1155 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
- Preferences -
-
- - Room list -
- + Preferences +
-
-
-
-
- - Spaces - -
-