sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix spacing in user status dropdown (#34589)

Browse Source 
* Exploration of a virtuoso-powered emoji picker

moved to shared components

Fable generated

* fix pnpm lock

* format & fix some lint issues

* wrong import

* fix lint warning

* Fix off-by-one

and remove manual overflow adjustment: let's leave the default unless
it turns out to be necessary. Emoji should not take that long to load.

* Convert to functional component

* WIP: change to one big virtuoso scroller

* Change to use virtuoso's own onRangeChanged

and santitise category data and how it's passed around

* Convert Tabs to functional component

and put the focusing behaviour back with it just keeping track of
refs by itself.

* Absorb two line config file into main component

* Actually add the config to the main file

* Convert emoji to functional

Also make selected always defined and use useCallback.

* QuickReactions to functional component

* Non-default exports & doc

* Search to functional component

* Well it seems to work just fine now

* Use ref prop

* fix lockfile AGAIN

* lint

* Remove default export

* Remove some mx_ classnames and fix the inputRef

to make the arrow keys in the search box work (well, work as much as
they ever did).

* Remove last of the mx_ id / classnames

(except the one in the test)

* Use useMemo to memoize

* No need to export props interface (I think?)

and fix comment now we don't do the mutation stuff anymore

* Fix test

* Fix axe violations & add screenshots

* Avoid comparing dom snapshots in test

* Allow more before or after, just compare order of the ones present in both.

* Switch existing usages to new emoji picker

and kill the old one with fire

* Unused stuff

* Remove i18n strings

* Fix some tests

* Update screenshots

* Fix test

by removing the last of the weird memoized-but-mutated data structure

* Experimental custom status

* Screenshot

* snapshots

* Update button label and fix test

* Move the string somewhere more sensible than 'a11y'

* i18n lint

* Give the emojis IDs so aria-activedescendant works

* Fix more tests

* Add a small wrapper emoji picker component

This lets us easily memoize the recent emojis when the emoji picker is opened.
Also it saves a bit of boilerplate.

* Remove old emojipicker css

* Typos

Co-authored-by: David Langley <davidl@element.io>

* Use compound constants

* Rethemendex

* Test for custom status

* Use catalog version for emojibase

* Add comments

* More comments

* Fix comment

* More comments

* more comments (and make them uniform)

* More comments

* Fix pnpm lock again

* Another comment

* Add option to hide quick reactions (and preview) bar

* Fix test

to use emoji not in the quick reactions bar

* Apply button types to new version

* Add comment

* Disable screenshot

as per comment

* Fix hover / background / border styles

* Screenshot

* Don't use the reactions row because it's gone now

* Fix spacing in user status dropdown

Updates to renderItem based Dropdown, allowing the item in the dropdown
to be customised.

Requires https://github.com/element-hq/compound-web/pull/538 (and
will be required to update to the version of compound it gets
released in).

* Update to new compound

* snapshots

* Fix tests

