matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-07 21:23:00 +03:00
Code Activity

Fix class name of the read marker on MessagePanel (#10745)

Browse Source 
* Optimize mx_RoomView_myReadMarker

- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"

* Conform the style rules to the naming policy

Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.

* Run prettier

* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`

- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots

* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`

The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.

- Create _MessagePanel.pcss for the style rules of MessagePanel

* Update permalinks.spec.ts
This commit is contained in:
Suguru Hirahara
2023-05-15 11:02:04 +00:00
committed by GitHub
parent ed06219dcd
commit 3b2216ec9d
11 changed files with 58 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
test/components/structures/MessagePanel-test.tsx
View File

@@ -353,7 +353,7 @@ describe("MessagePanel", function () {
const tiles = container.getElementsByClassName("mx_EventTile");
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
// it should follow the <li> which wraps the event tile for event 4
const eventContainer = tiles[4];
@@ -373,7 +373,7 @@ describe("MessagePanel", function () {
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
expect(rm.previousSibling).toEqual(summary);
@@ -395,7 +395,7 @@ describe("MessagePanel", function () {
const [summary] = container.getElementsByClassName("mx_GenericEventListSummary");
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
expect(rm.previousSibling).toEqual(summary);
@@ -420,7 +420,7 @@ describe("MessagePanel", function () {
const tiles = container.getElementsByClassName("mx_EventTile");
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
expect(rm.previousSibling).toEqual(tiles[4]);
rerender(
@@ -434,7 +434,7 @@ describe("MessagePanel", function () {
);
// now there should be two RM containers
const readMarkers = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const readMarkers = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
expect(readMarkers.length).toEqual(2);
@@ -510,7 +510,7 @@ describe("MessagePanel", function () {
);
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
const [messageList] = container.getElementsByClassName("mx_RoomView_MessageList");
const rows = messageList.children;