Simplify Composer buttons (#7678)

* Render a CollapsibleButton's children (needed by UploadButton)

* Make UploadButton ready to live inside an overflow menu

* Always show overflow menu in composer: main buttons are emoji and attach

* Re-order composer buttons as per design

* Re-word composer button captions to be simple nouns

* Don't rotate More options button when clicked

* Move the composer menu and dialogs 16px in from right

* Reduce shadow on composer More menu

* From review: remove else clause

* From review: take input out of button

* Update test snapshots

* Update snapshots
This commit is contained in:
Andy Balaam 2022-02-02 09:30:53 +00:00 committed by GitHub
parent c011fb7475
commit f5226f9d5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 110 additions and 98 deletions

View file

@ -34,23 +34,45 @@ const MessageComposerButtons = TestUtils.wrapInMatrixClientContext(
);
describe("MessageComposerButtons", () => {
it("Renders all buttons in wide mode", () => {
it("Renders emoji and upload buttons in wide mode", () => {
const buttons = wrapAndRender(
<MessageComposerButtons
isMenuOpen={false}
narrowMode={false}
showLocationButton={true}
showStickersButton={true}
toggleButtonMenu={() => {}}
/>,
);
expect(buttonLabels(buttons)).toEqual([
"Create poll",
"Upload file",
"Share location",
"Add emoji",
"Show Stickers",
"Send voice message",
"Emoji",
"Attachment",
"More options",
]);
});
it("Renders other buttons in menu in wide mode", () => {
const buttons = wrapAndRender(
<MessageComposerButtons
isMenuOpen={true}
narrowMode={false}
showLocationButton={true}
showStickersButton={true}
toggleButtonMenu={() => {}}
/>,
);
expect(buttonLabels(buttons)).toEqual([
"Emoji",
"Attachment",
"More options",
[
"Sticker",
"Voice Message",
"Poll",
"Location",
],
]);
});
@ -61,11 +83,12 @@ describe("MessageComposerButtons", () => {
narrowMode={true}
showLocationButton={true}
showStickersButton={true}
toggleButtonMenu={() => {}}
/>,
);
expect(buttonLabels(buttons)).toEqual([
"Upload file",
"Emoji",
"More options",
]);
});
@ -82,13 +105,13 @@ describe("MessageComposerButtons", () => {
);
expect(buttonLabels(buttons)).toEqual([
"Upload file",
"Emoji",
"More options",
[
"Create poll",
"Share location",
"Add emoji",
"Send a sticker",
"Attachment",
"Sticker",
"Poll",
"Location",
],
]);
});