'_drupal-7.scss' SCSS from 'ux_styleguide' isn't Sufficiently Targeted [#2416125]

Certain SCSS contained in 'extensions/ux_styleguide/stylesheets/ux_styleguide/drupal/seven/_drupal-7.scss' is causing undesired behavior. Specifically, the 'input[id^="edit-submit"]' selector isn't sufficiently targeted and causes undesired styling of elements on Webform submission pages.

Under on a submission's edit page ('node/[nid]/submission/[sid]/edit'), the styling from '_drupal-7.scss' is applied to any element with an ID beginning with 'edit-submit', including '#edit-submitted-name' and '#edit-submitted-checkbox'. This renders 1) the submissions page confusing and 2) checkboxes and radio buttons unusable on the submission edit page.

I am not familiar with the ux_styleguide, which is located inside the extensions directory. I am unable to find documentation for the ux_styleguide, which makes it difficult to further troubleshoot this issue or to offer a patch.

Why is it necessary to use the 'input[id^="edit-submit"]' selector? Does input[type="submit"] not work?

Comment	File	Size	Author
#8	2416125-8-untargeted-selector--2-0-alpha2.patch	24.57 KB	Chris Burge
#4	2416125-4-untargeted-selector--2-0-alpha2.patch	10.01 KB	Chris Burge
#4	2416125-4-untargeted-selector--dev.patch	21.67 KB	Chris Burge
#1	2416125-ember-webform-submissions-screenshot.png	35.36 KB	Chris Burge

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Chris Burge CreditAttribution: Chris Burge commented 28 January 2015 at 23:01

File	Size
2416125-ember-webform-submissions-screenshot.png	35.36 KB

Comment #2

Chris Burge CreditAttribution: Chris Burge commented 28 January 2015 at 23:03

Title:

ux_styleguide

» '_drupal-7.scss' SCSS from 'ux_styleguide' isn't Sufficiently Targeted

Comment #3

Chris Burge CreditAttribution: Chris Burge commented 29 January 2015 at 19:15

The relevant commits are provided below:

commit 7cb535f5017792c4d20a2d98529951e3f4b94b45
Author: Al Steffen
Date: Tue Oct 15 11:08:16 2013 -0400

Add in the updated extension with new features and better rtl support.

- Added some variables to prevent some legacy spacing issues.
- Make use of more functions ans variables in the ux_styleguide extension.

commit 10f892ce94d4891e1c8d1345ca21f510cc64b787
Author: Al Steffen
Date: Mon Oct 21 14:20:10 2013 -0400

Perform a scrubbing on forms and commons elements to get more comons elements in drupal looking good.

commit 9d92f9a69d2a30779ab08b6c4420052f731fe16a
Author: Al Steffen
Date: Mon Oct 28 16:07:50 2013 -0400

Add in missing commits from the last commit.

Comment #4

Chris Burge CreditAttribution: Chris Burge commented 29 January 2015 at 19:39

File	Size
2416125-4-untargeted-selector--dev.patch	21.67 KB
2416125-4-untargeted-selector--2-0-alpha2.patch	10.01 KB

I am attaching two patches, one for 7.x-2.0-alpha2 and one for 7.x-2.x. The patches remove the 'input[id^="edit-submit"]' selector. These are intended as a hot fix until one of the maintainers can address this issue.

Comment #5

bryanbraun CreditAttribution: bryanbraun commented 24 February 2015 at 22:09

I've tested the 7.x-2.x patch (2416125-4-untargeted-selector--dev.patch) and confirmed that it's working well for my site. +1 on this one.

Comment #6

Bcwald CreditAttribution: Bcwald commented 5 March 2015 at 18:34

Is there a place that this is happening OOTB? I cannot replicate it, though the code looks pretty suspect to me. I just want to be able to see an example to test against it.

Comment #7

Chris Burge CreditAttribution: Chris Burge commented 5 March 2015 at 18:44

@Bcwald - I didn't run into any instances running Ember on a standard Drupal install (Drupal core, Standard install profile, Ember as admin theme) where this styling affected usability. Where I noticed it was when I viewed the edit page for Webform submissions (running Webform 7.x-4.2).

Can you shed any light on 'ux_styleguide'?