Problem/Motivation

The dropbutton CSS is super crufty, overcomplicated, and hard to manage. It uses JS to flip the dropdown when overflowing (this can now be done with CSS).

Proposed resolution

  • Much smaller and simpler CSS.
  • The dropdown is positioned with native CSS instead of JavaScript. migration/js/dropbutton.js is removed. CSS anchor positioning now places the dropdown, and the browser flips it above the button when there isn't room below.
  • The dropdown is no longer cut off by its container. Because it's position: fixed and anchored, overflow: hidden on a parent (table cells, narrow layouts) can't clip it.
  • Variables are scoped to the component. Dropbutton variables now live on .dropbutton instead of :root, and the unused ones are removed.
  • Fewer !importants. There are 2 now instead of 15, and both have a comment saying why they're there.
  • Simpler high-contrast (forced colors) mask colored with currentColor, plus a single buttonText override in forced-colors mode. This replaces the old separate CSS-border chevron, which had its own rotation and margin math for each
  • Better no-JS support. Without JavaScript (@media (scripting: none)), the dropdown opens on hover or keyboard focus.
  • Long menus scroll.
  • The CSS loads only when needed. dropbutton global-styling library to the dropbutton library, so pages without a dropbutton no longer load it.

Testing instructions

This MR simplifies and improves the dropbutton. It removes over half of the CSS, makes sure it only loads when needed, and also deletes JavaScript. It replaces the JS functionality with pure CSS. It has fallback support for non-JS environments, and also improves accessibility.

To test:

  1. Switch to the new branch and clear cache. Verify dropbuttons work as expected.
  2. For a page that shows all variations of dropbuttons, install the Admin Theming Tools module, and install the dropbutton submodule.
  3. Verify that dropbutton looks great and works within the Views UI
  4. Verify the block UI and field UI’s dropbuttons work as expected.
  5. Test in Chromium, Safari, and Firefox
  6. Test in RTL
  7. Test in both dark and light modes.

Notes

  • Notice that if a dropbutton would open and overflow the bottom of the page, it will open to the top.
  • Note that the styles of the dropbutton are not exactly the same. The padding around the exposed link has been standardized with the items in the dropdown. The size of the extrasmall variant has been increased slightly to ensure the trigger button meets 24px, to comply with the WCAG 2.2 AA tap target criteria.

Issue fork drupal-3629673

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

mherchel created an issue. See original summary.

mherchel’s picture

Ai disclosure:

I wrote this code manually, but had Claude review it (and then manually fixed).

mherchel’s picture

Issue summary: View changes

mherchel’s picture

Assigned: Unassigned » mherchel

I'm still working on this (lots of testing and some cleanup)

Todo
- Get rid of .no-touchevents

mherchel’s picture

Issue summary: View changes
mherchel’s picture

Issue summary: View changes
mherchel’s picture

Issue summary: View changes
mherchel’s picture

Assigned: mherchel » Unassigned
Status: Active » Needs review

Ready for review! Testing instructions added.

mherchel’s picture

Title: Refactor dropbutton markup » Refactor dropbutton CSS
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative
StatusFileSize
new18.71 KB
new46.04 KB
new18.9 KB
new46.63 KB

Tested by editing the default content view to have a dropbutton field.

Before

before1

before2

After

after1

after2

Now I do notice some slight differences but I think for the better (correct me if I'm wrong).
The border color seems a little different but I notice it now matches what other dropdowns (not dropbutton) have, for example the "Edit" dropdown on the content view. I think this brings things inline so +1 there.

Same concept for the link and text in the dropbutton, they appear to be different shades but looking at other spots on the page it matches.

Not the best frontend dev (CSS is my kryptonite) but mherchel knows his stuff. Goin to mark.

mherchel’s picture

Yep. there are some visual differences. All improvements, and one accessibility fix (where the trigger previously didn't meet the minimum size per WCAG 2.2. AA)

Thanks for the review!