PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Change formatting buttons behavior (#9715)

Browse source 
Change formatting buttons behaviour
This commit is contained in:
Florian Duros 2022-12-07 12:13:35 +01:00 committed by GitHub
parent 254815cbcf
commit 7943f83858
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
View file

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

5
src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
View file

@ -48,7 +48,10 @@ function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps)
onClick={onClick} onClick={onClick}
title={label} title={label}
className={ 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} />} tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
alignment={Alignment.Top} alignment={Alignment.Top}
/>; />;

16
test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
View file

@ -75,4 +75,20 @@ describe('FormattingButtons', () => {
// Then // Then
expect(await screen.findByText('Bold')).toBeTruthy(); 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');
});
}); });