v5: Forms update (#28450)

* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too

site/layouts/partials/docs-sidebar.html

@@ -1,14 +1,8 @@
-<form role="search" class="bd-search d-flex align-items-center">
-  <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
-  <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
-    {{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
-  </button>
-</form>
-
-<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
+<nav class="collapse bd-links pb-3" id="bd-docs-nav" aria-label="Main navigation">
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
+  <ul class="list-unstyled">
   {{- range $group := .Site.Data.nav -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}
@@ -21,13 +15,14 @@
     {{- $group_slug := $group.title | urlize -}}
     {{- $active_group := eq $.Page.Params.group $group_slug }}
 
-    <div class="bd-toc-item{{ if $active_group }} active{{ end }}">
-        <a class="bd-toc-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
-          {{- $group.title -}}
+      <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group">
+        <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
+          <svg class="bd-sidenav-group-link-icon" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <div>{{- $group.title -}}</div>
         </a>
 
-        {{- if and $active_group $group.pages }}
-        <ul class="nav bd-sidenav">
+        {{- if $group.pages }}
+        <ul class="nav bd-sidenav mb-2">
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize }}
             <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>
@@ -38,6 +33,12 @@
           {{- end }}
         </ul>
         {{- end }}
-      </div>
-  {{- end }}
+      </li>
+    {{- end }}
+
+    <li class="my-3 mx-4 border-top"></li>
+    <li class="bd-sidenav-group pl-3">
+      <a class="d-inline-flex bd-sidenav-group-link" href="/migration">Migration</a>
+    </li>
+  </ul>
 </nav>