Deprecate mx_RightPanel_headerButton class (#10821)

* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used

cypress/e2e/room/room-header.spec.ts

@@ -94,14 +94,8 @@ describe("Room Header", () => {
 
             // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
             // Note these assertions do not check the size of mx_RoomHeader_name button
-            // TODO: merge the assertions by using the same class name
             cy.get(".mx_RoomHeader_button")
-                .should("have.length", 3)
+                .should("have.length", 6)
-                .should("be.visible")
-                .should("have.css", "height", "32px")
-                .should("have.css", "width", "32px");
-            cy.get(".mx_RightPanel_headerButton")
-                .should("have.length", 3)
                 .should("be.visible")
                 .should("have.css", "height", "32px")
                 .should("have.css", "width", "32px");

cypress/e2e/threads/threads.spec.ts

@@ -296,7 +296,7 @@ describe("Threads", () => {
         });
 
         cy.findByRole("button", { name: "Threads" })
-            .should("have.class", "mx_RightPanel_headerButton_unread") // User asserts thread list unread indicator
+            .should("have.class", "mx_RoomHeader_button--unread") // User asserts thread list unread indicator
             .click(); // User opens thread list
 
         // User asserts thread with correct root & latest events & unread dot

res/css/structures/_RightPanel.pcss

@@ -34,40 +34,6 @@ limitations under the License.
 
 /** Fixme - factor this out with the main header **/
 
-/* See: mx_RoomHeader_button, of which this is a copy.
- * TODO: factor out a common component to avoid this duplication.
- */
-.mx_RightPanel_headerButton {
-    cursor: pointer;
-    flex: 0 0 auto;
-    margin-left: 1px;
-    margin-right: 1px;
-    height: 32px;
-    width: 32px;
-    position: relative;
-    border-radius: 100%;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 4px; /* center with parent of 32px */
-        left: 4px; /* center with parent of 32px */
-        height: 24px;
-        width: 24px;
-        background-color: $icon-button-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-    }
-
-    &:hover {
-        background: rgba($accent, 0.1);
-
-        &::before {
-            background-color: $accent;
-        }
-    }
-}
-
 .mx_RightPanel_threadsButton::before {
     mask-image: url("$(res)/img/element-icons/room/thread.svg");
 }
@@ -89,41 +55,6 @@ limitations under the License.
     }
 }
 
-.mx_RightPanel_headerButton_unreadIndicator_bg {
-    position: absolute;
-    right: var(--RoomHeader-indicator-dot-offset);
-    top: var(--RoomHeader-indicator-dot-offset);
-    margin: 4px;
-    width: var(--RoomHeader-indicator-dot-size);
-    height: var(--RoomHeader-indicator-dot-size);
-    border-radius: 50%;
-    transform: scale(1.6);
-    transform-origin: center center;
-    background: rgba($background, 1);
-}
-
-.mx_RightPanel_headerButton_unreadIndicator {
-    position: absolute;
-    right: var(--RoomHeader-indicator-dot-offset);
-    top: var(--RoomHeader-indicator-dot-offset);
-    margin: 4px;
-
-    &.mx_Indicator_red {
-        background: rgba($alert, 1);
-        box-shadow: rgba($alert, 1);
-    }
-
-    &.mx_Indicator_gray {
-        background: rgba($room-icon-unread-color, 1);
-        box-shadow: rgba($room-icon-unread-color, 1);
-    }
-
-    &.mx_Indicator_bold {
-        background: rgba($primary-content, 1);
-        box-shadow: rgba($primary-content, 1);
-    }
-}
-
 .mx_RightPanel_timelineCardButton {
     &::before {
         mask-image: url("$(res)/img/element-icons/feedback.svg");
@@ -131,19 +62,6 @@ limitations under the License.
     }
 }
 
-.mx_RightPanel_headerButton_unread {
-    &::before {
-        background-color: $room-icon-unread-color !important;
-    }
-}
-
-.mx_RightPanel_headerButton_highlight,
-.mx_RightPanel_headerButton:hover {
-    &::before {
-        background-color: $accent !important;
-    }
-}
-
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo {
     order: 2;

res/css/views/rooms/_RoomHeader.pcss

@@ -194,6 +194,54 @@ limitations under the License.
     }
 }
 
