Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit b3b03e5

Browse files
author
Kerry
authored
Use semantic headings in user settings Appearance (#10827)
* 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
1 parent e652177 commit b3b03e5

File tree

18 files changed

+732
-737
lines changed

18 files changed

+732
-737
lines changed

‎cypress/e2e/audio-player/audio-player.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ describe("Audio player", () => {
176176

177177
// Enable high contrast manually
178178
cy.openUserSettings("Appearance")
179-
.get(".mx_ThemeChoicePanel")
179+
.findByTestId("mx_ThemeChoicePanel")
180180
.findByLabelText("Use high contrast")
181181
.click({ force: true }); // force click because the size of the checkbox is zero
182182

‎cypress/e2e/settings/appearance-user-settings-tab.spec.ts

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,11 @@ describe("Appearance user settings tab", () => {
3636
it("should be rendered properly", () => {
3737
cy.openUserSettings("Appearance");
3838

39-
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
40-
// Assert that the top heading is rendered
41-
cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
39+
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
40+
cy.get("h2").should("have.text", "Customise your appearance").should("be.visible");
4241
});
4342

44-
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
43+
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
4544
"User settings tab - Appearance (advanced options collapsed)",
4645
{
4746
// Emulate TabbedView's actual min and max widths
@@ -57,7 +56,7 @@ describe("Appearance user settings tab", () => {
5756
// Assert that "Hide advanced" link button is rendered
5857
cy.findByRole("button", { name: "Hide advanced" }).should("exist");
5958

60-
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
59+
cy.findByTestId("mx_AppearanceUserSettingsTab").percySnapshotElement(
6160
"User settings tab - Appearance (advanced options expanded)",
6261
{
6362
// Emulate TabbedView's actual min and max widths
@@ -74,7 +73,7 @@ describe("Appearance user settings tab", () => {
7473

7574
cy.openUserSettings("Appearance");
7675

77-
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
76+
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
7877
// Assert that the layout selected by default is "Modern"
7978
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
8079
cy.findByLabelText("Modern").should("exist");
@@ -84,7 +83,7 @@ describe("Appearance user settings tab", () => {
8483
// Assert that the room layout is set to group (modern) layout
8584
cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
8685

87-
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
86+
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
8887
// Select the first layout
8988
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
9089

@@ -97,7 +96,7 @@ describe("Appearance user settings tab", () => {
9796
// Assert that the room layout is set to IRC layout
9897
cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
9998

100-
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
99+
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
101100
// Select the last layout
102101
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
103102

@@ -114,7 +113,7 @@ describe("Appearance user settings tab", () => {
114113
it("should support changing font size by clicking the font slider", () => {
115114
cy.openUserSettings("Appearance");
116115

117-
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
116+
cy.findByTestId("mx_AppearanceUserSettingsTab").within(() => {
118117
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
119118
cy.findByLabelText("Font size").should("exist");
120119
});
@@ -150,7 +149,7 @@ describe("Appearance user settings tab", () => {
150149
it("should disable font size slider when custom font size is used", () => {
151150
cy.openUserSettings("Appearance");
152151

153-
cy.get(".mx_FontScalingPanel").within(() => {
152+
cy.findByTestId("mx_FontScalingPanel").within(() => {
154153
cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
155154

156155
// Assert that the font slider is disabled
@@ -167,24 +166,16 @@ describe("Appearance user settings tab", () => {
167166
// Click "Show advanced" link button
168167
cy.findByRole("button", { name: "Show advanced" }).click();
169168

170-
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
171-
// force click as checkbox size is zero
172-
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
173-
});
169+
// force click as checkbox size is zero
170+
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
174171

175172
// Assert that the room layout is set to compact group (modern) layout
176173
cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
177174
});
178175

179176
it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
180177
const checkDisabled = () => {
181-
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
182-
cy.get(".mx_Checkbox")
183-
.first()
184-
.within(() => {
185-
cy.get("input[type='checkbox'][disabled]").should("exist");
186-
});
187-
});
178+
cy.findByLabelText("Use a more compact 'Modern' layout").should("be.disabled");
188179
};
189180

190181
cy.openUserSettings("Appearance");
@@ -193,7 +184,7 @@ describe("Appearance user settings tab", () => {
193184
cy.findByRole("button", { name: "Show advanced" }).click();
194185

195186
// Enable IRC layout
196-
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
187+
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
197188
// Select the first layout
198189
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
199190

@@ -206,7 +197,7 @@ describe("Appearance user settings tab", () => {
206197
checkDisabled();
207198

208199
// Enable bubble layout
209-
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
200+
cy.get(".mx_LayoutSwitcher_RadioButtons").within(() => {
210201
// Select the first layout
211202
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
212203

@@ -225,10 +216,8 @@ describe("Appearance user settings tab", () => {
225216
// Click "Show advanced" link button
226217
cy.findByRole("button", { name: "Show advanced" }).click();
227218

228-
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
229-
// force click as checkbox size is zero
230-
cy.findByLabelText("Use a system font").click({ force: true });
231-
});
219+
// force click as checkbox size is zero
220+
cy.findByLabelText("Use a system font").click({ force: true });
232221

233222
// Assert that the font-family value was removed
234223
cy.get("body").should("have.css", "font-family", '""');
@@ -242,7 +231,7 @@ describe("Appearance user settings tab", () => {
242231

243232
it("should be rendered with the light theme selected", () => {
244233
cy.openUserSettings("Appearance")
245-
.get(".mx_ThemeChoicePanel")
234+
.findByTestId("mx_ThemeChoicePanel")
246235
.within(() => {
247236
cy.findByTestId("checkbox-use-system-theme").within(() => {
248237
cy.findByText("Match system theme").should("be.visible");
@@ -252,7 +241,7 @@ describe("Appearance user settings tab", () => {
252241
cy.get(".mx_Checkbox_checkmark").should("not.be.visible");
253242
});
254243

255-
cy.get(".mx_ThemeSelectors").within(() => {
244+
cy.findByTestId("theme-choice-panel-selectors").within(() => {
256245
cy.get(".mx_ThemeSelector_light").should("exist");
257246
cy.get(".mx_ThemeSelector_dark").should("exist");
258247

@@ -274,11 +263,11 @@ describe("Appearance user settings tab", () => {
274263
"the system theme is clicked",
275264
() => {
276265
cy.openUserSettings("Appearance")
277-
.get(".mx_ThemeChoicePanel")
266+
.findByTestId("mx_ThemeChoicePanel")
278267
.findByLabelText("Match system theme")
279268
.click({ force: true }); // force click because the size of the checkbox is zero
280269

281-
cy.get(".mx_ThemeChoicePanel").within(() => {
270+
cy.findByTestId("mx_ThemeChoicePanel").within(() => {
282271
// Assert that the labels for the light theme and dark theme are disabled
283272
cy.get(".mx_ThemeSelector_light.mx_StyledRadioButton_disabled").should("exist");
284273
cy.get(".mx_ThemeSelector_dark.mx_StyledRadioButton_disabled").should("exist");
@@ -321,7 +310,7 @@ describe("Appearance user settings tab", () => {
321310
});
322311

323312
cy.openUserSettings("Appearance")
324-
.get(".mx_ThemeChoicePanel")
313+
.findByTestId("mx_ThemeChoicePanel")
325314
.findByLabelText("Use high contrast")
326315
.click({ force: true }); // force click because the size of the checkbox is zero
327316

‎res/css/_components.pcss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,6 @@
179179
@import "./views/elements/_Dropdown.pcss";
180180
@import "./views/elements/_EditableItemList.pcss";
181181
@import "./views/elements/_ErrorBoundary.pcss";
182-
@import "./views/elements/_EventTilePreview.pcss";
183182
@import "./views/elements/_ExternalLink.pcss";
184183
@import "./views/elements/_FacePile.pcss";
185184
@import "./views/elements/_Field.pcss";

‎res/css/views/elements/_EventTilePreview.pcss

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎res/css/views/settings/_FontScalingPanel.pcss

Lines changed: 34 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,63 +14,48 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_FontScalingPanel {
18-
color: $primary-content;
17+
.mx_FontScalingPanel_preview {
18+
--FontScalingPanel_preview-padding-block: 9px;
1919

20-
.mx_FontScalingPanel_preview,
21-
.mx_FontScalingPanel_fontSlider {
22-
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
23-
}
24-
25-
.mx_FontScalingPanel_preview {
26-
--FontScalingPanel_preview-padding-block: 9px;
27-
28-
border: 1px solid $quinary-content;
29-
border-radius: 10px;
30-
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
31-
pointer-events: none;
32-
display: flow-root;
33-
34-
&.mx_IRCLayout {
35-
padding-top: 9px; /* TODO: Use a spacing variable */
36-
}
37-
38-
.mx_EventTile[data-layout="bubble"] {
39-
margin-top: 30px; /* TODO: Use a spacing variable */
40-
}
20+
border: 1px solid $quinary-content;
21+
border-radius: 10px;
22+
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
23+
pointer-events: none;
24+
display: flow-root;
4125

42-
.mx_EventTile_msgOption {
43-
display: none;
44-
}
26+
&.mx_IRCLayout {
27+
padding-top: 9px; /* TODO: Use a spacing variable */
4528
}
4629

47-
.mx_FontScalingPanel_fontSlider {
48-
display: flex;
49-
align-items: center;
50-
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
51-
background: rgba($quinary-content, 0.2);
52-
border-radius: 10px;
53-
font-size: $font-10px;
54-
margin-top: $spacing-24;
55-
margin-bottom: $spacing-24;
30+
.mx_EventTile[data-layout="bubble"] {
31+
margin-top: 30px; /* TODO: Use a spacing variable */
32+
}
5633

57-
.mx_FontScalingPanel_fontSlider_smallText,
58-
.mx_FontScalingPanel_fontSlider_largeText {
59-
font-weight: 500;
60-
}
34+
.mx_EventTile_msgOption {
35+
display: none;
36+
}
37+
}
6138

62-
.mx_FontScalingPanel_fontSlider_smallText {
63-
font-size: $font-15px;
64-
padding-inline-end: $spacing-20;
65-
}
39+
.mx_FontScalingPanel_fontSlider {
40+
display: flex;
41+
align-items: center;
42+
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
43+
background: rgba($quinary-content, 0.2);
44+
border-radius: 10px;
45+
font-size: $font-10px;
46+
47+
.mx_FontScalingPanel_fontSlider_smallText,
48+
.mx_FontScalingPanel_fontSlider_largeText {
49+
font-weight: 500;
50+
}
6651

67-
.mx_FontScalingPanel_fontSlider_largeText {
68-
font-size: $font-18px;
69-
padding-inline-start: $spacing-20;
70-
}
52+
.mx_FontScalingPanel_fontSlider_smallText {
53+
font-size: $font-15px;
54+
padding-inline-end: $spacing-20;
7155
}
7256

73-
.mx_FontScalingPanel_customFontSizeField {
74-
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
57+
.mx_FontScalingPanel_fontSlider_largeText {
58+
font-size: $font-18px;
59+
padding-inline-start: $spacing-20;
7560
}
7661
}

‎res/css/views/settings/_ImageSizePanel.pcss

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,31 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_ImageSizePanel {
18-
color: $primary-content;
19-
20-
.mx_ImageSizePanel_radios {
21-
display: flex;
22-
margin-top: 16px; /* move away from header a bit */
17+
.mx_ImageSizePanel_radios {
18+
display: flex;
19+
flex-direction: row;
20+
gap: $spacing-16;
21+
22+
> label {
23+
margin-right: 68px; /* keep the boxes separate */
24+
cursor: pointer;
25+
}
2326

24-
> label {
25-
margin-right: 68px; /* keep the boxes separate */
26-
cursor: pointer;
27+
.mx_ImageSizePanel_size {
28+
background-color: $quinary-content;
29+
mask-repeat: no-repeat;
30+
mask-size: 221px;
31+
mask-position: center;
32+
width: 221px;
33+
height: 148px;
34+
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
35+
36+
&.mx_ImageSizePanel_sizeDefault {
37+
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
2738
}
2839

29-
.mx_ImageSizePanel_size {
30-
background-color: $quinary-content;
31-
mask-repeat: no-repeat;
32-
mask-size: 221px;
33-
mask-position: center;
34-
width: 221px;
35-
height: 148px;
36-
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
37-
38-
&.mx_ImageSizePanel_sizeDefault {
39-
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
40-
}
41-
42-
&.mx_ImageSizePanel_sizeLarge {
43-
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
44-
}
40+
&.mx_ImageSizePanel_sizeLarge {
41+
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
4542
}
4643
}
4744
}

0 commit comments

Comments
 (0)