New right panel visual language

cypress/e2e/right-panel/file-panel.spec.ts

@@ -30,7 +30,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };
 
 const uploadFile = (file: string) => {

cypress/e2e/right-panel/right-panel.spec.ts

@@ -43,7 +43,7 @@ const viewRoomSummaryByName = (name: string): Chainable<JQuery<HTMLElement>> =>
 
 const checkRoomSummaryCard = (name: string): Chainable<JQuery<HTMLElement>> => {
     cy.get(".mx_RoomSummaryCard").should("have.length", 1);
-    return cy.get(".mx_BaseCard_header").should("contain", name);
+    return cy.get(".mx_RoomSummaryCard").should("contain", name);
 };
 
 describe("RightPanel", () => {

package.json

@@ -52,6 +52,7 @@
         "test": "jest",
         "test:cypress": "cypress run",
         "test:cypress:open": "cypress open",
+        "test:screenshot:local": "PERCY_TOKEN=a04f2cc2bbfa5d01df2e234622896ad47bff8433a26c563ef551d2e1c15a171f PERCY_BRANCH=local yarn percy exec --parallel -- yarn test:cypress",
         "coverage": "yarn test --coverage"
     },
     "resolutions": {
@@ -69,7 +70,7 @@
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.0.5",
-        "@vector-im/compound-web": "^0.4.0",
+        "@vector-im/compound-web": "^0.5.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

res/css/_common.pcss

@@ -292,29 +292,6 @@ legend {
     }
 }
 
-/*** panels ***/
-.dark-panel {
-    background-color: $dark-panel-bg-color;
-
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
-    .mx_textinput {
-        color: $input-darker-fg-color;
-        background-color: $background;
-        border: none;
-    }
-}
-
-.light-panel {
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
-    .mx_textinput {
-        color: $input-darker-fg-color;
-        background-color: $input-lighter-bg-color;
-        border: none;
-    }
-}
-
 /* Prevent ugly dotted highlight around selected elements in Firefox */
 ::-moz-focus-inner {
     border: 0;
@@ -891,3 +868,10 @@ legend {
         }
     }
 }
+
+.mx_lineClamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--mx-line-clamp, 1);
+    overflow: hidden;
+}

res/css/structures/_MainSplit.pcss

@@ -23,17 +23,11 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: var(--container-gap-width);
-    /* The resizer should be centered: only half of the gap-width is handled by the right panel. */
-    /* The other half by the RoomView. */
-    padding-left: calc(var(--container-gap-width) / 2);
-    height: calc(100vh - 51px); /* height of .mx_LegacyRoomHeader.light-panel */
-
     &:hover .mx_ResizeHandle--horizontal::before {
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-150%, -50%);
 
         height: 64px; /* to match width of the ones on roomlist */
         width: 4px;

res/css/structures/_MatrixChat.pcss

@@ -76,24 +76,6 @@ limitations under the License.
     height: 100%;
 }
 