---------

Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
This commit is contained in:
David Baker
2026-08-10 15:20:29 +00:00
committed by GitHub
co-authored by Will Hunt David Langley
parent 3a7be0d3a9
commit 3a196c7722
6 changed files with 173 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+96 -12
View File
@@ -345,7 +345,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
💬 In a meeting
<span
class="SetStatusView-module_dropdownEmoji"
>
💬
</span>
<span>
In a meeting
</span>
</li>
<li
@@ -353,7 +360,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
💡 Focus Time
<span
class="SetStatusView-module_dropdownEmoji"
>
💡
</span>
<span>
Focus Time
</span>
</li>
<li
@@ -361,7 +375,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
🚙 On the road
<span
class="SetStatusView-module_dropdownEmoji"
>
🚙
</span>
<span>
On the road
</span>
</li>
<li
@@ -369,7 +390,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
☕️ Be right back
<span
class="SetStatusView-module_dropdownEmoji"
>
☕️
</span>
<span>
Be right back
</span>
</li>
<li
@@ -377,7 +405,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
🌴 Away
<span
class="SetStatusView-module_dropdownEmoji"
>
🌴
</span>
<span>
Away
</span>
</li>
<li
@@ -385,7 +420,14 @@ exports[`UserMenu > renders a menu without an avatar 1`] = `
role="option"
tabindex="0"
>
✍️ Custom…
<span
class="SetStatusView-module_dropdownEmoji"
>
✍️
</span>
<span>
Custom…
</span>
</li>
</ul>
@@ -779,7 +821,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
💬 In a meeting
<span
class="SetStatusView-module_dropdownEmoji"
>
💬
</span>
<span>
In a meeting
</span>
</li>
<li
@@ -787,7 +836,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
💡 Focus Time
<span
class="SetStatusView-module_dropdownEmoji"
>
💡
</span>
<span>
Focus Time
</span>
</li>
<li
@@ -795,7 +851,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
🚙 On the road
<span
class="SetStatusView-module_dropdownEmoji"
>
🚙
</span>
<span>
On the road
</span>
</li>
<li
@@ -803,7 +866,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
☕️ Be right back
<span
class="SetStatusView-module_dropdownEmoji"
>
☕️
</span>
<span>
Be right back
</span>
</li>
<li
@@ -811,7 +881,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
🌴 Away
<span
class="SetStatusView-module_dropdownEmoji"
>
🌴
</span>
<span>
Away
</span>
</li>
<li
@@ -819,7 +896,14 @@ exports[`UserMenu > renders an open menu 1`] = `
role="option"
tabindex="0"
>
✍️ Custom…
<span
class="SetStatusView-module_dropdownEmoji"
>
✍️
</span>
<span>
Custom…
</span>
</li>
</ul>
packages/shared-components/src/status/SetStatusView.module.css
+4
View File
@@ -30,3 +30,7 @@ Please see LICENSE files in the repository root for full details.
font-weight: var(--cpd-font-weight-medium);
font-size: var(--cpd-font-size-body-md);
}
.dropdownEmoji {
margin-right: var(--cpd-space-1-5x);
}
packages/shared-components/src/status/SetStatusView.test.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ class SetStatusViewModel extends MockViewModel<SetStatusViewSnapshot> implements
*/
async function openCustomEditor(): Promise<void> {
await userEvent.click(screen.getByRole("combobox"));
await userEvent.click(screen.getByRole("option", { name: "✍️ Custom…" }));
await userEvent.click(screen.getByRole("option", { name: "✍️Custom…" }));
}
describe("SetStatusView", () => {
packages/shared-components/src/status/SetStatusView.tsx
+33 -22
View File
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, useState } from "react";
import React, { type JSX, useState, useCallback } from "react";
import { Dropdown, type DropdownTriggerProps, Link, Text } from "@vector-im/compound-web";
import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -15,16 +15,17 @@ import { StatusPillView } from "./StatusPillView";
import { CustomStatusView } from "./CustomStatusView";
import styles from "./SetStatusView.module.css";
const PRESET_STATUSES = [
{ emoji: "💬", textKey: _td("status|set_status|in_a_meeting") },
{ emoji: "💡", textKey: _td("status|set_status|focus_time") },
{ emoji: "🚙", textKey: _td("status|set_status|on_the_road") },
{ emoji: "☕️", textKey: _td("status|set_status|be_right_back") },
{ emoji: "🌴", textKey: _td("status|set_status|away") },
];
// Sentinel value used to distinguish the "Custom…" dropdown entry from a preset.
const CUSTOM_STATUS_VALUE = "custom";
const STATUSES = {
in_a_meeting: { emoji: "💬", textKey: _td("status|set_status|in_a_meeting") },
focus_time: { emoji: "💡", textKey: _td("status|set_status|focus_time") },
on_the_road: { emoji: "🚙", textKey: _td("status|set_status|on_the_road") },
be_right_back: { emoji: "☕️", textKey: _td("status|set_status|be_right_back") },
away: { emoji: "🌴", textKey: _td("status|set_status|away") },
custom: { emoji: "✍️", textKey: _td("status|set_status|custom") },
};
type StatusValue = keyof typeof STATUSES;
// No need to keep recompyuting this, it won't change
const STATUS_KEYS = Object.keys(STATUSES) as StatusValue[];
export interface SetStatusViewSnapshot {
/**
@@ -58,10 +59,25 @@ export type SetStatusViewProps = {
vm: SetStatusViewModel;
};
function StatusOption({ value }: { value: StatusValue }): React.ReactNode {
return (
<>
<span className={styles.dropdownEmoji}>{STATUSES[value].emoji}</span>
<span>{_t(STATUSES[value].textKey)}</span>
</>
);
}
export function SetStatusView({ vm }: SetStatusViewProps): JSX.Element {
const { userStatus } = useViewModel(vm);
const [customMode, setCustomMode] = useState(false);
const renderItem = useCallback((value: StatusValue | null): React.ReactNode => {
if (value === null) return null;
return <StatusOption value={value} />;
}, []);
if (userStatus) {
return <StatusPillView status={userStatus} clearStatus={vm.clearStatus} />;
}
@@ -97,13 +113,13 @@ export function SetStatusView({ vm }: SetStatusViewProps): JSX.Element {
return trigger;
};
const onValueChange = (value: string): void => {
if (value === CUSTOM_STATUS_VALUE) {
const onValueChange = (value: StatusValue): void => {
if (value === "custom") {
setCustomMode(true);
return;
}
const status = PRESET_STATUSES.find((s) => s.textKey === value);
const status = STATUSES[value];
if (!status) {
return;
@@ -115,20 +131,15 @@ export function SetStatusView({ vm }: SetStatusViewProps): JSX.Element {
});
};
const dropdownValues: Array<[string, string]> = [
...PRESET_STATUSES.map((s): [string, string] => [s.textKey, `${s.emoji} ${_t(s.textKey)}`]),
[CUSTOM_STATUS_VALUE, `✍️ ${_t("status|set_status|custom")}`],
];
return vm.onSetStatusClick ? (
renderTrigger({ onClick: vm.onSetStatusClick })
) : (
<Dropdown
values={dropdownValues}
<Dropdown<StatusValue>
values={STATUS_KEYS}
label={null}
placeholder={null}
trigger={renderTrigger}
onValueChange={onValueChange}
renderItem={renderItem}
/>
);
}