Add an entry to the changelog

CHANGELOG.md

@@ -34,13 +34,14 @@ notes][0.5.0]. **BREAKING CHANGES** are documented below.
 - **[Upgraded FontAwesome][]** to v6 from v5. While many icons were renamed, the
   v5 names still work. For details about icon renames and more, see [What's
   changed][].
+- **Search-box**: the HTML structure and class names have changed, due to the
+  Font Awesome upgrade, for both online and offline search. This may affect your
+  project if you have overridden search styling or scripts.
 
 **Other changes**:
 
 - By default, Docsy now uses the [gtag.js][] analytics library for all site
   tags. For details, see [Adding Analytics > Setup][].
-- **Navbar search-box** width is narrower, as a result of the FontAwesome (FA)
-  upgrade. In any case, the search-box styling has also been updated.
 
 [Adding Analytics > Setup]: https://www.docsy.dev/docs/adding-content/feedback/#setup
 [v4.6.2 release notes]: https://github.com/twbs/bootstrap/releases/tag/v4.6.2

assets/scss/_search.scss

@@ -1,117 +1,120 @@
 // Search
 
 .td-search {
-  background: transparent;
-  position: relative;
-  width: 90%;
-
-  // Search icon
-  &__icon {
-    // Vertically center the content.
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-    // Position this on the left of the input.
-    position: absolute;
-    left: 0.75em;
-
-    // Click-through to the underlying input.
-    pointer-events: none;
-
-    &:before {
-      @extend .fa;
-      content: fa-content($fa-var-search);
-    }
+    background: transparent;
+    position: relative;
+    width: 90%;
+
+    // Search icon
+    &__icon {
+        // Vertically center the content.
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        // Position this on the left of the input.
+        position: absolute;
+        left: 0.75em;
+
+        // Click-through to the underlying input.
+        pointer-events: none;
+
+        &:before {
+            @extend .fa;
+            content: fa-content($fa-var-search);
+        }
 
-    // Styling adjustments for the navbar
-    @at-root {
-      .td-navbar & {
-        color: $navbar-dark-color;
-      }
+        // Styling adjustments for the navbar
+        @at-root {
+            .td-navbar & {
+                color: $navbar-dark-color;
+            }
+        }
     }
-  }
 
-  // Search input element
-  &__input {
-    width: 100%;
-    text-indent: 1.25em;
+    // Search input element
+    &__input {
+        width: 100%;
+        text-indent: 1.25em;
 
-    @if $enable-rounded {
-      border-radius: 1rem;
-    }
+        @if $enable-rounded {
+            border-radius: 1rem;
+        }
 
-    &:not(:focus) {
-      background: transparent;
-    }
+        &:not(:focus) {
+            background: transparent;
+        }
 
-    &.form-control:focus {
-      border-color: lighten($primary, 60%);
-      box-shadow: 0 0 0 2px lighten($primary, 30%);
-      color: inherit;
-    }
+        &.form-control:focus {
+            border-color: lighten($primary, 60%);
+            box-shadow: 0 0 0 2px lighten($primary, 30%);
+            color: inherit;
+        }
 
-    // Styling adjustments for the navbar
-    @at-root {
-      .td-navbar & {
-        border: none;
-        color: $navbar-dark-color;
+        // Styling adjustments for the navbar
+        @at-root {
+            .td-navbar & {
+                border: none;
+                color: $navbar-dark-color;
 
-        @include placeholder {
-          color: $navbar-dark-color;
+                @include placeholder {
+                    color: $navbar-dark-color;
+                }
+            }
         }
-      }
+
     }
 
-  }
+    // Hide icon on focus
+    &:focus-within {
 
-  // Hide icon on focus
-  &:focus-within {
+        .td-search__icon {
+            display: none;
+        }
 
-    .td-search__icon {
-      display: none;
+        .td-search-input {
+            text-indent: 0px;
+        }
     }
 
-    .td-search-input {
-      text-indent: 0px;
+    &:not(:focus-within) {
+        color: $input-placeholder-color;
     }
-  }
-
-  &:not(:focus-within) {
-    color: $input-placeholder-color;
-  }
 }
 
 // Offline search
 
 .td-search--offline {
-  &:focus-within {
-    // Don't hide the search icon on focus: this gives better UX when user
-    // explores content of search-results popup and focus is lost.
-    .td-search__icon {
-      display: flex;
-      color: $input-placeholder-color;
+
+    &:focus-within {
+        // Don't hide the search icon on focus: this gives better UX when user
+        // explores content of search-results popup and focus is lost.
+
+        .td-search__icon {
+            display: flex;
+            color: $input-placeholder-color;
+        }
     }
-  }
 }
 
 .td-offline-search-results {
-  max-width: 90%;
+    max-width: 90%;
 
-  .card {
-    margin-bottom: $spacer * .5;
+    .card {
+        margin-bottom: $spacer * .5;
 
-    .card-header {
-      font-weight: bold;
+        .card-header {
+            font-weight: bold;
+        }
     }
-  }
-
-  &__close-button {
-    // cursor: pointer;
-    float: right;
-    &:after {
-      @extend .fas;
-      content: fa-content($fa-var-times);
+
+    &__close-button {
+        // cursor: pointer;
+        float: right;
+
+        &:after {
+            @extend .fas;
+            content: fa-content($fa-var-times);
+        }
     }
-  }
 }