From 27d16195a247e9ac218669c4dee010029d163212 Mon Sep 17 00:00:00 2001
From: jotaen4tinypilot <83721279+jotaen4tinypilot@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:25:45 +0200
Subject: [PATCH] Add <select> element to style guide (#1819)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Related https://github.com/tiny-pilot/tinypilot/issues/131, part (h).
Stacked on https://github.com/tiny-pilot/tinypilot/pull/1813.

We didn’t have a `<select>` field in the style guide yet, and we also
were missing the general CSS for it. We’ll need this for [turning the
“Country Code” input field into a
select-field](https://github.com/tiny-pilot/tinypilot/pull/1820), as
[discussed in the previous
PR](https://github.com/tiny-pilot/tinypilot/pull/1813#issuecomment-2207423740).

Once we merged this into Pro, we can also refactor [the inlined CSS of
the `<select>` field in the static IP
dialog](https://github.com/tiny-pilot/tinypilot-pro/blob/f806639d5124e7edad8b9a44a727ecf49f73ed54/app/templates/custom-elements/static-ip-dialog.html#L38-L46).

<img width="840" alt="Screenshot 2024-07-05 at 08 34 39"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/c49b6a94-d114-495b-9dcb-ba32eb30029d">

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1819"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
---
 app/static/css/style.css      |  7 ++++++-
 app/templates/styleguide.html | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index edf308ba9..b632a0a2f 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -103,7 +103,8 @@ img {
 }
 
 input[type="text"],
-input[type="password"] {
+input[type="password"],
+select {
   padding: 0.4rem;
   font-family: inherit;
   font-size: inherit;
@@ -112,6 +113,10 @@ input[type="password"] {
   box-shadow: inset 0 0 0.2rem 0 rgba(0, 0, 0, 0.15);
 }
 
+select {
+  padding: 0.5rem;
+}
+
 input[type="text"].monospace,
 input[type="password"].monospace {
   font-family: "Overpass Mono", monospace;
diff --git a/app/templates/styleguide.html b/app/templates/styleguide.html
index f9ed27007..e390cd255 100644
--- a/app/templates/styleguide.html
+++ b/app/templates/styleguide.html
@@ -308,6 +308,24 @@ <h2 class="section">Input</h2>
           spellcheck="false"
         />
       </p>
+      <h3 class="section">Select Field</h3>
+      <p>
+        For input fields that only allow for a certain, predefined set of values
+        or options, you can use a select field instead of a free text field.
+      </p>
+      <div>
+        <span>Choose Size:</span>
+        <select style="margin-left: 0.5em">
+          <option>Large</option>
+          <option>Medium</option>
+          <option>Small</option>
+        </select>
+      </div>
+      <p>
+        Unless there is a sensible default option, or for additional
+        clarification, you can use a disabled dummy option as first item to
+        imitate a placeholder text.
+      </p>
       <h3>Font Usage</h3>
       <p>
         Use the default font for input fields that expect “free” or regular