Implement page editor redesign for widget styles and forms layout

[thibaudcolas]

Includes #8318 (rebased). Fixes multiple issues (see below). This PR refactors and re-implements almost all of Wagtail’s form styles, in particular:

• Rendering of individual widgets / field types
• Layout of the different types of panels within the page editing UI (and similar UIs such as snippets, as well as completely unrelated UIs that reuse the same styles, such as workflows creation and the dashboard)
• Rendering of filters, which reuse the same widgets

There are a few notable exceptions:

• A lot of forms still use <ul class="fields"> markup and the field_as_li.html, even though it’s not appropriate for a form to be a list. I’ve left those as-is in the interest of time, but hope to get to them in a future refactoring.
• Buttons are left untouched, even though they’re an important part of our form styles. They’re being worked on separately by @PaarthAgarwal.

And notable additions:

• Ability for sections to add custom icons
• {% panel %}, {% field_row %} and {% field %} block-level template tags, which should make it easier for us to avoid duplicating this form/field markup everywhere.

Fixes

• Collapsible panels in edit UIs are impossible to open or close with keyboards or screen readers #7332
• Contrast themes – Radio buttons :checked and unchecked look identical #8828
• Contrast themes – Switch :checked and unchecked look identical #8829
• Select widget in admin does not render correctly #4063
• Wagtail's labels for inputs need to take 100% width instead of current 16.67% #5125
• Styling - Streamfield blocks editing interface styling #2888
• Want ability to set placeholder text separately from label in fields #2328
• comments icon overlap with field help text #7715
• feature request: label for FieldPanel #4471
• Unable to horizontally scroll input fields in admin on safari mobile. #3676
• Rich text field overlaps with sidebar #6556
• Red fields in UI give error impression  #6476
• Let admin fields span full width when there is no help text #2305
• Partial - Page Editor Rendering Issues - Orderables/InlinePanels, with Comments, etc. #7971
• Progress on Phase out icon font and use SVG everywhere #6107
• Progress on Review and replace usage of float layouts in admin UI for RTL support #8126.

---

Since this refactoring is such an enormous task, I’ve spent the time to set up a detailed test plan (see below), and also further list tasks / changes which are intentionally not part of this.

Remaining page editor form tasks

Before Wagtail 4 final release

• [ ] Panel icons: documentation, review default icons, unit tests
• Docs review: FieldRowPanel’s col1, col2, etc. classes
• Rich text field top/bottom padding
• [ ] Consistent application of heading_size=label for panel components
• Select text alignment / top padding (Firefox)
• [ ] Field focus styles

Out of scope for this PR, status TBD

• Chooser widgets
• StreamField
• Draftail toolbars
• Footer actions dropdown
• New comments side panel

November 2022 release refactorings

• Forms refactoring: remove field_as_li.html
• Forms refactoring: replace <ul class="fields"> with forms rendering shared template.
• Forms refactoring: move form-related templates to forms subfolder
• Forms refactoring: move account layout styles to avatar-panel component
• Forms refactoring: remove unused inline, block, inline-block utilities
• Forms refactoring: switch field modifiers from snake_case to TitleCase (CheckboxSelectMultiple, same as Python)
• Remove IE11 and Safari 13 references from developing docs
• Remove unneeded box-sizing border-box

Backlog

• Fix / review comments visibility for fields within collapsed panel

Test plan

Here are my recommended parts of the Wagtail UI to look at:

• Dashboard
• User’s account/profile edit form
• Images/documents multiple upload
• Page edit/create form, in particular with comments

EverythingPage

Branch: thibaudcolas/bakerydemo:tree/feature/everything-page (including database)

This is based on a previous PR which added all the possible types of StreamField blocks. In addition, this adds a EverythingPage page model which has fields of almost all types available in Wagtail/Django, and Wagtail panel definitions of almost all types. There are a few missing – notably Django multi-field form widgets that are rarely used, and Wagtail widgets only used in filters (such as ButtonSelect).

In the database, I’ve made three copies of this page:

• One live, for safekeeping
• One draft, with comments
• One draft + in moderation, with comments

---

Here are the different panels, panel/field customisations, and widget types to test. There are a few I haven’t tested (didn’t seem simple enough to test to warrant the setup).

Panels

• FieldPanel
• MultiFieldPanel
• InlinePanel
• PageChooserPanel
• FieldRowPanel
• HelpPanel
• PageChooserPanel
• FormSubmissionsPanel
• heading
• min_num
• max_num (untested)
• help_text

Field customisations

• Full-Width Input (.full) (no longer does anything)
• Title field (.title)
• Collapsible (.collapsible) (default, no longer does anything)
• Collapsed (.collapsed)
• Placeholder Text
• Required field
• Hidden field (editable=False) (untested)

Widgets

• Wagtail
  • AdminAutoHeightTextInput
  • Button (untested)
  • ButtonWithDropdown (untested)
  • ButtonSelect
  • BooleanButtonSelect
  • AdminPageChooser
  • AdminDateInput (last)
  • AdminTimeInput
  • AdminDateTimeInput
  • FilteredSelect
  • SwitchInput
  • AdminTagWidget
  • DateRangePickerWidget
  • DraftailRichTextArea
  • StreamField
  • AdminImageChooser
  • AdminSnippetChooser
  • AdminDocumentChooser
  • AdminTaskChooser (untested)
• Django
  • TextInput
  • NumberInput
  • EmailInput
  • URLInput
  • PasswordInput
  • HiddenInput (untested)
  • DateInput
  • DateTimeInput
  • TimeInput
  • Textarea
  • CheckboxInput
  • Select
  • NullBooleanSelect (untested)
  • SelectMultiple
  • RadioSelect
  • CheckboxSelectMultiple
  • FileInput
  • ClearableFileInput (untested)
  • MultipleHiddenInput (untested)
  • SplitDateTimeWidget (untested)
  • SplitHiddenDateTimeWidget (untested)
  • SelectDateWidget (untested)

Wagtail baseline test plan

Cross-browser testing:

• Safari iOS 15 iPhone SE 2022
• Safari iOS 14 iPad Pro
• Chrome Android 10 Galaxy S20
• Chrome 103 macOS 12.14
• MS Edge 103 Windows 11
• Firefox 102 macOS 12.4
• Firefox ESR (Firefox 102 currently)
• Safari 15.5 macOS 12.4
• Safari 14.1 macOS Big Sur

Assistive tech:

• VoiceOver
• High contrast mode
• Magnification

[lb-]

Read through styles so far. Have not run locally but hopefully have some useful feedback.

[lb-]

Note: Updated the description so that issues fixed are shown with their full title.

[lb-]

Getting some issues with date fields overlapping

Something to to with display grid on .w-field-row

https://www.whatsmybrowser.org/b/TXK9N

[lb-]

Chosen image (preview image) does not have correct vertical height.

Looks like a conflict of the new styles with preview-image having float left.
Note the margin underneath but the 'gap' before the next element is quite tight.

[lb-]

Vertical alignment of select box appears off

https://www.whatsmybrowser.org/b/TXK9N
.w-field__input select.

[lb-]

StreamField input value in error state - not getting red outline

Parent has w-field--error but does not appear to be used for StreamField, it's also possible that the root cause is StreamField is not correctly setting aria-invalid.

File client/src/components/StreamField/blocks/FieldBlock.js -> I think around line 129 maybe we could add this here?

[lb-]

Looks incredible @thibaudcolas - the feedback I have so far is all I can probably do today, I have not gone through every single field type yet, but have read through code at least 1.5 times and started some smoke testing on Firefox (my preferred browser).