Change formatting buttons behavior (#9715)

Change formatting buttons behaviour

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -53,7 +53,9 @@ limitations under the License.
             height: var(--size);
             border-radius: 5px;
         }
+    }
 
+    .mx_FormattingButtons_Button_hover {
         &:hover {
             &::after {
                 background: rgba($secondary-content, 0.1);

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -48,7 +48,10 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
         onClick={onClick}
         title={label}
         className={
-            classNames('mx_FormattingButtons_Button', className, { 'mx_FormattingButtons_active': isActive })}
+            classNames('mx_FormattingButtons_Button', className, {
+                'mx_FormattingButtons_active': isActive,
+                'mx_FormattingButtons_Button_hover': !isActive,
+            })}
         tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
         alignment={Alignment.Top}
     />;

test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx

@@ -75,4 +75,20 @@ describe('FormattingButtons', () => {
         // Then
         expect(await screen.findByText('Bold')).toBeTruthy();
     });
+
+    it('Should not have hover style when active', async () => {
+        // When
+        const user = userEvent.setup();
+        render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
+        await user.hover(screen.getByLabelText('Bold'));
+
+        // Then
+        expect(screen.getByLabelText('Bold')).not.toHaveClass('mx_FormattingButtons_Button_hover');
+
+        // When
+        await user.hover(screen.getByLabelText('Underline'));
+
+        // Then
+        expect(screen.getByLabelText('Underline')).toHaveClass('mx_FormattingButtons_Button_hover');
+    });
 });