chore: Cleaning up some remains of Vanilla overrides (#5020)

* chore: Remove custom sticky footer * chore: Remove unnecessary u-no-limit and margin sizing utils * chore: Remove custom form validation styles * chore: Remove unnecessary strip variant * chore: Remove unnecessary breadcrumb override * bug: Fix button positioning in register form
canonical · Feb 12, 2025 · df1bb78 · df1bb78
1 parent c65713e
commit df1bb78
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 314 deletions.
diff --git a/static/js/base/ga.ts b/static/js/base/ga.ts
@@ -8,7 +8,7 @@ type Events = {
 const events: Events = {
   ".global-nav a": "nav-0",
   ".p-navigation a": "nav-1",
-  ".p-sticky-footer a": "footer-0",
+  "#footer a": "footer-0",
   "#main-content .p-button--positive": "content-cta-0",
   ".p-strip .p-button--positive": "content-cta-0",
   "#main-content .p-button": "content-cta-1",

diff --git a/static/sass/_patterns_sticky_footer.scss b/static/sass/_patterns_sticky_footer.scss
diff --git a/static/sass/_patterns_strip_slanted.scss b/static/sass/_patterns_strip_slanted.scss
diff --git a/static/sass/_snapcraft_p-form-validation.scss b/static/sass/_snapcraft_p-form-validation.scss
diff --git a/static/sass/_utilities_margin-sizing.scss b/static/sass/_utilities_margin-sizing.scss
diff --git a/static/sass/_utilities_no-limit.scss b/static/sass/_utilities_no-limit.scss
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -42,12 +42,6 @@ $color-social-icon-foreground: $color-light;
 // Again the new grid doesn't work to implement what happens here
 @import "search-form";
 @include search-form;
-
-// TODO[epic=styles]: sticky footer
-// The footer pattern has been removed from vanilla
-// so there is little possibility this will be added
-@import "patterns_sticky_footer";
-@include p-sticky-footer;
 @import "snapcraft_banner";
 @include snapcraft-banner;
 @import "snapcraft_graph-tooltip";
@@ -73,8 +67,6 @@ $color-social-icon-foreground: $color-light;
 @include snapcraft-show-more;
 @import "snapcraft_snap-details";
 @include snapcraft-snap-details;
-@import "snapcraft_p-form-validation";
-@include snapcraft-p-form-validation;
 @import "snapcraft_p-notifications";
 @include snapcraft-p-notification;
 @import "snapcraft_distro-chart";
@@ -105,8 +97,6 @@ $color-social-icon-foreground: $color-light;
 @include snapcraft-publisher;
 @import "patterns_modal";
 @include vf-p-modal-snapcraft;
-@import "patterns_strip_slanted";
-@include snapcraft-p-strip;
 @import "snapcraft_packages";
 @include snapcraft-packages;
 @import "snapcraft_dispute-list";
@@ -125,8 +115,6 @@ $color-social-icon-foreground: $color-light;
 @include snapcraft-pattern-docs;
 @import "patterns_table";
 @include snapcraft-p-table;
-@import "utilities_no-limit";
-@include u-no-limit;
 @import "utilities_disabled";
 @include u-disabled;
 @import "utilities_text-wrap";
@@ -412,12 +400,6 @@ dl {
   max-width: 100%;
 }
 
-// TODO[epic=styles]: breadcrumb
-// Vanilla override
-.p-breadcrumbs__item:not(:first-of-type)::before {
-  margin-left: -0.5rem;
-}
-
 // To prevent layout shift
 .brand-store-tabs {
   height: 48px;

diff --git a/templates/_base-layout.html b/templates/_base-layout.html
@@ -71,7 +71,7 @@
     <link rel="author" href="/humans.txt" />
   </head>
 
-  <body class="has-sticky-footer">
+  <body class="l-site">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCGXHQS"
       height="0" width="0" style="display: none; visibility: hidden;"></iframe></noscript>

diff --git a/templates/_footer.html b/templates/_footer.html
@@ -52,7 +52,7 @@
 </footer>
 </div>
 {% else %}
-<footer class="p-strip--dark p-sticky-footer" id="footer">
+<footer class="l-footer--sticky p-strip is-dark" id="footer">
   <div class="row">
     <div class="col-9">
       <p>

diff --git a/templates/first-snap/_install-linux.html b/templates/first-snap/_install-linux.html
@@ -11,14 +11,14 @@ <h4>How would you like to set up your build environment?</h4>
     <div class="col-8">
       <ol class="p-stepped-list">
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             <span>
               <a href="/docs/installing-snapd" target="_blank" >Install snap support</a>, if you don't have it already
             </span>
           </h4>
         </li>
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             Install Snapcraft, the command-line tool for building snaps:
           </h4>
           <span class="p-stepped-list__content">
@@ -27,7 +27,7 @@ <h4 class="p-stepped-list__title u-no-limit">
           </span>
         </li>
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             Refresh your path:
           </h4>
           <span class="p-stepped-list__content">
@@ -42,13 +42,13 @@ <h4 class="p-stepped-list__title u-no-limit">
     <div class="col-8">
       <ol class="p-stepped-list has-margin">
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             <a href="https://docs.docker.com/install/linux/docker-ce/ubuntu/" target="_blank" >Install Docker</a>
             , if you don't have it already
           </h4>
         </li>
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             Check that Docker is correctly configured
           </h4>
           <span class="p-stepped-list__content">
@@ -60,7 +60,7 @@ <h4 class="p-stepped-list__title u-no-limit">
           </span>
         </li>
         <li class="p-stepped-list__item">
-          <h4 class="p-stepped-list__title u-no-limit">
+          <h4 class="p-stepped-list__title">
             Pull the latest snapcraft image:
           </h4>
           <span class="p-stepped-list__content">