Currently the icon select widget is broken with the new experimental theme Claro.

The icon svg is placed in a weird place.

CommentFileSizeAuthor
#13 icon_select-icon_select_widget_broken_with_claro-3173774-13.patch4.18 KBonfire84
#8 after.png15.92 KBayalon
#8 before.png13.38 KBayalon
#6 3173774-6-claro-styles.patch1.1 KBgrahl
#5 icon_select-claro-styles.patch1.17 KBgrahl
claro_icon_widget.png20.5 KBheikkiy

Issue fork icon_select-3173774

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:

About issue forks

Comments

HeikkiY created an issue. See original summary.

heikkiy’s picture

heikkiy commented

Seems like following styles for Claro seem to fix most of the issues:

.icon-select-wrapper .form-type--checkbox {
  align-items: center;
  display: flex;
  margin-right: 1rem;
}

.icon-select-wrapper .form-checkbox {
  height: 18px; // Claro default checkbox size
}

.icon-select-wrapper .form-item__suffix {
  margin-left: 0;
}
ayalon’s picture

ayalon commented

Please provide a patch, then I can fix the issue upstream.

ayalon’s picture

ayalon commented
Status: Active » Postponed (maintainer needs more info)
grahl’s picture

grahl
he/him
Location Zürich
commented
Status: Postponed (maintainer needs more info) » Needs review
StatusFileSize
new icon_select-claro-styles.patch1.17 KB

We've been using the following in our project (might be too Claro-specific in terms of formatting though).

grahl’s picture

grahl
he/him
Location Zürich
commented
StatusFileSize
new 3173774-6-claro-styles.patch1.1 KB

Updated the paths.

kleiton_rodrigues’s picture

kleiton_rodrigues commented
Assigned: Unassigned » kleiton_rodrigues

I am working on revising this patch.

ayalon’s picture

ayalon commented
StatusFileSize
new before.png13.38 KB
new after.png15.92 KB

Unfortunatly, the patch breaks the styles for the Seven (default) theme.
I cannot merge it without breaking a lot of sites.
Is there a possibility to add some claro specific classes? Is there a wrapper class maybe?

Before:
Before

After:
After

ayalon’s picture

ayalon commented
Status: Needs review » Needs work
kleiton_rodrigues’s picture

kleiton_rodrigues commented
Assigned: kleiton_rodrigues » Unassigned

onfire84 made their first commit to this issue’s fork.

onfire84’s picture

onfire84 commented

As of #8 i see, that we need here a switch to apply the changes only for claro theme.

So i applied a custom css class to the detail wrapper of the forms element, to determine the admin theme context. The class is

admin-theme-[THEMENAME]

This way we can add css for different admin themes separately.
Also i added the css from #6 wrapped in the 'admin-theme-claro' theme class, so it only will be applied for claro.

All those changes can be found in the issue fork 'icon_select-3173774' in branch '3173774-claro-css-fixes'

onfire84’s picture

onfire84 commented
Status: Needs work » Needs review
StatusFileSize
new icon_select-icon_select_widget_broken_with_claro-3173774-13.patch4.18 KB

Added a patch containing the same as the merge request.

onfire84 opened merge request !3

ayalon’s picture

ayalon commented

I like your proposal. Will be committed.

  • ayalon committed 996b9b2 on 8.x-1.x authored by onfire84 
    Issue #3173774 by onfire84, ayalon: Icon select widget broken with Claro
ayalon’s picture

ayalon commented
Status: Needs review » Fixed
ayalon’s picture

ayalon commented
Status: Fixed » Closed (fixed)
dan_metille’s picture

dan_metille commented

@ayalon Sorry to write on a closed issue, but it seems to me that the patch #13 never really was committed. At least the issue is still happening with the last releases (2.0.2, released on 23 June 2022, before you closed this issue). And also the patch is applying without complain, which also means that it is not part of the current release code.