From b430e052858c490a4e90f3143f159ee6240eb948 Mon Sep 17 00:00:00 2001
From: Tim Hoffmann <2836374+timhoffm@users.noreply.github.com>
Date: Fri, 21 Apr 2023 03:02:04 +0200
Subject: [PATCH] Create a 'search field' component for themes (#11045)

``searchfield.html`` is similar to the existing ``searchbox.html``, but does not
have the heading "Quick Search". Instead, it uses "Search" as a placeholder
text. This gives a cleaner and less cluttered appearance.

The searchfield component is added to the basic theme and thus can be used
in any derivative theme. It is not used by default for backward compatibility.

The searchfield compenent is made the default in the sphinx13 theme.

CSS changes ensure that the top of the search field is aligned with the
top of the main content.
---
 doc/_themes/sphinx13/layout.html         |  2 +-
 doc/_themes/sphinx13/static/sphinx13.css |  5 +++++
 sphinx/themes/basic/searchfield.html     | 23 +++++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 sphinx/themes/basic/searchfield.html

diff --git a/doc/_themes/sphinx13/layout.html b/doc/_themes/sphinx13/layout.html
index afab3693ba8..8010517a69a 100644
--- a/doc/_themes/sphinx13/layout.html
+++ b/doc/_themes/sphinx13/layout.html
@@ -32,7 +32,7 @@ <h3>{{ _('Navigation') }}</h3>
 {%- block content %}
 <div class="document">
   <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
-    {%- include "searchbox.html" %}
+    {%- include "searchfield.html" %}
     <div class="sphinxsidebar-navigation__contents">
       <h3>{{ _('On this page') }}</h3>
       {{ toc }}
diff --git a/doc/_themes/sphinx13/static/sphinx13.css b/doc/_themes/sphinx13/static/sphinx13.css
index 397c1f7893e..674d211ea17 100644
--- a/doc/_themes/sphinx13/static/sphinx13.css
+++ b/doc/_themes/sphinx13/static/sphinx13.css
@@ -68,6 +68,7 @@ div.sphinxsidebar {
     overflow-wrap: break-word;
     margin: 0;
     padding-right: 15px;
+    padding-top: 0.5em;
     font-size: 1em;
 }
 
@@ -127,6 +128,10 @@ div.sphinxsidebar li.current > a {
     display: none;
 }
 
+div.sphinxsidebar #searchbox {
+    margin: 12px 0 20px 0;
+}
+
 div.footer {
     background-color: var(--colour-sphinx-blue);
     color: #ccc;
diff --git a/sphinx/themes/basic/searchfield.html b/sphinx/themes/basic/searchfield.html
new file mode 100644
index 00000000000..1286be021db
--- /dev/null
+++ b/sphinx/themes/basic/searchfield.html
@@ -0,0 +1,23 @@
+{#
+    basic/searchfield.html
+    ~~~~~~~~~~~~~~~~~~~~~~
+
+    Sphinx sidebar template: search field.
+    This component is similar to searchbox.html but does not include an
+    extra heading ("Quick search"). Instead, it uses a placeholder text
+    in the search field.
+
+    :copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
+    :license: BSD, see LICENSE for details.
+#}
+{%- if pagename != "search" and builder != "singlehtml" %}
+<div id="searchbox" style="display: none" role="search">
+    <div class="searchformwrapper">
+    <form class="search" action="{{ pathto('search') }}" method="get">
+      <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search"/>
+      <input type="submit" value="{{ _('Go') }}" />
+    </form>
+    </div>
+</div>
+<script>document.getElementById('searchbox').style.display = "block"</script>
+{%- endif %}