static,tests: symbol search on homepage search form
The homepage search form has a dropdown to select search
mode when the symbol-search experiment is active.
For golang/go#47321
Change-Id: Id8cb81999dcbc62c77d33b815b8b44e37fe1009e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/341177
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/static/frontend/homepage/homepage.css b/static/frontend/homepage/homepage.css
index b162179..00b7109 100644
--- a/static/frontend/homepage/homepage.css
+++ b/static/frontend/homepage/homepage.css
@@ -4,6 +4,7 @@
* license that can be found in the LICENSE file.
*/
+/* Hide the search form in the header. */
.go-SearchForm {
display: none;
}
@@ -31,34 +32,51 @@
margin: 3.5rem auto;
}
}
-.Homepage-searchForm input {
- background: url('/static/shared/icon/search_gm_grey_24dp.svg') right no-repeat;
- background-position: left 0.75rem center;
- background-size: 1.5rem;
- border: var(--border);
- border-radius: 0.5rem 0 0 0.5rem;
- color: var(--color-text);
- font-size: 1rem;
+.Homepage-search {
+ --border-radius: 0.5rem;
+
height: 3rem;
- padding-left: 2.75rem;
- width: 37.6875rem;
+ margin: 2.5rem auto 0 auto;
+ max-width: 45.0625rem;
+ position: relative;
+ width: 100%;
}
-.Homepage-buttonGroup {
- display: flex;
+.Homepage-search::before {
+ background: url('/static/shared/icon/search_gm_grey_24dp.svg') left no-repeat;
+ content: '';
+ height: 3rem;
+ left: 0.75rem;
+ position: absolute;
+ width: 1.5rem;
+ z-index: 3;
+}
+.Homepage-search .go-Select {
+ padding-left: 2.5rem;
+}
+.Homepage-search .go-Input {
+ padding-left: 2.5rem;
+}
+.Homepage-search--symbol .go-Input {
+ border-bottom-right-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ padding-left: 1rem;
+}
+.Homepage-search .go-Button {
justify-content: center;
- margin: 2.5rem auto auto 0;
-}
-.Homepage-searchButton {
- background-color: var(--color-button);
- border: none;
- border-radius: 0 0.5rem 0.5rem 0;
- color: var(--color-button-text);
- cursor: pointer;
- font-size: 1em;
- height: 3rem;
- padding: 0 1.375rem;
width: 7.375rem;
}
+.Homepage-search--symbol .go-Button {
+ display: none;
+}
+@media only screen and (min-width: 30rem) {
+ .Homepage-search--symbol .go-Input {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .Homepage-search--symbol .go-Button {
+ display: inline-flex;
+ }
+}
.Homepage-searchHelp {
align-items: center;
display: block;
diff --git a/static/frontend/homepage/homepage.tmpl b/static/frontend/homepage/homepage.tmpl
index 43f3068..64d9c47 100644
--- a/static/frontend/homepage/homepage.tmpl
+++ b/static/frontend/homepage/homepage.tmpl
@@ -13,26 +13,32 @@
<div class="go-Content go-Content--center">
<img class="Homepage-logo" width="700" height="300"
src="/static/shared/gopher/package-search-700x300.jpeg" alt="Cartoon gopher typing">
- <form class="Homepage-searchForm" action="/search" role="search" data-gtmc="homepage search form"
+ <form class="go-InputGroup Homepage-search
+ {{if .Experiments.IsActive "symbol-search"}}Homepage-search--symbol{{end}}"
+ action="/search" role="search" data-gtmc="homepage search form"
aria-label="Search for a Package">
- <div class="Homepage-buttonGroup">
- <input
- class="js-searchFocus"
- data-test-id="homepage-search"
- id="AutoComplete"
- role="textbox"
- aria-label="Search for Go packages"
- type="text"
- name="q"
- placeholder="Search for Go packages"
- autocapitalize="off"
- autocomplete="off"
- autocorrect="off"
- spellcheck="false"
- title="Search for Go packages"
- autofocus="true">
- <button type="submit" class="Homepage-searchButton">Search</button>
- </div>
+ {{if .Experiments.IsActive "symbol-search"}}
+ <select name="m" class="go-Select">
+ <option value="packages">Packages</option>
+ <option value="identifiers">Identifiers</option>
+ </select>
+ {{end}}
+ <input
+ class="go-Input js-searchFocus"
+ data-test-id="homepage-search"
+ id="AutoComplete"
+ role="textbox"
+ aria-label="Search for Go packages"
+ type="text"
+ name="q"
+ placeholder="Search for Go packages"
+ autocapitalize="off"
+ autocomplete="off"
+ autocorrect="off"
+ spellcheck="false"
+ title="Search for Go packages"
+ autofocus="true">
+ <button type="submit" class="go-Button">Search</button>
</form>
<span class="Homepage-searchHelp">
<div class="Homepage-exampleSearches">
diff --git a/tests/e2e/__image_snapshots__/ci/basic-mobile--home-screenshot-snap.png b/tests/e2e/__image_snapshots__/ci/basic-mobile--home-screenshot-snap.png
index 1c749b8..499272d 100644
--- a/tests/e2e/__image_snapshots__/ci/basic-mobile--home-screenshot-snap.png
+++ b/tests/e2e/__image_snapshots__/ci/basic-mobile--home-screenshot-snap.png
Binary files differ
diff --git a/tests/e2e/__image_snapshots__/staging/basic-mobile--home-screenshot-snap.png b/tests/e2e/__image_snapshots__/staging/basic-mobile--home-screenshot-snap.png
index 1c749b8..499272d 100644
--- a/tests/e2e/__image_snapshots__/staging/basic-mobile--home-screenshot-snap.png
+++ b/tests/e2e/__image_snapshots__/staging/basic-mobile--home-screenshot-snap.png
Binary files differ
