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

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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;