Problem/Motivation

After upgrading to RC6, "dropbutton" at all "small" and "extrasmall" dropdowns are not rendered correctly (see screenshot).

dropbutton screenshot

Steps to reproduce

Looking at the inspector in the browser, I noticed several variables are not defined, causing the final size to be wrong. These variables are Claro theme variables, and somehow not loaded. I'm not using the Claro theme, but it's enabled for Gin in the admin interface.

gin/dist/css/base/gin.css: -webkit-border-start: var(--dropbutton-border-size) solid var(--gin-color-primary) !important;
gin/dist/css/base/gin.css: border-inline-start: var(--dropbutton-border-size) solid var(--gin-color-primary) !important;
gin/dist/css/base/gin.css: width: calc(var(--dropbutton-small-toggle-size) + 1px);
gin/dist/css/base/gin.css: width: calc(var(--dropbutton-extrasmall-toggle-size) + 1px);
gin/styles/base/_dropbutton.scss: border-inline-start: var(--dropbutton-border-size) solid var(--gin-color-primary) !important;
gin/styles/base/_dropbutton.scss: width: calc(var(--dropbutton-small-toggle-size) + 1px);
gin/styles/base/_dropbutton.scss: width: calc(var(--dropbutton-extrasmall-toggle-size) + 1px);

Looking at RC5, there are no calls to those variables, so the dropbuttons are rendered correctly in RC5.

CommentFileSizeAuthor
#22 Screenshot 2023-09-06 at 12.13.08.png84.4 KBsergiur
#17 interdiff_15-17.txt6.46 KBdjsagar
#17 3384362-17.patch7.62 KBdjsagar
#15 3384362-15-dropbutton-size.patch2.21 KBAlexander Tallqvist
#14 gin-claro-var.patch4.39 KBjmouse888
#10 3384362-10-dropbutton-size.patch889 bytesAlexander Tallqvist
#6 Screenshot_2023-08-31_09-43-25.png143.49 KBjmouse888
#3 Screenshot from 2023-08-31 13-09-09.png107.82 KBroshni27
Screenshot_2023-08-30_14-14-57_Original.jpg65.9 KBjmouse888
#3 Screenshot from 2023-08-31 13-08-34.png150.71 KBroshni27

Issue fork gin-3384362

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
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jmouse888 created an issue. See original summary.

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

roshni27’s picture

roshni27 CreditAttribution: roshni27 at Valuebound for Valuebound commented
FileSize
Screenshot from 2023-08-31 13-08-34.png150.71 KB
Screenshot from 2023-08-31 13-09-09.png107.82 KB

I am currently unable to reproduce the issue you mentioned.

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented

Does you have base theme claro?

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented
Assigned: Unassigned » shubham_jain
jmouse888’s picture

jmouse888 CreditAttribution: jmouse888 as a volunteer commented
FileSize
Screenshot_2023-08-31_09-43-25.png143.49 KB

Yes I do have Claro installed. It's at 9.5.10. Also, my default theme is something entirely different. Only using Gin in admin pages.

Here is the error in the browser. Same error on the "--dropbutton-border-size". Nothing in the console.

ss

Thanks for the help.

Alexander Tallqvist’s picture

Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commented

I am experiencing exactly the same issue after upgrading to the RC6 version of the theme. I am also only using Gin as my admin theme, and our main theme is our own custom theme. Claro is also installed at version 9.5.10.

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented

Hi, I got the error and will work to solve it.

erikbrgn’s picture

erikbrgn CreditAttribution: erikbrgn at Axis Communications AB commented

I've looked into this for a bit and this is what I've found:

Claro is a part of core and uses PostCSS for styling. There's a `dropbutton.pcss.css` in Claro which adds the CSS-variables you're talking of, but in the final CSS `dropbutton.css` the variables are missing. There is just an empty `:root` tag with the same comments as in the PostCSS file, but the variables are missing. I'm guessing that this is a PostCSS issue in core, rather than an issue with Gin. However, relying on variables provided by someone else isn't great and can lead to a lot of issues.

Alexander Tallqvist’s picture

Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commented
FileSize
3384362-10-dropbutton-size.patch889 bytes

I quickly threw together this patch since I need it now (basically rolled back to the old values in RC5). Might not be the best way to solve the issue, but it works for me. Personally I don't really have an opinion whether or not the variables from Claro should or should not be used. If you have a better solution, please contribute.

jmouse888’s picture

jmouse888 CreditAttribution: jmouse888 as a volunteer commented

