From 6eaa0395b9767cc83eb3215383f29df0a3caf597 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 10:14:49 -0400 Subject: [PATCH 1/8] Remove unused step indicator styles --- app/assets/stylesheets/_uswds.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss index 112d447f187..f230deaa5c8 100644 --- a/app/assets/stylesheets/_uswds.scss +++ b/app/assets/stylesheets/_uswds.scss @@ -18,7 +18,6 @@ @forward 'usa-process-list'; @forward 'usa-sidenav'; @forward 'usa-skipnav'; -@forward 'usa-step-indicator'; @forward 'usa-tag'; @forward 'uswds-form-controls'; @forward 'uswds-utilities'; From 387f08892f46845bf10531e0b671aa531710383c Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 10:23:29 -0400 Subject: [PATCH 2/8] Split account navigation styles to separate stylesheet --- app/assets/stylesheets/_uswds.scss | 2 -- app/assets/stylesheets/components/_nav.scss | 18 ----------------- app/assets/stylesheets/navigation.css.scss | 22 +++++++++++++++++++++ app/views/layouts/account_side_nav.html.erb | 1 + 4 files changed, 23 insertions(+), 20 deletions(-) create mode 100644 app/assets/stylesheets/navigation.css.scss diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss index f230deaa5c8..3f8fa535cb9 100644 --- a/app/assets/stylesheets/_uswds.scss +++ b/app/assets/stylesheets/_uswds.scss @@ -14,9 +14,7 @@ @forward 'usa-list'; @forward 'usa-media-block'; @forward 'usa-modal'; -@forward 'usa-nav'; @forward 'usa-process-list'; -@forward 'usa-sidenav'; @forward 'usa-skipnav'; @forward 'usa-tag'; @forward 'uswds-form-controls'; diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss index f9b2fad941b..e74a5cabd55 100644 --- a/app/assets/stylesheets/components/_nav.scss +++ b/app/assets/stylesheets/components/_nav.scss @@ -10,21 +10,3 @@ @include u-height(9); } } - -.sidenav-mobile .usa-nav__close { - @include u-display('flex'); - @include u-flex('align-center', 'justify-center'); - @include u-square(6); - @include u-text('primary'); -} - -@media (prefers-reduced-motion) { - // The design system should be responsible for disabling inessential animations when user prefers - // reduced motion. This is not currently implemented, but the style is implemented ad hoc here - // for use in feature specs (see BrowserEmulationHelper#emulate_reduced_motion). - // - // Upstream issue: https://github.com/uswds/uswds/issues/5256 - .usa-nav.is-visible { - animation: none; - } -} diff --git a/app/assets/stylesheets/navigation.css.scss b/app/assets/stylesheets/navigation.css.scss new file mode 100644 index 00000000000..4e3d62cf3f7 --- /dev/null +++ b/app/assets/stylesheets/navigation.css.scss @@ -0,0 +1,22 @@ +@use 'uswds-core' as *; + +@forward 'usa-nav/src/styles'; +@forward 'usa-sidenav/src/styles'; + +.sidenav-mobile .usa-nav__close { + @include u-display('flex'); + @include u-flex('align-center', 'justify-center'); + @include u-square(6); + @include u-text('primary'); +} + +@media (prefers-reduced-motion) { + // The design system should be responsible for disabling inessential animations when user prefers + // reduced motion. This is not currently implemented, but the style is implemented ad hoc here + // for use in feature specs (see BrowserEmulationHelper#emulate_reduced_motion). + // + // Upstream issue: https://github.com/uswds/uswds/issues/5256 + .usa-nav.is-visible { + animation: none; + } +} diff --git a/app/views/layouts/account_side_nav.html.erb b/app/views/layouts/account_side_nav.html.erb index 9fafd48cb8a..d062292cfcb 100644 --- a/app/views/layouts/account_side_nav.html.erb +++ b/app/views/layouts/account_side_nav.html.erb @@ -6,6 +6,7 @@ <%= render 'accounts/mobile_nav' %> <% end %> +<%= stylesheet_tag_once('navigation') %> <%= javascript_packs_tag_once('navigation') %> <%= extends_layout :application, body_class: 'site', disable_card: true, user_main_tag: false do %> From 52efa5e7628c695d08eab0642d4ff152fc71c9cc Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 10:28:24 -0400 Subject: [PATCH 3/8] Move collection styles to document capture --- app/assets/stylesheets/_uswds.scss | 1 - app/javascript/packages/document-capture/styles.scss | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss index 3f8fa535cb9..61c606a04c5 100644 --- a/app/assets/stylesheets/_uswds.scss +++ b/app/assets/stylesheets/_uswds.scss @@ -6,7 +6,6 @@ @forward 'usa-alert'; @forward 'usa-banner'; @forward 'usa-button'; -@forward 'usa-collection'; @forward 'usa-form'; @forward 'usa-header'; @forward 'usa-layout-grid'; diff --git a/app/javascript/packages/document-capture/styles.scss b/app/javascript/packages/document-capture/styles.scss index b2a4c681187..1077e8950ae 100644 --- a/app/javascript/packages/document-capture/styles.scss +++ b/app/javascript/packages/document-capture/styles.scss @@ -1,3 +1,5 @@ +@forward 'usa-collection/src/styles'; + @forward './components/acuant-capture'; @forward './components/acuant-capture-canvas'; @forward './components/acuant-selfie-capture-canvas'; From 9275e2e90304531812916ee7cd0dc23c4872fa98 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 10:29:41 -0400 Subject: [PATCH 4/8] Move modal styles to modal component --- app/assets/stylesheets/_uswds.scss | 1 - app/components/modal_component.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 app/components/modal_component.scss diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss index 61c606a04c5..8e321e13293 100644 --- a/app/assets/stylesheets/_uswds.scss +++ b/app/assets/stylesheets/_uswds.scss @@ -12,7 +12,6 @@ @forward 'usa-link'; @forward 'usa-list'; @forward 'usa-media-block'; -@forward 'usa-modal'; @forward 'usa-process-list'; @forward 'usa-skipnav'; @forward 'usa-tag'; diff --git a/app/components/modal_component.scss b/app/components/modal_component.scss new file mode 100644 index 00000000000..a0b9e35be5e --- /dev/null +++ b/app/components/modal_component.scss @@ -0,0 +1 @@ +@forward 'usa-modal/src/styles'; From c93a669709a965f30f603b17326d757a9d0df77b Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 10:42:11 -0400 Subject: [PATCH 5/8] Reduce application stylesheet budget changelog: Internal, Performance, Reduce size of common application stylesheet --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index c3e18730b32..c201d1b923f 100644 --- a/Makefile +++ b/Makefile @@ -126,7 +126,7 @@ lint_asset_bundle_size: ## Lints JavaScript and CSS compiled bundle size @# and you have no options to split that from the common bundles. If you need to increase this @# budget and accept the fact that this will force end-users to endure longer load times, you @# should set the new budget to within a few thousand bytes of the production-compiled size. - find app/assets/builds/application.css -size -235000c | grep . + find app/assets/builds/application.css -size -215000c | grep . find public/packs/js/application-*.digested.js -size -5000c | grep . lint_migrations: From 473784c643d7c8c67a04f085b82073e1eb028ba4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 11:07:02 -0400 Subject: [PATCH 6/8] Revert "Move modal styles to modal component" This reverts commit 9275e2e90304531812916ee7cd0dc23c4872fa98. --- app/assets/stylesheets/_uswds.scss | 1 + app/components/modal_component.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 app/components/modal_component.scss diff --git a/app/assets/stylesheets/_uswds.scss b/app/assets/stylesheets/_uswds.scss index 8e321e13293..61c606a04c5 100644 --- a/app/assets/stylesheets/_uswds.scss +++ b/app/assets/stylesheets/_uswds.scss @@ -12,6 +12,7 @@ @forward 'usa-link'; @forward 'usa-list'; @forward 'usa-media-block'; +@forward 'usa-modal'; @forward 'usa-process-list'; @forward 'usa-skipnav'; @forward 'usa-tag'; diff --git a/app/components/modal_component.scss b/app/components/modal_component.scss deleted file mode 100644 index a0b9e35be5e..00000000000 --- a/app/components/modal_component.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'usa-modal/src/styles'; From 2e2f5d0f88f01f58d6e3a8183d5201e1b9de3793 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 11:07:57 -0400 Subject: [PATCH 7/8] Bump stylesheet size budget After reverting modal changes, will address separately --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index c201d1b923f..343b43d5e46 100644 --- a/Makefile +++ b/Makefile @@ -126,7 +126,7 @@ lint_asset_bundle_size: ## Lints JavaScript and CSS compiled bundle size @# and you have no options to split that from the common bundles. If you need to increase this @# budget and accept the fact that this will force end-users to endure longer load times, you @# should set the new budget to within a few thousand bytes of the production-compiled size. - find app/assets/builds/application.css -size -215000c | grep . + find app/assets/builds/application.css -size -220000c | grep . find public/packs/js/application-*.digested.js -size -5000c | grep . lint_migrations: From 539a9083b780e5925d1f7798ac4c9bf0641fe8a2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 22 Mar 2024 11:10:21 -0400 Subject: [PATCH 8/8] Rename nav as header --- app/assets/stylesheets/components/{_nav.scss => _header.scss} | 0 app/assets/stylesheets/components/_index.scss | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename app/assets/stylesheets/components/{_nav.scss => _header.scss} (100%) diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_header.scss similarity index 100% rename from app/assets/stylesheets/components/_nav.scss rename to app/assets/stylesheets/components/_header.scss diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss index 76200b99c87..9d275ccc19f 100644 --- a/app/assets/stylesheets/components/_index.scss +++ b/app/assets/stylesheets/components/_index.scss @@ -13,7 +13,7 @@ @forward 'hr'; @forward 'language-picker'; @forward 'modal'; -@forward 'nav'; +@forward 'header'; @forward 'page-heading'; @forward 'profile-section'; @forward 'personal-key';