From e01d47923d599cccb5d124107cbe343501c09d3e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 16 May 2023 15:42:58 +0000 Subject: [PATCH] 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 | 8 +- cypress/e2e/threads/threads.spec.ts | 2 +- res/css/structures/_RightPanel.pcss | 82 ------------------- res/css/views/rooms/_RoomHeader.pcss | 48 +++++++++++ .../views/right_panel/HeaderButton.tsx | 6 +- .../views/right_panel/RoomHeaderButtons.tsx | 4 +- .../right_panel/RoomHeaderButtons-test.tsx | 4 +- .../RoomHeaderButtons-test.tsx.snap | 8 +- 8 files changed, 61 insertions(+), 101 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index b4c73532d4..1073c123e9 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/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("be.visible") - .should("have.css", "height", "32px") - .should("have.css", "width", "32px"); - cy.get(".mx_RightPanel_headerButton") - .should("have.length", 3) + .should("have.length", 6) .should("be.visible") .should("have.css", "height", "32px") .should("have.css", "width", "32px"); diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 08e93af7ad..335c87bc01 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/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 diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 1c34a46e07..71c9860764 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/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; diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index c351791fea..b6d1e8b749 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/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; diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 03106face2..5c6559262c 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -45,9 +45,9 @@ export default class HeaderButton extends React.Component { const { isHighlighted, isUnread = false, onClick, name, title, ...props } = this.props; const classes = classNames({ - mx_RightPanel_headerButton: true, - mx_RightPanel_headerButton_highlight: isHighlighted, - mx_RightPanel_headerButton_unread: isUnread, + "mx_RoomHeader_button": true, + "mx_RoomHeader_button--highlight": isHighlighted, + "mx_RoomHeader_button--unread": isUnread, [`mx_RightPanel_${name}`]: true, }); diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx index 0826548664..4cc292e263 100644 --- a/src/components/views/right_panel/RoomHeaderButtons.tsx +++ b/src/components/views/right_panel/RoomHeaderButtons.tsx @@ -64,14 +64,14 @@ const UnreadIndicator: React.FC = ({ 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 ( <> -
+
); diff --git a/test/components/views/right_panel/RoomHeaderButtons-test.tsx b/test/components/views/right_panel/RoomHeaderButtons-test.tsx index fa9f19e861..0399a6ae75 100644 --- a/test/components/views/right_panel/RoomHeaderButtons-test.tsx +++ b/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); diff --git a/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap index ed5acd4886..83a35431e8 100644 --- a/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomHeaderButtons-test.tsx.snap @@ -5,14 +5,14 @@ exports[`RoomHeaderButtons-test.tsx should render 1`] = `