Problem/Motivation

The JQuery UI source files for widgets include special annotations to indicate css dependencies that are not js dependencies. The Checkboxradio and Selectmenu widgets are the only two instances where this occurs.

The source contains special markup that is parsed by a custom library, builder-jquery-css. This process is done by jqueryui.com's download page, which provides final jquery-ui.css and jquery-ui.js which compile all the required files into the download.

Use builder-jquery-css to generate the CSS bundle of a jQuery project that uses JS comments like //>> css.<name>: files to define its CSS dependencies and that uses AMD definitions to define its JS dependencies.

The two above widgets are the only cases where this happens. The other widgets either depend on the js module or use it conditionally when a the item is present.

This is a similar issue to whats found in #2926155, but is not directly related to the AMD requirements missing there. It does bring up the same desire for an automated way to manage the jQuery UI dependencies to prevent this from being lost in a future version update.

Proposed resolution

Core doesn't meet the relevant dependencies in core.libraries.css. This results in cases where Checkboxradio widget getting rendered without the relevant css for ui-button class, which the widget will added to the element.

CommentFileSizeAuthor
#11 Selection_001.png107.41 KBMaheshwaran.j
#8 2933980-8-without-patch.PNG1.21 KBrichgerdes
#8 2933980-8-with-patch.PNG1.13 KBrichgerdes
#5 Selection_001.png30.85 KBMaheshwaran.j
#5 Selection_005.png112.96 KBMaheshwaran.j
#5 selection-1.png25.48 KBMaheshwaran.j
#2 2933980-jquery-ui-css-dependencies-2.patch665 bytesrichgerdes
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

richgerdes created an issue. See original summary.

richgerdes’s picture

richgerdes
he/him
Primary language English
Location New Jersey, USA
CreditAttribution: richgerdes commented
Status: Active » Needs review
FileSize
2933980-jquery-ui-css-dependencies-2.patch665 bytes

The attached patch fixes the two missing dependencies in core.libraries.yml.

richgerdes’s picture

richgerdes
he/him
Primary language English
Location New Jersey, USA
CreditAttribution: richgerdes commented
Related issues: +#2926155: Follow-up to #2809427: update from jQuery UI 1.11.4 to 1.12.1 forgot to list some new JS files in *.libraries.yml
Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Assigned: Unassigned » Maheshwaran.j
Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Assigned: Maheshwaran.j » Unassigned
Status: Needs review » Reviewed & tested by the community
FileSize
selection-1.png25.48 KB
Selection_005.png112.96 KB
Selection_001.png30.85 KB

Hi richgerdes

I have applied your patch and it applies cleanly to 8.5.x version. However,the checkboxradio widget does not have class ui-radIo when i created a field for a content-type. Please find the attached screenshots.

Here are the steps I followed.

Applied patch
Cleared cache
Added a field and changed checkbox/radios in manage form display for a content type.
Checked in admin.

Correct me, if I am wrong as I'm pretty much new to contribution and reviewing in Drupal community.

Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Status: Reviewed & tested by the community » Needs review
Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Status: Needs review » Needs work
richgerdes’s picture

richgerdes
he/him
Primary language English
Location New Jersey, USA
CreditAttribution: richgerdes commented
FileSize
2933980-8-with-patch.PNG1.13 KB
2933980-8-without-patch.PNG1.21 KB

@maheshwaran,

Thanks for taking a look so quickly.

I may have left out a few tidbits that are helpful, for those who did not spend a day reading the jQuery source.

The widget i am referring to is NOT a drupal field widget, its a jQuery UI widget. Which are not actually used anywhere within fields to my knowledge, I could not fine a contrib module that provided them. Ultimately, Core does include the source code for the jQuery UI widgets for us by other modules and theme projects. The lack of a JQuery UI Field Widgets module is saddening over all, since it makes debugging this hard.

I came across this problem when working with the Webform module, which provides a number of ui elements for use in forms which do use these jQuery UI widgets files. Until i can find an example of usage in core is to show the issue through webforms. Here are the steps to follow:

1) Install a fresh Drupal Site (core > 8.4 in order to have jQueryUI 1.12.1)
2) Uninstall the Quick Edit module. - It provides an edit dialog which requires the complete ui-button widget via dependency.
3) Install a Webforms module version 8.x-5.0-rc1 (Since the development version now as a shim.) and enable webform and and webform_ui.
4) Create a new webform and add a Buttons element.
5) View the webform.

Here are screen caps of the widget with and without the patch:
Before patch:
Screenshot showing missing css.

After patch:
Screenshot showing correct css.

Hopefully this provides more information about the exact problem.

You took the right approach when reviewing this issue, my only comment be try and reduce the number of comments using the preview feature (Something i fail at too), but otherwise your doing well. Glad your getting involved!

richgerdes’s picture

richgerdes
he/him
Primary language English
Location New Jersey, USA
CreditAttribution: richgerdes commented
Status: Needs work » Needs review
Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Assigned: Unassigned » Maheshwaran.j
Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
FileSize
Selection_001.png107.41 KB

Hi richgerders

I'm so sorry about the blunder I made. thanks for providing a detailed info for reviewing

1) Install a fresh Drupal Site (core = 8.5 in order to stick with the issue queue) Sorry :P
2) Install a Webforms module version 8.x-5.0-rc1and enable webform and webform_ui.
3) Create a new web form and add a Buttons element.
4) View the web form.

It works like a charm. :)

Note: I did not uninstall quick-edit I just want to know whether it worked with quick edit enabled, as this feature is new and cool Drupal feature.

Changing status to RTBC.

Maheshwaran.j’s picture

Maheshwaran.j CreditAttribution: Maheshwaran.j as a volunteer and at DrupalPartners for Innoppl Technologies Pvt. Ltd commented
Assigned: Maheshwaran.j » Unassigned
Status: Needs review » Reviewed & tested by the community
richgerdes’s picture

richgerdes
he/him
Primary language English
Location New Jersey, USA
CreditAttribution: richgerdes commented

Thanks for going over it again, no big deal about missing it the first time around. Not sure why quick edit was a problem form me and not you the, but glad we got it tracked down otherwise.

  • larowlan committed 0cfb103 on 8.5.x 
    Issue #2933980 by richgerdes, Maheshwaran.j: JQuery UI CSS dependencies...
larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
CreditAttribution: larowlan at PreviousNext commented
Status: Reviewed & tested by the community » Fixed

I checked the source of the widgets (e.g. https://github.com/jquery/jquery-ui/blob/1.12.1/ui/widgets/checkboxradio.js) and verified that they do indeed include css via parsing comments.

I checked that the other css files mentioned are being loaded, and they are defined in dependencies (snippet)

jquery.ui.checkboxradio:
...
  dependencies:
    - core/jquery.ui
    - core/jquery.ui.widget

jquery.ui:
  ...
  css:
    component:
      assets/vendor/jquery.ui/themes/base/core.css: {} # This one
    theme:
      assets/vendor/jquery.ui/themes/base/theme.css: {} # And this one.
...

Committed as 0cfb103 and pushed to 8.5.x

As per https://www.drupal.org/core/release-cycle-overview#current-development-c... 8.4 is in 'critical fixes only', so this can't be backported to 8.4

Status: Fixed » Closed (fixed)

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