Okay, after fighting with regex for a half hour, finally got a list of variables Gin is calling from other places.

--tabledrag-handle-icon-size
--space-m
--dropbutton-border-size
--dropbutton-small-toggle-size
--dropbutton-extrasmall-toggle-size
--ck-color-toolbar-border
--ck-focus-outer-shadow
--ck-color-text
--ck-color-base-background
--ck-color-image-caption-text
--ck-color-image-caption-background

All of the ck editor variables are loading fine on the node edit interface, so they are good.

the 5 variables from Claro are not getting their values (most likely the PostCSS issue #9 pointed out). I'm comparing these values set in RC5 and generating a patch.

shubham_jain opened merge request !298

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented

Hi everyone, I have solved the issue and created merge request. Because patch file in comment #10 is only for extrasmall button but we also need for small button. One other thing that the patch file for css is extra burden.

So, please review and verify.

jmouse888’s picture

jmouse888 CreditAttribution: jmouse888 as a volunteer commented
FileSize
gin-claro-var.patch4.39 KB

Sorry. That #10 patch, while partially working, is not complete. It only addresses the extrasmall dropdowns, not the small ones, or any of the other variables (border size, table drag icon size etc). Also, there is no need to redefine classes as they are already defined in Claro. Simply commenting out the lines in Gin will make the classes fall back to the Claro declarations. Here is a new patch which will comment out all Claro variable calls.

Alexander Tallqvist’s picture

Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commented
FileSize
3384362-15-dropbutton-size.patch2.21 KB

True, I managed to miss a few variables. On another note - does the "table drag" variable have anything to do with this issue, or should it be fixed somewhere else? If I'm not mistaken, it seems that only the once related to "dropbutton" are relevant (i.e. --dropbutton-border-size, --dropbutton-small-toggle-size and --dropbutton-extrasmall-toggle-size)? To me, #13 seems like a better solution when it comes to this specific issue. I wrote a new patch that targets only the related variables. Thank you for your work so far.

saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi as a volunteer and at GitLab for 1xINTERNET commented
Status: Active » Needs work

Drupal 10 uses CSS Variables in the output. 9.5.10 seems to still convert them to the actual values.

Let's add fallback values to the CSS variables for 9.5.x.

Instead of

.dropbutton__toggle {
  width: calc(var(--dropbutton-small-toggle-size) + 1px);
     }

we can do

.dropbutton__toggle {
  width: calc(var(--dropbutton-small-toggle-size, 2rem) + 1px);
     }

see also https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_proper...

djsagar’s picture

djsagar CreditAttribution: djsagar at OpenSense Labs commented
Status: Needs work » Needs review
FileSize
3384362-17.patch7.62 KB
interdiff_15-17.txt6.46 KB

Hi all,

Patch updated as per suggested changes by @saschaeggi in #16.

Please review.

saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi as a volunteer and at GitLab for 1xINTERNET commented
Status: Needs review » Needs work

Thanks @djsagar

Moving this back to needs work as the patch from includes unwanted code style changes.

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented

Hi all, I have opened merge request to solve this issue.

Please review and verify.

shubham_jain’s picture

shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commented

Hi all, I have opened merge request to solve this issue.

Please review and verify.

saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi as a volunteer and at GitLab for 1xINTERNET commented
Status: Needs work » Needs review
sergiur’s picture

sergiur
he/him
Primary language English
Location London, UK
CreditAttribution: sergiur at Fat Beehive commented
Status: Needs review » Reviewed & tested by the community
FileSize
Screenshot 2023-09-06 at 12.13.08.png84.4 KB

Hello! Tried the latest MR and it seems to have solved the issue both small and xsmall dropbuttons:

screenshot of a Views edit page

solideogloria’s picture

solideogloria CreditAttribution: solideogloria commented
Version: 8.x-3.0-rc6 » 8.x-3.x-dev

The MR works great for me. Thanks.

saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi as a volunteer and at GitLab for 1xINTERNET commented
Status: Reviewed & tested by the community » Fixed

Thanks y'all 👋

solideogloria’s picture

solideogloria CreditAttribution: solideogloria commented
Assigned: shubham_jain » Unassigned
saschaeggi’s picture

saschaeggi
he/him
CreditAttribution: saschaeggi as a volunteer and at GitLab for 1xINTERNET commented
Title: Dropbutton size rendered incorrectly » Dropbutton size rendered incorrectly in Drupal 9.5.x

Status: Fixed » Closed (fixed)

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