Add button to close example toolbar (#5309)

* Add button to close the example controls toolbar

* Reduce spacing between example controls on smaller screens

* Remove extra comma after close button

* change to default button

Author: jmuzina

scss/docs/example.scss

@@ -20,8 +20,7 @@ body {
   box-shadow: $box-shadow--deep;
   display: flex;
   flex-flow: row wrap;
-  gap: $sp-unit;
-  justify-content: space-between;
+  gap: $sph--small;
   left: 0;
   padding: $spv--x-small $sph--x-small;
   position: fixed;
@@ -30,6 +29,14 @@ body {
   // Above *all* other elements.
   z-index: 1000000;
 
+  .p-example-controls__close-button {
+    margin-left: auto;
+  }
+
+  @media (min-width: $breakpoint-small) {
+    gap: $sph--large;
+  }
+
   @media only percy {
     visibility: hidden !important;
   }

templates/static/js/example-tools.js

@@ -153,8 +153,17 @@ var activeTheme = DEFAULT_COLOR_THEME;
       );
       controls.appendChild(baselineGridControl);
 
+      const closeButtonFragment = fragmentFromString(`
+        <button class="p-button is-dense p-example-controls__close-button" id="js-example-toolbar-close-button">
+          Close
+        </button>
+      `);
+      controls.appendChild(closeButtonFragment);
       body.appendChild(controls);
 
+      var closeButton = document.getElementById('js-example-toolbar-close-button');
+      closeButton.addEventListener('click', () => controls.remove());
+
       // Below code relies on the controls already existing in the DOM, so must come after `body.appendChild`.
       var themeToggleButtons = document.querySelectorAll('.p-theme-toggle__button');
       themeToggleButtons.forEach((themeToggleButton) => {