Updating to USWDS 2.0.1 #421

jaredcunha-usds · 2019-03-03T00:03:10Z

Big changes between alpha and beta, so this update will allow teams to build more closely to the documentation in USWDS 2.0 when it's ready for release.

I still need to write tasks for preserving theme customizations (they are overwritten by USWDS gulp task)

Two outstanding items I'd like to cover:

1) how to handle deprecation in jekyll

DEPRECATION WARNING on line 327 of /Users/jaredcunha/work/website/assets/uswds-sass/core/_variables.scss:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{$font-stack-alt}#{$if-important}")

2) Seeing how USWDS handles .5 system token issue in a future build
uswds/uswds-sandbox#18

What about this?
Do I just let gulp build the CSS instead of Jekyll? That means building CSS locally and having the compiled application.css under version control, but it is that worth the tradeoff? If that is the case, we can get rid of the assets/uswds-sass folder entirely, importing the files from node_modules instead. I'm kinda leaning towards this, and it seems the USWDS team prefers letting gulp build the CSS for now.

dmethvin-gov · 2019-03-28T19:06:39Z

On the Jekyll SASS build problem: I can fix it by adding a line to _variables.css in $number-to-value that says '.5': '05', but of course that's inside USWDS files. I tried adding the needed entry to $number-to-value right after the include of _variables.css in application.scss but that didn't work, I think because the function that needs it (unit()) is called later in that file.

I can make a PR to USWDS to see if they'll accept it, not sure if there are some negative implications in there but it seems like our best bet.

jaredcunha-usds · 2019-03-28T19:31:22Z

It'd be cool if you can submit a PR, but maybe if we update the file in the project and import that instead of uswds file? At least until they fix?

The only reason I have those scss files is to use the variables and function.s

dmethvin-gov · 2019-03-29T14:32:37Z

@jaredcunha-usds I was going to make a PR but I can't find $number-to-value in the USWDS code. Can you find it?

jaredcunha-usds · 2019-03-29T14:43:31Z

@dmethvin-gov is this what you're look for?

website/assets/uswds-sass/core/_variables.scss

Line 96 in c76070f

