Set expected value of line-height to expanded generic event list summary (GELS) spacer on IRC layout (#10211)

* Set expected line height to an expanded GELS line on IRC layout, add a test
* Add a test for compact modern/group layout
* Create a new test category on timeline.spec.ts
* Rename the class name as 'spacer'
* Add a test for GELS' spacer on bubble layout
---------

Signed-off-by: Suguru Hirahara <[email protected]>
Co-authored-by: Germain <[email protected]>

Author: luixxiul

cypress/e2e/timeline/timeline.spec.ts

@@ -147,7 +147,10 @@ describe("Timeline", () => {
         });
     });
 
-    describe("message displaying", () => {
+    describe("configure room", () => {
+        // Exclude timestamp and read marker from snapshots
+        const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
+
         beforeEach(() => {
             cy.injectAxe();
         });
@@ -182,6 +185,65 @@ describe("Timeline", () => {
             cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
         });
 
+        it("should have an expanded generic event list summary (GELS) on IRC layout", () => {
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Wait until configuration is finished
+            cy.contains(
+                ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
+                "created and configured the room.",
+            ).should("exist");
+
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+            // Make sure the "expand" link button worked
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist");
+
+            // Check the height of expanded GELS line
+            cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_GenericEventListSummary_spacer").should(
+                "have.css",
+                "line-height",
+                "18px", // $irc-line-height: $font-18px (See: _IRCLayout.pcss)
+            );
+
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on IRC layout", { percyCSS });
+        });
+
+        it("should have an expanded generic event list summary (GELS) on compact modern/group layout", () => {
+            cy.visit("/#/room/" + roomId);
+
+            // Set compact modern layout
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group).setSettingValue(
+                "useCompactLayout",
+                null,
+                SettingLevel.DEVICE,
+                true,
+            );
+
+            // Wait until configuration is finished
+            cy.contains(
+                ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
+                "created and configured the room.",
+            ).should("exist");
+
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+            // Make sure the "expand" link button worked
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist");
+
+            // Check the height of expanded GELS line
+            cy.get(".mx_GenericEventListSummary[data-layout=group] .mx_GenericEventListSummary_spacer").should(
+                "have.css",
+                "line-height",
+                "22px", // $font-22px (See: _GenericEventListSummary.pcss)
+            );
+
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on modern layout", { percyCSS });
+        });
+
         it("should add inline start margin to an event line on IRC layout", () => {
             cy.visit("/#/room/" + roomId);
             cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -212,6 +274,12 @@ describe("Timeline", () => {
             });
             cy.checkA11y();
         });
+    });
+
+    describe("message displaying", () => {
+        beforeEach(() => {
+            cy.injectAxe();
+        });
 
         it("should align generic event list summary with messages and emote on IRC layout", () => {
             // This test aims to check:
@@ -569,12 +637,29 @@ describe("Timeline", () => {
             // Click "expand" link button
             cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
 
+            // Make sure the "expand" link button worked
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").should("exist");
+
+            // Make sure spacer is not visible on bubble layout
+            cy.get(".mx_GenericEventListSummary[data-layout=bubble] .mx_GenericEventListSummary_spacer").should(
+                "not.be.visible", // See: _GenericEventListSummary.pcss
+            );
+
+            // Exclude timestamp from snapshot
+            const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+
+            // Save snapshot of expanded generic event list summary on bubble layout
+            cy.get(".mx_MainSplit").percySnapshotElement("Expanded GELS on bubble layout", { percyCSS });
+
             // Click "collapse" link button on the first hovered info event line
             cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover();
             cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false });
 
             // Make sure "collapse" link button worked
             cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").should("exist");
+
+            // Save snapshot of collapsed generic event list summary on bubble layout
+            cy.get(".mx_MainSplit").percySnapshotElement("Collapsed GELS on bubble layout", { percyCSS });
         });
 
         it("should highlight search result words regardless of formatting", () => {

res/css/views/elements/_GenericEventListSummary.pcss

@@ -21,6 +21,16 @@ limitations under the License.
         margin-right: $spacing-8;
     }
 
+    .mx_GenericEventListSummary_spacer {
+        border-bottom: 1px solid $primary-hairline-color;
+        margin-left: 63px; /* TODO: Use a variable */
+        line-height: $font-30px; /* TODO: Use a variable */
+
+        .mx_IRCLayout & {
+            line-height: var(--line-height);
+        }
+    }
+
     &[data-layout="irc"],
     &[data-layout="group"] {
         .mx_GenericEventListSummary_toggle {
@@ -51,7 +61,7 @@ limitations under the License.
             }
         }
 
-        .mx_GenericEventListSummary_line {
+        .mx_GenericEventListSummary_spacer {
             display: none;
         }
 
@@ -88,7 +98,7 @@ limitations under the License.
             line-height: $font-20px;
         }
 
-        .mx_GenericEventListSummary_line {
+        .mx_GenericEventListSummary_spacer {
             line-height: $font-22px;
         }
 
@@ -117,9 +127,3 @@ limitations under the License.
         cursor: pointer;
     }
 }
-
-.mx_GenericEventListSummary_line {
-    border-bottom: 1px solid $primary-hairline-color;
-    margin-left: 63px;
-    line-height: $font-30px;
-}

res/css/views/rooms/_IRCLayout.pcss

@@ -20,8 +20,9 @@ $irc-line-height: $font-18px;
     --name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx
     --icon-width: 14px;
     --right-padding: 5px;
+    --line-height: $irc-line-height;
 
-    line-height: $irc-line-height !important;
+    line-height: var(--line-height) !important;
 
     .mx_NewRoomIntro {
         > h2 {

src/components/views/elements/GenericEventListSummary.tsx

@@ -86,7 +86,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
     if (expanded) {
         body = (
             <React.Fragment>
-                <div className="mx_GenericEventListSummary_line">&nbsp;</div>
+                <div className="mx_GenericEventListSummary_spacer">&nbsp;</div>
                 <ol className="mx_GenericEventListSummary_unstyledList">{children}</ol>
             </React.Fragment>
         );