Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit cd23ca0

Browse files
floriandurosflorianduros
committed
Update formating buttons
1 parent 2e97230 commit cd23ca0

File tree

4 files changed

+37
-52
lines changed

4 files changed

+37
-52
lines changed

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

-17
Original file line numberDiff line numberDiff line change
@@ -63,20 +63,3 @@ limitations under the License.
6363
color: $tertiary-content;
6464
}
6565
}
66-
67-
.mx_FormattingButtons_Tooltip {
68-
padding: 0 2px 0 2px;
69-
70-
.mx_FormattingButtons_Tooltip_KeyboardShortcut {
71-
color: $tertiary-content;
72-
73-
kbd {
74-
margin-top: 2px;
75-
text-align: center;
76-
display: inline-block;
77-
text-transform: capitalize;
78-
font-size: 12px;
79-
font-family: Inter, sans-serif;
80-
}
81-
}
82-
}

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

+25-33
Original file line numberDiff line numberDiff line change
@@ -30,57 +30,49 @@ import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icon
3030
import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg";
3131
import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg";
3232
import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg";
33-
import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
34-
import { Alignment } from "../../../elements/Tooltip";
35-
import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
36-
import { KeyCombo } from "../../../../../KeyBindingsManager";
3733
import { _t } from "../../../../../languageHandler";
38-
import { ButtonEvent } from "../../../elements/AccessibleButton";
34+
import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
3935
import { openLinkModal } from "./LinkModal";
4036
import { useComposerContext } from "../ComposerContext";
37+
import { IS_MAC, Key } from "../../../../../Keyboard";
38+
import { ALTERNATE_KEY_NAME } from "../../../../../accessibility/KeyboardShortcuts";
4139

