New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Constrain prose scope to direct children #2878

Merged
merged 13 commits into from Nov 14, 2018

Conversation

Projects
None yet
1 participant
@thisisdano
Copy link
Member

thisisdano commented Nov 13, 2018

🔍 Preview


This PR changes how prose scope works.

We initially implemented the prose scope (.usa-prose) component to allow unclassed element styling, but only within the scope of .usa-prose. Something like the following:

.usa-prose {
  p { some styles...}
  h1 { some styles...}
  h2 { some styles...}
  h3 { some styles...}
  table { some styles...}
  ul, ol { some styles... }
}

This means any of the elements above within .usa-prose (or within any container contained within usa-prose) will get that styling. Unfortunately, this can cause specificity problems with components that may exist within prose scope — components that specifically do not apply styles to elements.

This PR makes the small change of using the direct child selector on the usa-prose scoped styles to constrain them only to direct children. Something like the following:

.usa-prose > {
  p { some styles...}
  h1 { some styles...}
  h2 { some styles...}
  h3 { some styles...}
  table { some styles...}
  ul, ol { some styles... }
}

This will keep any prose scope styles from leaking into the components on the USWDS site. It also isolates pose scope styles from other components that could be found in a usa-prose container — like callouts, asides, and special tables.

This change requires that you add usa-prose to any container that contains unclassed prose, even if that container is already inside a usa-prose container.

🍏Correct:
Add usa-prose to any containers that contain unclassed prose.

<section class="usa-prose">
  <h1>Section title</h1>
  <p>Some text...</p>
  <div class="grid-row">
    <div class="tablet:grid-col usa-prose">
        <h2>Subheading</h2>
        <p>Some text...</p>
    </div>
    <div class="tablet:grid-col usa-prose">
        <h2>Subheading</h2>
       <p>Some text...</p>
    </div>
  </div>
</section>

Incorrect:
usa-prose will not apply to sections/divs/etc inside a usa-prose container, only to elements that are direct children.

<section class="usa-prose">
  <h1>Section title</h1>
  <p>Some text...</p>
  <div class="grid-row">
    <div class="tablet:grid-col">
        <h2>Subheading</h2>
        <p>Some text...</p>
    </div>
    <div class="tablet:grid-col">
        <h2>Subheading</h2>
       <p>Some text...</p>
    </div>
  </div>
</section>

This requires a bit more markup, but protects against unintended styling.


Fixes #2758
Fixes uswds/uswds-site#652

@thisisdano thisisdano requested a review from uswds/core Nov 13, 2018

@thisisdano thisisdano self-assigned this Nov 13, 2018

@thisisdano thisisdano added the 2.0 label Nov 13, 2018

@thisisdano thisisdano changed the title [WIP] Constrain prose scope to direct children Constrain prose scope to direct children Nov 14, 2018

@thisisdano

This comment has been minimized.

Copy link
Member

thisisdano commented Nov 14, 2018

🍏Checked and confirmed working on uswds-site

@thisisdano thisisdano merged commit cc21a44 into release-2.0 Nov 14, 2018

10 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
federalist-staging/build The build is complete!
Details
federalist/build The build is complete!
Details
security/snyk - examples/browserify/package.json (thisisdano) No new issues
Details
security/snyk - examples/grunt/package.json (thisisdano) No new issues
Details
security/snyk - examples/gulp/package.json (thisisdano) No new issues
Details
security/snyk - examples/node-sass/package.json (thisisdano) No new issues
Details
security/snyk - examples/webpack/package.json (thisisdano) No new issues
Details
security/snyk - package.json (thisisdano) No new issues
Details
security/snyk - package.json (uswds) No manifest changes detected

@thisisdano thisisdano deleted the dw-prose-scope branch Nov 14, 2018

@thisisdano thisisdano referenced this pull request Nov 14, 2018

Merged

2.0.0-beta.4 #2879

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment