Unwanted additional styling from Claro

Created on 28 June 2024, 6 months ago
Updated 27 August 2024, 4 months ago

Problem/Motivation

When editing the layout of a page, additional styling from Claro is applied to elements on the page being edited.

For example:
Extra bulletpoints are added everywhere (to our main menu for example) due to styling from css/components/menus-and-lists.css

.item-list ul li,
.menu-item {
  list-style-type: disc;
  list-style-image: none;
}

This wasn't an issue before, but appeared after recent updates on our sites using layout builder.
After some digging to see where the issue came from, it seems this addition to src/HookHandler/PageAttachments.php, introduced in gin_lb 1.0.0-rc7 to fix issue 🐛 Link widget dropdown style broken Fixed , is the culprit:

$attachments['#attached']['library'][] = 'claro/global-styling';

Proposed resolution

If only the variables.css file is needed to fix the link widget, can it not be included in a way that does not also add any of the (unnecessary) component styling also contained in Claro's global-styling?

🐛 Bug report
Status

Active

Version

1.0

Component

User interface

Created by

🇧🇪Belgium steven.d

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @steven.d
  • 🇦🇺Australia dpi Perth, Australia

    One noticable thing that can clash with common frontend conventions is its bringing in Claro's css/components/button.css via claro/global-styling. This CSS file has a `.button` class, with quite a lot of properties.

    When in a Gin Layout Builder edit page, buttons on the page can go out of whack because of this common class name.

    Even things like CKEditor5's stylescombo, which is built into core, can bring in bad classes if a `button` class was allowed.

  • 🇦🇺Australia dpi Perth, Australia

    Link in IS

  • 🇦🇺Australia dpi Perth, Australia
Production build 0.71.5 2024