42-
interface TooltipProps {
43-
label: string;
44-
keyCombo?: KeyCombo;
45-
}
46-
47-
function Tooltip({ label, keyCombo }: TooltipProps): JSX.Element {
48-
return (
49-
<div className="mx_FormattingButtons_Tooltip">
50-
{label}
51-
{keyCombo && (
52-
<KeyboardShortcut value={keyCombo} className="mx_FormattingButtons_Tooltip_KeyboardShortcut" />
53-
)}
54-
</div>
55-
);
56-
}
57-
58-
interface ButtonProps extends TooltipProps {
40+
interface ButtonProps {
5941
icon: ReactNode;
6042
actionState: ActionState;
6143
onClick: MouseEventHandler<HTMLButtonElement>;
44+
label: string;
45+
shortcut?: string;
6246
}
6347

64-
function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): JSX.Element {
48+
function Button({ label, shortcut, onClick, actionState, icon }: ButtonProps): JSX.Element {
6549
return (
66-
<AccessibleTooltipButton
50+
<AccessibleButton
6751
element="button"
6852
onClick={onClick as (e: ButtonEvent) => void}
69-
title={label}
53+
aria-label={label}
7054
className={classNames("mx_FormattingButtons_Button", {
7155
mx_FormattingButtons_active: actionState === "reversed",
7256
mx_FormattingButtons_Button_hover: actionState === "enabled",
7357
mx_FormattingButtons_disabled: actionState === "disabled",
7458
})}
75-
tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
76-
forceHide={actionState === "disabled"}
77-
alignment={Alignment.Top}
59+
title={actionState === "disabled" ? undefined : label}
60+
caption={shortcut}
61+
placement="top"
7862
>
7963
{icon}
80-
</AccessibleTooltipButton>
64+
</AccessibleButton>
8165
);
8266
}
8367

68+
/**
69+
* Get the shortcut string for a given key.
70+
* @param key
71+
*/
72+
function getShortcutFromKey(key: string): string {
73+
return (IS_MAC ? "⌘" : _t(ALTERNATE_KEY_NAME[Key.CONTROL])) + "+" + key;
74+
}
75+
8476
interface FormattingButtonsProps {
8577
composer: FormattingFunctions;
8678
actionStates: AllActionStates;
@@ -94,21 +86,21 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
9486
<Button
9587
actionState={actionStates.bold}
9688
label={_t("composer|format_bold")}
97-
keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
89+
shortcut={getShortcutFromKey("B")}
9890
onClick={() => composer.bold()}
9991
icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
10092
/>
10193
<Button
10294
actionState={actionStates.italic}
10395
label={_t("composer|format_italic")}
104-
keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
96+
shortcut={getShortcutFromKey("I")}
10597
onClick={() => composer.italic()}
10698
icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
10799
/>
108100
<Button
109101
actionState={actionStates.underline}
110102
label={_t("composer|format_underline")}
111-
keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
103+
shortcut={getShortcutFromKey("U")}
112104
onClick={() => composer.underline()}
113105
icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
114106
/>
@@ -155,7 +147,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
155147
<Button
156148
actionState={actionStates.inlineCode}
157149
label={_t("composer|format_inline_code")}
158-
keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
150+
shortcut={getShortcutFromKey("E")}
159151
onClick={() => composer.inlineCode()}
160152
icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
161153
/>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ limitations under the License.
1515
*/
1616

1717
import React from "react";
18-
import { cleanup, render, screen } from "@testing-library/react";
18+
import { cleanup, render, screen, waitFor } from "@testing-library/react";
1919
import userEvent from "@testing-library/user-event";
2020
import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
2121

@@ -135,7 +135,7 @@ describe("FormattingButtons", () => {
135135
const { label } = testCase;
136136

137137
await userEvent.hover(screen.getByLabelText(label));
138-
expect(screen.getByText(label)).toBeInTheDocument();
138+
await waitFor(() => expect(screen.getByText(label)).toBeInTheDocument());
139139
}
140140
});
141141

‎test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap

+10
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ exports[`FormattingButtons renders in german 1`] = `
88
<button
99
aria-label="Fett"
1010
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
11+
data-state="closed"
1112
role="button"
1213
tabindex="0"
1314
>
@@ -18,6 +19,7 @@ exports[`FormattingButtons renders in german 1`] = `
1819
<button
1920
aria-label="Kursiv"
2021
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
22+
data-state="closed"
2123
role="button"
2224
tabindex="0"
2325
>
@@ -28,6 +30,7 @@ exports[`FormattingButtons renders in german 1`] = `
2830
<button
2931
aria-label="Unterstrichen"
3032
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
33+
data-state="closed"
3134
role="button"
3235
tabindex="0"
3336
>
@@ -38,6 +41,7 @@ exports[`FormattingButtons renders in german 1`] = `
3841
<button
3942
aria-label="Durchgestrichen"
4043
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
44+
data-state="closed"
4145
role="button"
4246
tabindex="0"
4347
>
@@ -48,6 +52,7 @@ exports[`FormattingButtons renders in german 1`] = `
4852
<button
4953
aria-label="Ungeordnete Liste"
5054
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
55+
data-state="closed"
5156
role="button"
5257
tabindex="0"
5358
>
@@ -58,6 +63,7 @@ exports[`FormattingButtons renders in german 1`] = `
5863
<button
5964
aria-label="Nummerierte Liste"
6065
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
66+
data-state="closed"
6167
role="button"
6268
tabindex="0"
6369
>
@@ -68,6 +74,7 @@ exports[`FormattingButtons renders in german 1`] = `
6874
<button
6975
aria-label="Zitieren"
7076
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
77+
data-state="closed"
7178
role="button"
7279
tabindex="0"
7380
>
@@ -78,6 +85,7 @@ exports[`FormattingButtons renders in german 1`] = `
7885
<button
7986
aria-label="Code"
8087
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
88+
data-state="closed"
8189
role="button"
8290
tabindex="0"
8391
>
@@ -88,6 +96,7 @@ exports[`FormattingButtons renders in german 1`] = `
8896
<button
8997
aria-label="Quelltextblock"
9098
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
99+
data-state="closed"
91100
role="button"
92101
tabindex="0"
93102
>
@@ -98,6 +107,7 @@ exports[`FormattingButtons renders in german 1`] = `
98107
<button
99108
aria-label="Link"
100109
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
110+
data-state="closed"
101111
role="button"
102112
tabindex="0"
103113
>

0 commit comments

Comments
 (0)