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

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>
  );