+.mx_RoomHeader_button_unreadIndicator_bg {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
+    border-radius: 50%;
+    transform: scale(1.6);
+    transform-origin: center center;
+    background: rgba($background, 1);
+}
+
+.mx_RoomHeader_button_unreadIndicator {
+    position: absolute;
+    right: var(--RoomHeader-indicator-dot-offset);
+    top: var(--RoomHeader-indicator-dot-offset);
+    margin: 4px;
+
+    &.mx_Indicator_red {
+        background: rgba($alert, 1);
+        box-shadow: rgba($alert, 1);
+    }
+
+    &.mx_Indicator_gray {
+        background: rgba($room-icon-unread-color, 1);
+        box-shadow: rgba($room-icon-unread-color, 1);
+    }
+
+    &.mx_Indicator_bold {
+        background: rgba($primary-content, 1);
+        box-shadow: rgba($primary-content, 1);
+    }
+}
+
+.mx_RoomHeader_button--unread {
+    &::before {
+        background-color: $room-icon-unread-color !important;
+    }
+}
+
+.mx_RoomHeader_button--highlight,
+.mx_RoomHeader_button:hover {
+    &::before {
+        background-color: $accent !important;
+    }
+}
+
 .mx_RoomHeader_forgetButton::before {
     mask-image: url("$(res)/img/element-icons/leave.svg");
     width: 26px;

src/components/views/right_panel/HeaderButton.tsx

@@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component<IProps> {
         const { isHighlighted, isUnread = false, onClick, name, title, ...props } = this.props;
 
         const classes = classNames({
-            mx_RightPanel_headerButton: true,
+            "mx_RoomHeader_button": true,
-            mx_RightPanel_headerButton_highlight: isHighlighted,
+            "mx_RoomHeader_button--highlight": isHighlighted,
-            mx_RightPanel_headerButton_unread: isUnread,
+            "mx_RoomHeader_button--unread": isUnread,
             [`mx_RightPanel_${name}`]: true,
         });
 

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -64,14 +64,14 @@ const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
 
     const classes = classNames({
         mx_Indicator: true,
-        mx_RightPanel_headerButton_unreadIndicator: true,
+        mx_RoomHeader_button_unreadIndicator: true,
         mx_Indicator_bold: color === NotificationColor.Bold,
         mx_Indicator_gray: color === NotificationColor.Grey,
         mx_Indicator_red: color === NotificationColor.Red,
     });
     return (
         <>
-            <div className="mx_RightPanel_headerButton_unreadIndicator_bg" />
+            <div className="mx_RoomHeader_button_unreadIndicator_bg" />
             <div className={classes} />
         </>
     );

test/components/views/right_panel/RoomHeaderButtons-test.tsx

@@ -75,10 +75,10 @@ describe("RoomHeaderButtons-test.tsx", function () {
 
     it("thread notification does change the thread button", () => {
         const { container } = getComponent(room);
-        expect(getThreadButton(container)!.className.includes("mx_RightPanel_headerButton_unread")).toBeFalsy();
+        expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button--unread")).toBeFalsy();
 
         room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1);
-        expect(getThreadButton(container)!.className.includes("mx_RightPanel_headerButton_unread")).toBeTruthy();
+        expect(getThreadButton(container)!.className.includes("mx_RoomHeader_button--unread")).toBeTruthy();
         expect(isIndicatorOfType(container, "gray")).toBe(true);
 
         room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 1);

test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap

@@ -5,14 +5,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `
   <div
     aria-current="false"
     aria-label="Chat"
-    class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_timelineCardButton"
+    class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_timelineCardButton"
     role="button"
     tabindex="0"
   />
   <div
     aria-current="false"
     aria-label="Threads"
-    class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_threadsButton"
+    class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_threadsButton"
     data-testid="threadsButton"
     role="button"
     tabindex="0"
@@ -20,14 +20,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `
   <div
     aria-current="false"
     aria-label="Notifications"
-    class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_notifsButton"
+    class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_notifsButton"
     role="button"
     tabindex="0"
   />
   <div
     aria-current="false"
     aria-label="Room info"
-    class="mx_AccessibleButton mx_RightPanel_headerButton mx_RightPanel_roomSummaryButton"
+    class="mx_AccessibleButton mx_RoomHeader_button mx_RightPanel_roomSummaryButton"
     role="button"
     tabindex="0"
   />