Upset theme since update to 3.3.1

Created on 28 April 2023, over 1 year ago
Updated 10 May 2023, over 1 year ago

Problem/Motivation

I am using Gin and Gin Toolbar alongside Admin Toolbar

Ever since updating to 3.3.1 today, all of my toolbars have suddenly got a whole lot taller (see labels 1,2,3 below)...

When hovering a top level item to expand, I can 'see' the new button element display as a chevron in addition to the one that used to be there anyway before the update...

This appears to due to the addition of a new <button> element...

πŸ› Bug report
Status

Closed: duplicate

Version

3.0

Component

User interface

Created by

πŸ‡¬πŸ‡§United Kingdom SirClickALot Somerset

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

Comments & Activities

  • Issue created by @SirClickALot
  • πŸ‡ΊπŸ‡ΈUnited States davisben NH

    I'm also seeing this with Gin. It looks like it was introduced in ✨ Tabbing order does not satisfy 508 accessibility requirements Needs review . I'm not sure if the fix should happen here or in Gin.

  • πŸ‡ΊπŸ‡ΈUnited States darrell_ulm

    Also seeing the same thing when applied in dev environment.

  • πŸ‡ΊπŸ‡ΈUnited States jpham

    I also see extra arrow after updating to 3.3.1 (see screen capture https://ibb.co/nrrXVCs ).

  • πŸ‡ΊπŸ‡ΈUnited States marty.true

    I see it only in Gin (which I prefer), but when I switch back to Claro, it is fine.

  • heddn Nicaragua

    I'm seeing the exact same thing as well. Seems like a regression. And given the disruption it is causing, I think this should be be bumped to a major. Hmm, or maybe stay at normal. But it _is_ annoying.

  • πŸ‡ΊπŸ‡ΈUnited States gcb

    Subscribe, this is very annoying ;)

  • πŸ‡ΊπŸ‡ΈUnited States mlncn Minneapolis, MN, USA

    I feel this is major (very hard to use the admin menu!), although maybe it ought to be fixed in Gin Toolbarβ€” which has an issue for it already too: πŸ“Œ [admin_toolbar] 3.3.1 compatibility issues Fixed

    Cross-linking as there definitely should be coordination in the fixing.

  • πŸ‡¬πŸ‡§United Kingdom SirClickALot Somerset

    As a very temporary fix you can just added the following to your /sites/default/files/gin-custom.css file...

    #toolbar-item-administration-tray li button {
      display: none;
    }

    If you have one.

    Connected issue: How to remove newly added blue arrows at top level of menu. ✨ How to remove newly added blue arrows at top level of menu Closed: duplicate

  • πŸ‡©πŸ‡ͺGermany rkoller NΓΌrnberg, Germany

    i don't use the gin theme nor the gin toolbar but in contrast to #5 πŸ› Upset theme since update to 3.3.1 Closed: duplicate i consider the change already problematic in claro. functionally from a keyboard user perspective the changes the issue ✨ Tabbing order does not satisfy 508 accessibility requirements Needs review introduced are important. therefore i would vote against removing those buttons. but I wonder if it wouldn't make more sense to improve the styling of those blue buttons in core in general, since those blue buttons are used on the vertical toolbar when the admin_toolbar is not installed yet? on the vertical toolbar i haven't really noticed those blue buttons, probably one of the reasons i've always avoided using the vertical toolbar, but with the patch introducing those buttons also to the horizontal toolbar i ran into an accessibility related issue personally. my attention is drawn to those blue buttons. it is really really cognitively challenging to focus onto the icons and labels of each menu item in between those blue buttons.
    as a starting point, after noticing those changes the new release of admin_toolbar introduced i've searched a bit on slack and found the comments by @itmaybejj in a thread in the #accessibility channel on the drupal slack. his suggested changes lower the affordance of those buttons and would already solve the stylistic problem from my perspective. or at least they could be take as a starting point how to style those buttons in core?

    but the styling of the buttons that are already used on the vertical toolbar introduced to the

  • πŸ‡¬πŸ‡·Greece tarasiadis

    Same issue for me too.

  • Same over here. Please rollback to 3.3.0 when everything was fine. No apparent error but a dramatic reduction of usability.

  • πŸ‡¬πŸ‡§United Kingdom SirClickALot Somerset

    The update to 3.3.1 involved a database update.
    Can we roll back with confidence?

  • πŸ‡ΊπŸ‡ΈUnited States bobburns

    On Adaptive Theme the admin toolbar cvers the progress bar when installing a new module. I am running Domain Access and have not checked the other domains with their differrent themes

  • πŸ‡¨πŸ‡­Switzerland saschaeggi Zurich

    Gin maintainer here ✌️

    As a quick heads up, we have addressed the admin_toolbar 3.3.1 incompatibility issues directly in Gin with πŸ“Œ [admin_toolbar] 3.3.1 compatibility issues Fixed . It's already available in the latest 8.x-3.x-dev branch and we'll push a new release soon.

    ℹ️ You have two options until we release a new Gin version:
    1. You can stay on/downgrade to admin_toolbar 3.3.0 and Gin 8.x-3.0-rc2 for now (= no change)
    2. Use Gin's 8.x-3.x-dev branch until we file a new release (= includes the fixes to work with 3.3.1)

  • Status changed to RTBC over 1 year ago
  • heddn Nicaragua

    Such a quick turn around on a fix. THANK YOU!

  • πŸ‡―πŸ‡΄Jordan Rajab Natshah Jordan

    Facing the same issue

  • πŸ‡¨πŸ‡¦Canada blainelang

    I saw the same issue in my custom bootstrap theme and just added the following SCSS until this is sorted out.
    /*
    * May 1/2023: Fix for admin_toolbar styling after updating to 3.3.1
    * https://www.drupal.org/project/admin_toolbar/issues/3357166 πŸ› Upset theme since update to 3.3.1 Closed: duplicate
    */

    .toolbar-menu-administration {
    ul.toolbar-menu {
    .menu-item {
    .toolbar-handle {
    vertical-align: top;
    }
    }
    }
    }

  • πŸ‡¨πŸ‡¦Canada lindsay.wils

    Hi. Along the same lines, I am seeing a different css issue appearing after updating.

    admin.toolbar.css
    line 28
    .menu-item a:focus,
    .toolbar .toolbar-icon.toolbar-handle:focus {
    background: #abeae4;
    }

    This line in the css is too generic and should be applied just to the the links in the toolbar, not site wide. Having to override this in the theme doesn't make sense.

    This is obviously only an issue when a user is logged in, but still should be fixed.

    Thanks.

  • Status changed to Closed: duplicate over 1 year ago
  • πŸ‡¨πŸ‡¦Canada adriancid Montreal, Canada

    I'm closing this and I think we should try to fix the problem in ✨ Tabbing order does not satisfy 508 accessibility requirements Needs review . The code was reverted and a new release is coming in a few minutes.

Production build 0.71.5 2024