Problem/Motivation
After upgrading to RC6, "dropbutton" at all "small" and "extrasmall" dropdowns are not rendered correctly (see 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.
Comment | File | Size | Author |
---|---|---|---|
#22 | Screenshot 2023-09-06 at 12.13.08.png | 84.4 KB | sergiur |
#17 | interdiff_15-17.txt | 6.46 KB | djsagar |
#17 | 3384362-17.patch | 7.62 KB | djsagar |
#15 | 3384362-15-dropbutton-size.patch | 2.21 KB | Alexander Tallqvist |
#14 | gin-claro-var.patch | 4.39 KB | jmouse888 |
Issue fork gin-3384362
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:
Comments
Comment #3
roshni27 CreditAttribution: roshni27 at Valuebound for Valuebound commentedI am currently unable to reproduce the issue you mentioned.
Comment #4
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedDoes you have base theme claro?
Comment #5
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedComment #6
jmouse888 CreditAttribution: jmouse888 as a volunteer commentedYes 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.
Thanks for the help.
Comment #7
Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commentedI 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.
Comment #8
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedHi, I got the error and will work to solve it.
Comment #9
erikbrgn CreditAttribution: erikbrgn at Axis Communications AB commentedI'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.
Comment #10
Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commentedI 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.
Comment #11
jmouse888 CreditAttribution: jmouse888 as a volunteer commentedOkay, 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.
Comment #13
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedHi 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.
Comment #14
jmouse888 CreditAttribution: jmouse888 as a volunteer commentedSorry. 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.
Comment #15
Alexander Tallqvist CreditAttribution: Alexander Tallqvist at Siili Solutions commentedTrue, 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.
Comment #16
saschaeggiDrupal 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
we can do
see also https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_proper...
Comment #17
djsagar CreditAttribution: djsagar at OpenSense Labs commentedHi all,
Patch updated as per suggested changes by @saschaeggi in #16.
Please review.
Comment #18
saschaeggiThanks @djsagar
Moving this back to needs work as the patch from includes unwanted code style changes.
Comment #19
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedHi all, I have opened merge request to solve this issue.
Please review and verify.
Comment #20
shubham_jain CreditAttribution: shubham_jain at Virasat Solutions commentedHi all, I have opened merge request to solve this issue.
Please review and verify.
Comment #21
saschaeggiComment #22
sergiurHello! Tried the latest MR and it seems to have solved the issue both small and xsmall dropbuttons:
Comment #23
solideogloria CreditAttribution: solideogloria commentedThe MR works great for me. Thanks.
Comment #24
saschaeggiThanks y'all 👋
Comment #25
solideogloria CreditAttribution: solideogloria commentedComment #26
saschaeggi