-/* We'd like to remove this, but this makes matrixchat's resizehandle's */
-/* negative margin greater than its positive padding. If it's the same */
-/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
-/* https://github.com/vector-im/element-web/issues/19863 happens. */
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
-    margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
-    /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
-    /* (IF there is NO margin on the leftPanel_wrapper) */
-    /* The resizeHandle does not change the gap between the left panel and the room view: */
-    /*  the resizeHandle width is: */
-    /*      11px =  10px (padding) + 1px (width) */
-    /*      and the total negative margin is -12px -> */
-    /*      the handle requires no space */
-    /* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
-    /* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
-    /* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
-}
-
 .mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
     position: relative;
 

res/css/structures/_RightPanel.pcss

@@ -21,8 +21,7 @@ limitations under the License.
     position: relative;
     display: flex;
     flex-direction: column;
-    border-radius: 8px;
-    padding: var(--container-border-width) 0;
+    border-left: 1px solid $separator;
     box-sizing: border-box;
     height: 100%;
     contain: strict;

res/css/views/right_panel/_BaseCard.pcss

@@ -15,22 +15,26 @@ limitations under the License.
 */
 
 .mx_BaseCard {
-    --BaseCard_padding-inline: $spacing-8;
     --BaseCard_EventTile_line-padding-block: 2px;
     --BaseCard_EventTile-spacing-inline: 36px;
     --BaseCard_header-button-size: 24px;
 
-    padding: 0 var(--BaseCard_padding-inline);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     flex: 1;
     font-size: var(--cpd-font-size-body-md);
 
     .mx_BaseCard_header {
-        --BaseCard_header_button-margin: $spacing-12;
-
-        margin: $spacing-4 0 $spacing-12;
+        height: 64px;
+        padding: var(--cpd-space-3x);
+        box-sizing: border-box;
+        border-bottom: 1px solid $separator;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--cpd-space-2x);
+        flex-shrink: 0;
 
         > h2 {
             margin: 0 44px;
@@ -40,60 +44,6 @@ limitations under the License.
             white-space: nowrap;
         }
 
-        .mx_BaseCard_back,
-        .mx_BaseCard_close {
-            position: absolute;
-            background-color: rgba(141, 151, 165, 0.2);
-            width: var(--BaseCard_header-button-size);
-            height: var(--BaseCard_header-button-size);
-            margin: var(--BaseCard_header_button-margin);
-            top: 0;
-            border-radius: 50%;
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: inherit;
-                width: inherit;
-                top: 0;
-                left: 0;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: $icon-button-color;
-            }
-        }
-
-        .mx_BaseCard_back {
-            left: 0;
-            margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
-
-            &::before {
-                transform: rotate(90deg);
-                mask-size: 22px;
-                mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
-            }
-
-            /* Header title with the back button */
-            ~ .mx_BaseCard_header_title {
-                width: calc(100% - 60px);
-                margin-inline-start: var(--BaseCard_header-button-size);
-
-                .mx_BaseCard_header_title_heading {
-                    margin-inline-start: 6px;
-                }
-            }
-        }
-
-        .mx_BaseCard_close {
-            right: 0;
-            margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
-
-            &::before {
-                mask-image: url("$(res)/img/icons-close.svg");
-                mask-size: 8px;
-            }
-        }
-
         .mx_BaseCard_header_title {
             display: flex;
             align-items: center;
@@ -103,7 +53,7 @@ limitations under the License.
             flex: 1;
 
             .mx_BaseCard_header_title_heading {
-                color: $icon-button-color;
+                color: $primary-content;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
@@ -164,7 +114,6 @@ limitations under the License.
             position: relative;
             font: var(--cpd-font-heading-sm-medium);
             height: 20px;
-            border-radius: 8px;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
@@ -206,16 +155,41 @@ limitations under the License.
     }
 }
 
-.mx_FilePanel,
-.mx_UserInfo,
-.mx_MemberList {
-    &.mx_BaseCard {
-        padding: $spacing-32 0 0;
+.mx_BaseCard_back,
+.mx_BaseCard_close {
+    position: relative;
+    background-color: rgba(141, 151, 165, 0.2);
+    width: var(--BaseCard_header-button-size);
+    height: var(--BaseCard_header-button-size);
+    border-radius: 50%;
+
+    &::before {
+        content: "";
+        position: absolute;
+        height: inherit;
+        width: inherit;
+        top: 0;
+        left: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: $icon-button-color;
+    }
+}
 
-        .mx_AutoHideScrollbar {
-            margin-right: unset;
-            padding-right: unset;
-        }
+.mx_BaseCard_back {
+    order: 0; /* always first! */
+    &::before {
+        transform: rotate(90deg);
+        mask-size: 22px;
+        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    }
+}
+
+.mx_BaseCard_close {
+    order: 999; /* always last */
+    &::before {
+        mask-image: url("$(res)/img/icons-close.svg");
+        mask-size: 8px;
     }
 }
 
@@ -230,7 +204,7 @@ limitations under the License.
         }
 
         font: var(--cpd-font-body-sm-regular);
-        color: $secondary-content;
+        color: $primary-content;
         padding-top: 10px;
         padding-bottom: 10px;