The admin theme tries to generate an icon class for each menu item.
However in some cases this can cause invalid classnames, that are difficult/impossible to style.
For example one generated classname I encountered was 'toolbar-icon-views-view:views-pages-page'.

This can be easily prevented by passing the classname through the cleanCssIdentifier function. It might even make the previous line of code obsolete. I have added a patch that fixes this.

CommentFileSizeAuthor
#6 admin_toolbar_invalid_class_names-2931503-1.patch861 bytesj3ll3nl
admin_toolbar_invalid_classnames.patch1009 bytesk3vin_nl

Comments

K3vin_nl created an issue. See original summary.

Buvaneshwari.V’s picture

Buvaneshwari.V commented
Assigned: Unassigned » Buvaneshwari.V

@K3vin_nl,

The above patch is working fine.

Buvaneshwari.V’s picture

Buvaneshwari.V commented
Assigned: Buvaneshwari.V » Unassigned
Buvaneshwari.V’s picture

Buvaneshwari.V commented
Status: Active » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, admin_toolbar_invalid_classnames.patch, failed testing. View results

j3ll3nl’s picture

j3ll3nl
he / him
Primary language Dutch
Location Rotterdam
commented
StatusFileSize
new admin_toolbar_invalid_class_names-2931503-1.patch861 bytes

Hereby the git diff version for this patch for use in drupal-composer project composer.json.

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented
Version: 8.x-1.21 » 8.x-1.x-dev
Status: Needs work » Reviewed & tested by the community

This looks good, thanks for the patch.

  • emerya committed ffb149f on 8.x-1.x authored by K3vin_nl 
    Issue #2931503 by K3vin_nl: Admin toolbar generates invalid class names

eme credited emerya.

eme’s picture

eme commented
Status: Reviewed & tested by the community » Fixed

Thanks for the report and the patch !

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Christopher Riley’s picture

Christopher Riley commented

I am still getting an invalid class name losing the total control dashboard icon.

Class Generated System Toolbar (this one works)
toolbar-icon toolbar-icon-total-control-menu-link:system-total-control-dashboard

Class Generated With Admin Toolbar (this one doesn't work)
toolbar-icon toolbar-icon-total-control-menu-linksystem-total-control-dashboard

Notice the colon missing between link and system?

Is this something that Total Control Dashboard needs to address or something Admin Toolbar needs to address?

Thanks in advance.

joelpittet’s picture

joelpittet
he/him
Primary language English
Location Vancouver
commented

colons have special meaning in CSS and shouldn't be used as identifiers. So probably something that total control needs to address