New styles for footer actions

[thibaudcolas]

Here are the styles of this specific component:

And more generally of all dropdowns like this: https://www.figma.com/file/h67EsVXdWsfu38WGGxWfpi/Wagtail-Design-System?node-id=1241%3A18660

Ideally we’d only get to this after @wagtail/gsoc-ux-unification has implemented their changes to the JS side of this.

Note for footer actions – there is much more than just the dropdown, we also need to make sure the new styles work with the bulk chooser’s components, and with our dirty form check messages.

As part of this, we could also add this component to the user creation screen to help with #5906. Ideally #7366, #6591, #7650 will have also been fixed.

Sub-tasks:

• Re-implement dropdown buttons with Tippy
• Re-implement bulk actions + button styles according to new designs
• Include styleguide improvements for warning buttons Dark mode maintenance improvements #10449 (comment)

[thibaudcolas]

This should ideally involve fixing #6591.

[ForJessicaSake]

Hi @thibaudcolas I was wondering if this is still open for anyone to work on?

[thibaudcolas]

Hi @ForJessicaSake, yep, I don’t think anyone else has worked on this.

[ForJessicaSake]

Okay great, I’ll work on it can you please assign it to me @thibaudcolas 😊 thank you!

[lb-]

@ForJessicaSake we do not assign issues (outside of core team) so feel free to just start on this.

[ForJessicaSake]

Okay noted, I’ll do just that

[thibaudcolas]

Hi @ForJessicaSake, can you let us know where you got to with this? Please let us know if you have any questions.

[Seremba]

Hi @ForJessicaSake are you still working on this please?

[Seremba]

Hi @thibaudcolas, is anyone working on this issue?

[lb-]

@Seremba feel free to give this a go as we have not heard back from @ForJessicaSake for some time.

[Seremba]

Hi, @thibaudcolas @lb- would you mind pointing me to the file for these changes?

[lb-]

@Seremba have a look at this PR - it touches the same area of the UI.

#9643

However, it's good to learn how to find these things yourself. The best way is to look at the CSS classes in the DOM and search through the code in your editor.

[thibaudcolas]

I’ve done quite a bit of the work on this in #11456 – the footer actions code is much simpler now, so should be easier for us to complete this ticket. There were a few snags:

• The proposed widths for the sticky actions would mean a lot more wrapping of text to two lines for languages longer than english (so I stopped at 310px rather than the 250px in the designs)
• The designs in Ben’s original screenshot here have too low contrast between the footer actions background and the page background in my opinion. Not sure this is an actual issue but I found it hard on the eye to not know exactly what part of the page was sticky and what was within. Something I’d like to discuss at least.
• The footer actions also need adapting for the page / snippet revisions’ "review" mode.

See #11456 for a few screenshots.

And more generally:

• Those styles need to work for both footer actions on "forms", and bulk actions. Currently we only have designs for very simple "form" footer actions, while the bulk actions are more complex visually
• We need to make sure the footer actions also support having text within, the "unsaved page data" warning and also meta text for bulk actions.

---

Another snag was that footer actions markup currently is copy-pasted all over the place, with lots of inconsistencies. So as part of completing this I think we need to refactor the code to have an implementation that’s easier to reuse. Particularly in the context of #9869.

[thibaudcolas]

Assigning back to @benenright for a review of how we can tweak the designs to complete this, based on my notes above. Here are specific problem scenarios that might warrant design changes.

Footer actions with warning message

Bulk actions

Bulk actions with "Select all" link

Demo page: images listing – this link only appears only listings with more items than the listing can show.

[benenright]

I think that we should keep the background indigo, as I don't think there is much value in trying to make a light background work behind these actions, and the potential usability issues outway the original intention...

The original intention was to reduce the visual weight of the form footer actions - being something that sticks on the browser bottom edge, it felt like this was worth trying. But in the context of the bulk actions, that only appear once triggered by selecting a checkbox, the dark background helps users to notice it, and if we move to a lower contrast background, it risks them not being noticed (some usability testing we did a while back showed that some users expected these bulk actions to appear at the top of the listing (as per Gmail for eg), but since the indigo bg was high contrast with the page bg, people did notice it at bottom).

I do think it would be worth revisiting how we ensure good contrast for this type of panel specifically in dark mode (as the low contrast means we likely have that usability issue where people don't notice it appear):

[thibaudcolas]

@benenright I forgot one other variation on footer actions, which is used when viewing a past version of a page:

This is testable on this past revision demo page. Could you give us design guidance for that as well?

---

re bulk actions, anecdotally we received related feedback from low-vision users (though it’s low on details so I’m following up):

Given the page layout it wasn’t immediately apparent that it was possible to affect the pages from the list view