Problem
The current settings tray dialog CSS is fairly messy, with resets scattered around the codebase. It's very hard to style elements within the dialog, and unintentional styles also tend to leak in (see overrides within Claro and Olivero)
See
Solution(s)
Proper resets
We can do proper resets by using a combination of all: revert, :where(), and selector arguments of :not(). For example the following modern CSS can replace several hundred lines of code, and be more resilient at the same time.
#drupal-off-canvas *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *)) {
all: revert;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
&:after,
&:before {
all: revert;
box-sizing: border-box;
}
}
Make it theme-able
Right now, it’s a real pain if we want to change the look and feel of the setting tray. Modern CSS can let us fix that.
#drupal-off-canvas-wrapper {
--off-canvas-background-color: #444;
--off-canvas-text-color: #ddd;
--off-canvas-button-background-color: blue;
--off-canvas-button-text-color: white;
--off-canvas-text-size: 14px;
--off-canvas-spacing-unit: 8px;
--off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
Benefits
There are tons of benefits of refactoring
- Less code (we may be able to delete the CK5 “fence”)
- More resilient code (if a new element is introduced (eg
dialog), we don’t have to add it)
- Easily theme-able (admin themes and distributions will likely take advantage of this)
- Easier to understand, which will lead to more innovation
Testing instructions
Testing for this isn’t as terrible as it seems. The patch is large (over 200k) and has over 50 commits. Looking at the diffs will be difficult because of the styles moving around.
Tugboat link: https://3291797-off-canvas-6-ggpezyyiyfqyuna635hb6gpahwycstwb.tugboatqa.....
Ping me in Drupal Slack (or here) for admin credentials to test.
To test:
- Create a custom block with as many different types of form elements as you can (tabledrag, autocomplete, select, etc).
- Enable a content type to use Layout Builder and enable customization of each node.
- Create a node of that content type and go to the layout tab
- Add a your custom block. Try this out in different browsers. Try it out in different core themes.
- Verify lists of items look good. Note that link colors are not accessible. This will be a followup issue.
- To test dropbuttons, enable the core settings tray module, and then use the settings tray to re-order the primary menu
- Test the workspace module (which uses a top horizontal off-canvas dialog) by enabling the Workspace module creating several workspaces, and testing the UI
Draft release note
The off-canvas dialog’s CSS has been completely refactored in Drupal 10.0.0. This means that if your module or theme previously implemented custom CSS for the off-canvas dialog, it may need to be re-implemented (or removed if it was solely bug fixes).
