initial draft of reworked selection menu

[mal-tee]

What do you think of a reworked selection menu for my-request? I propose something like this:

NEW:

OLD:

TODO:

• the buttons are not perfectly centered, the padding at the right is bigger
• is there a smarter way to include HTML elements like spans into translated strings? the fields of the <Text> elements do not render elements
• i18n-ify new strings
• deprecate old strings

[cypress]

datenanfragen/website    Run #8687

Run Properties:   Failed #8687  •  22aee53bd5: initial draft of reworked selection menu

Project	datenanfragen/website
Branch Review	m_mrq_selection_m
Run status	Failed #8687
Run duration	07m 09s
Commit	22aee53bd5: initial draft of reworked selection menu
Committer	mal-tee
View all properties for this run ↗︎

---

Test results
Failures	4
Flaky	1
Pending	8
Skipped	0
Passing	80
View all changes introduced in this branch ↗︎

---

Tests for review

  company-database/search.spec.js • 1 failed test

View Output Video

Test		Artifacts
Search for company by slug and visit company detail page > Search for and visit 1&1 single page		Screenshots Video

  components/proceedings.spec.js • 3 failed tests

View Output Video

Test		Artifacts
Proceedings page > can delete selected proceedings		Screenshots Video
Proceedings page > can mark selected proceedings as done and reactivate them		Screenshots Video
Proceedings page > can mark selected proceedings as abandoned and reactivate them		Screenshots Video

  cypress/e2e/company-database/search-bar.spec.js • 1 flaky test

View Output

Test		Artifacts
Search bar should not be shown iff the `privacy_control-search` cookie is set to `false` > Search bar shown when cookie is not set		Screenshots

[baltpeter]

is there a smarter way to include HTML elements like spans into translated strings? the fields of the <Text> elements do not render elements

If it isn't too complex, you can put the HTML into the translation files and use <MarkupText> instead of <Text>.

[baltpeter]

Thanks for having a go at this! I agree that we should try to tidy this up and make it more… scannable and I like your idea. However, I think it's a little unconventional, unfortunately. Afaik, this doesn't exist as a UX pattern anywhere else and might end up being more confusing to users. Plus, the labels ("Selection CSV export", "Selection mark as done") unfortunately just don't work for this. I am also worried about accessibility. I don't see how we could assign the "Selection…" label with the other buttons.

I don't have the solution myself, either. But considering your draft gave me a few ideas and thoughts:

• This reminded me of window menus, which can be hierarchical/nested and might have a Selected menu that then has all the other things as sub menus. I think this would be much more conventional and familiar to users. We don't currently have nested menus but I don't think we need them, either.

  I think the main issue here currently is that icon-ellipsis already denotes a selection menu (i.e. one, where all actions apply to the selected items) but we're not using it correctly. We also have one unrelated action ("Deselect all") in there. Just moving that outside of the dropdown would already be a major improvement imo.

• If we do that, we don't need the <hr> you introduced to distinguish between stuff that belongs in the menu and stuff that doesn't anymore, but can instead use it for some logical grouping of related actions. That should break up the actions nicely and make it easier to find the one you're looking for.

• I am not sure whether shortening the labels is a good idea. This absolutely makes them more scannable, but I do think it comes with quite a significant loss of clarity.

• The inline pills are pretty cool. I was recently reminded of old Apple HIGs and this is very reminiscent of that. :D

  My instinct would be to style the full button (like you did with "delete") instead, which I think is a lot more common these days. But I'm not sure. Maybe your approach is better in this case.