$number-to-value: (

dmethvin-gov · 2019-03-29T14:54:15Z

That's copied by the website setup from node_modules though, right? I can make a PR here in our website repo to change it but it will be clobbered when USWDS 2.0 arrives. I was looking for the place in USWDS. It only seems to appear in the /dist files, I can find it here in 2.0.0-beta6 but it looks totally different here in the develop branch.

jaredcunha-usds · 2019-03-29T16:42:40Z

I think the first link you sent is closest to the right place. I don't know where they are taking PRs, but perhaps you can ask the TTS channel? I think that develop branch is a sort dev staging branch for work on v1.x.

dmethvin-gov · 2019-03-29T17:16:41Z

Found it, I think. I'll make a PR against this and if I'm wrong I'll discuss with them there.
https://github.com/uswds/uswds/blob/release-2.0/src/stylesheets/core/_variables.scss

dmethvin-gov · 2019-03-29T18:27:24Z

The fix should be in USWDS 2.0, yay! 🎉 uswds/uswds#3008

jaredcunha-usds · 2019-03-29T18:35:56Z

This is awesome, Dave! That has been bugging me for ages! I’ll go ahead and grab that file on work that into my branch. From: "Dave Methvin (USDS)" <notifications@github.com> Reply-To: usds/website <reply@reply.github.com> Date: Friday, March 29, 2019 at 2:27 PM To: usds/website <website@noreply.github.com> Cc: "Cunha, Jared C. EOP/OMB" <Jared_C_Cunha@omb.eop.gov>, Mention <mention@noreply.github.com> Subject: Re: [usds/website] DO NOT MERGE - Setting up for future USWDS updates (#421) The fix should be in USWDS 2.0, yay! 🎉 uswds/uswds#3008<uswds/uswds#3008> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#421 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AYQcmYTbmr4yPopbiVqJb4HzPMQVrvZIks5vblsSgaJpZM4basWa>.

update package and css overrides/changes sort of working, swithching variables update breakpoints remove test accordion updating css remove uneccesary variables create task to update without overwriting theme files clean old gulp files reorganize uswds src files, remove uneccessary files update gulpfile and scss package.json update

jaredcunha-usds · 2019-04-19T14:18:46Z

@dmethvin-gov I think this is ready to merge now. I've removed some of the unused utilities, which saved around 50KB in CSS from the uswds.css file. I've made updates to the job application form in salesforce to support the USWDS changes. I was using pages/form.html to test that. I'll keep that in if you want to want to take a look, but I'll remove it before I merge this pull.

dmethvin-gov · 2019-04-19T14:40:19Z

Thanks! I'll take a look! It's my first real look at USWDS 2.0 so it may take a day or two.

dmethvin-gov

Wow, those were a lot of class renames!

What is your feeling on committing all the font binaries? Are they all coming from USWDS and only referenced from their [S]CSS? If so can we just have the build process copy them to the theme directory rather than putting them in the repo?

Are all the files in assets also copied from various dependencies, or are they "ours"? If they are unchanged from a dependency it would be nicer to just copy them there as with fonts. I don't know if Jekyll has a way to do that but can look into it if you want.

dmethvin-gov · 2019-04-19T15:31:05Z

README.md


-#### Update USDS and get new functions and tokens
+1. Compile usds.css `gulp uswds-build-sass`
+2. Run Jekylll `bundle exec jekyll serve`


Only two ls in Jekyll 😸

dmethvin-gov · 2019-04-19T15:35:31Z

README.md

+1. Update the USWDS version in `package.json`
+2. Install the package `npm install`
+2. Compile usds.css `gulp uswds-build-sass`
+3. Run Jekylll `bundle exec jekyll serve`


dmethvin-gov · 2019-04-19T15:40:03Z

README.md

-## Adding Content
-* [How to add people](https://github.com/usds/website/wiki/Adding-People-(carousel-and-pages))
-* [How to add projects](https://github.com/usds/website/wiki/Adding-projects-(carousel-and-pages))
+**Before you do this**: The USWS Sass uses many of the USWDS functions and tokens. While the USWDS.css is already compiled, the site relies on Jekyll to compile the Sass files. There is currently an issue with Jekyll the way it handles `.5` spacing tokens. [See here](https://github.com/uswds/uswds-sandbox/issues/18). **A fix has been merged, but still waiting to be deployed.**


Did this make it into 2.0.0 or 2.0.1?

Gah! It did it. I had this in two places. Must have missed that.

dmethvin-gov · 2019-04-19T15:42:31Z

README.md

+Use this to patch any display bugs through updates to USWDS.
+
+1. Update the USWDS version in `package.json`
+2. Install the package `npm install`


The first two steps can be done as npm install --save-dev *new-USWDS-version-number*

dmethvin-gov · 2019-04-19T15:43:18Z

README.md

+This will will update some of the scss files in `assets/uswds-sass`, but will not overwrite any of your files in `assets/uswds-theme`.
+
+1. Update the USWDS version in `package.json`
+2. Install the package `npm install`


npm install --save-dev *new-USWDS-version-number*

dmethvin-gov · 2019-04-19T16:43:56Z

assets/stylesheets/application.scss

@@ -45,3 +62,5 @@
 @import "utilities-add-ons/display";
 @import "utilities-add-ons/flex";
 @import "utilities-add-ons/position";
+
+@import "shame/salesforce";


Is this file supposed to be empty?

This is part of that salesforce test form. I'm going to remove this before I merge it.

dmethvin-gov · 2019-04-19T16:50:56Z

assets/stylesheets/base/_base.scss

@@ -1,18 +1,20 @@
 html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  font-size: 100%;
+  font-family: family('body');


This is a much nicer way to do the font sizing!

I still prefer this because it makes the math easier, but USWDS 2.0 doesn't seem to play as nicely with it.

html { font-size: 10px; } body { font-size: 1.7rem; }

assets/stylesheets/components/_nav.scss

assets/stylesheets/components/_who-we-help.scss

assets/uswds-sass/core/_base.scss

jaredcunha-usds · 2019-04-19T23:44:00Z

@dmethvin-gov Yeah, this ended being a much larger effort than I anticipated, but it works! I tackled a few of your suggestions, but some of them were on files copied over via gulp from dependencies. Please see my responses for those.

What is your feeling on committing all the font binaries? Are they all coming from USWDS and only referenced from their [S]CSS? If so can we just have the build process copy them to the theme directory rather than putting them in the repo?

They're all moved over the gulp file. This is actaully from the USWDS team, but I'm open to changing at some point. I don't think this should affect performance, but it does make for a large commit.

Are all the files in assets also copied from various dependencies, or are they "ours"? If they are unchanged from a dependency it would be nicer to just copy them there as with fonts. I don't know if Jekyll has a way to do that but can look into it if you want.

It's a mix of "ours" and what's copied from a dependency. They are unchanged except for the uswds-theme files. Unfortunately, GitHub pages build process only allows for a plain Jekyll setup, so those files have be committed. I would really love to clean this up at some point, because it would make repo a heck of a lot cleaner.

jaredcunha-usds force-pushed the uswds-update branch from 32dcde3 to 0f6e83a Compare March 7, 2019 15:02

jaredcunha-usds force-pushed the uswds-update branch from 0f6e83a to b590f5e Compare March 27, 2019 18:22

jaredcunha-usds force-pushed the uswds-update branch from c76070f to ab8cada Compare March 29, 2019 18:34

jaredcunha-usds force-pushed the uswds-update branch from ab8cada to c690eb0 Compare March 29, 2019 19:14

jaredcunha-usds added 8 commits April 16, 2019 11:00

install uswds beta 7

947abd7

beta 7 class updates, gulp build process

857c416

add uswds .5 fix

60fefd6

uswds 2.0.1

232e6ff

apply usa-prose to fix type styles

5ccc7ea

outline button

d40f977

update accordion classes

cffe885

jaredcunha-usds force-pushed the uswds-update branch from c690eb0 to cffe885 Compare April 16, 2019 15:01

jaredcunha-usds added 7 commits April 16, 2019 11:08

get new settings files from 2.0.1

4971d0b

readme update

1ebbea6

updating design issues

702f559

CSS updates for the web form

dcc1cac

successful form test

ac130e6

update utils and readme

0108004

remove unused utilities, update readme

48515a8

jaredcunha-usds changed the title ~~DO NOT MERGE - Setting up for future USWDS updates~~ Updating to USWDS 2.0.1 Apr 19, 2019

dmethvin-gov suggested changes Apr 19, 2019

View reviewed changes

remove extra semicolons, readme fixes, remove empty css file

78e74df

dmethvin-gov approved these changes Apr 22, 2019

View reviewed changes

jaredcunha-usds merged commit 8f4fe77 into master Apr 22, 2019

lisac-usds deleted the uswds-update branch September 24, 2020 22:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updating to USWDS 2.0.1 #421

Updating to USWDS 2.0.1 #421

jaredcunha-usds commented Mar 3, 2019 •

edited

dmethvin-gov commented Mar 28, 2019

jaredcunha-usds commented Mar 28, 2019

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019

dmethvin-gov commented Mar 29, 2019 •

edited

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019 via email

jaredcunha-usds commented Apr 19, 2019

dmethvin-gov commented Apr 19, 2019

dmethvin-gov left a comment

dmethvin-gov Apr 19, 2019

dmethvin-gov Apr 19, 2019

dmethvin-gov Apr 19, 2019

jaredcunha-usds Apr 19, 2019

dmethvin-gov Apr 19, 2019

dmethvin-gov Apr 19, 2019

dmethvin-gov Apr 19, 2019

jaredcunha-usds Apr 19, 2019

dmethvin-gov Apr 19, 2019

jaredcunha-usds Apr 19, 2019

jaredcunha-usds commented Apr 19, 2019

Updating to USWDS 2.0.1 #421

Updating to USWDS 2.0.1 #421

Conversation

jaredcunha-usds commented Mar 3, 2019 • edited

dmethvin-gov commented Mar 28, 2019

jaredcunha-usds commented Mar 28, 2019

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019

dmethvin-gov commented Mar 29, 2019 • edited

dmethvin-gov commented Mar 29, 2019

jaredcunha-usds commented Mar 29, 2019 via email

jaredcunha-usds commented Apr 19, 2019

dmethvin-gov commented Apr 19, 2019

dmethvin-gov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredcunha-usds commented Apr 19, 2019

jaredcunha-usds commented Mar 3, 2019 •

edited

dmethvin-gov commented Mar 29, 2019 •

edited