Repository: cfpb/wagtail-inventory (language: python)

Issue:
Select dialogs in inventory form are missing chevron icon
Short description explaining the high-level reason for the new issue.

## Current behavior

In the wagtail inventory page, there are 6 select elements that have no visual cue indicating that they are select dialogs. The UI would suggest they are text boxes. When clicked, the dropdown appears and functionality works as expected.

## Expected behavior

The UI of the select dialog should have some sort of visual element indicating that the field is a dropdown. The easy solution is to leverage wagtail's built in CSS styles to render a chevron icon on the right hand side.

## Steps to replicate behavior (include URLs)

1. Go to the wagtail inventory page (http://localhost:8000/admin/inventory/)
2. Observe the UI of the 6 select elements at the top of the page

## Screenshots

![image](https://user-images.githubusercontent.com/2699164/104196314-a24b4e00-53f1-11eb-9f5b-4811b642de89.png)




add chevron icon to select dropdown
This PR resolves #39.

## Additions

-

## Removals

-

## Changes

- Update select element html structure to integrate with Wagtail's chevron icon
- Move some CSS styles from forms.py to the template to integrate properly with the new html structure

## Testing

1. I ran tox for python 3.6 and the tests passed. I did not modify or create unit tests.

## Screenshots

New:
![image](https://user-images.githubusercontent.com/2699164/104209680-06750e80-5400-11eb-90e0-db488b57ad62.png)

Old:
![image](https://user-images.githubusercontent.com/2699164/104209646-feb56a00-53ff-11eb-9315-ceddb00db127.png)


## Notes

-

## Todos

-

## Checklist

- [ ] PR has an informative and human-readable title
- [ ] Changes are limited to a single goal (no scope creep)
- [ ] Code can be automatically merged (no conflicts)
- [ ] Code follows the standards laid out in the [development playbook](https://github.com/cfpb/development)
- [ ] Passes all existing automated tests
- [ ] Any _change_ in functionality is tested
- [ ] New functions are documented (with a description, list of inputs, and expected output)
- [ ] Placeholder code is flagged / future todos are captured in comments
- [ ] Visually tested in supported browsers and devices (see checklist below :point_down:)
- [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)
- [ ] Reviewers requested with the [Reviewers tool](https://help.github.com/articles/requesting-a-pull-request-review/) :arrow_right:

## Testing checklist

### Browsers

- [ ] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Internet Explorer 8, 9, 10, and 11
- [ ] Edge
- [ ] iOS Safari
- [ ] Chrome for Android

### Accessibility

- [ ] Keyboard friendly
- [ ] Screen reader friendly

### Other

- [ ] Is useable without CSS
- [ ] Is useable without JS
- [ ] Flexible from small to large screens
- [ ] No linting errors or warnings
- [ ] JavaScript tests are passing



Discussion / hints:

Fix patch:
diff --git a/wagtailinventory/forms.py b/wagtailinventory/forms.py
index 95c1ee7..7a7b367 100644
--- a/wagtailinventory/forms.py
+++ b/wagtailinventory/forms.py
@@ -15,13 +15,11 @@ class PageBlockQueryForm(forms.Form):
         choices=(),
         required=False,
         label="Block type",
-        widget=forms.Select(attrs={"style": "width: 50%"}),
     )
 
     has = forms.ChoiceField(
         choices=((c, c) for c in (INCLUDES_BLOCK, EXCLUDES_BLOCK)),
         label=None,
-        widget=forms.Select(attrs={"style": "width: 100px"}),
     )
 
     def __init__(self, *args, **kwargs):
diff --git a/wagtailinventory/templates/wagtailinventory/search.html b/wagtailinventory/templates/wagtailinventory/search.html
index c5c4b05..4b4e617 100644
--- a/wagtailinventory/templates/wagtailinventory/search.html
+++ b/wagtailinventory/templates/wagtailinventory/search.html
@@ -5,6 +5,29 @@
 
 {% block titletag %}{% trans "Block Inventory" %}{% endblock %}
 
+{% block extra_css %}
+<style>
+    form.nice-padding {
+        display: table;
+        box-sizing: border-box;
+        width: 100%;
+    }
+    .wagtail-inventory-select {
+        display: table-row;
+    }
+    .wagtail-inventory-select .select {
+        display: table-cell;
+        padding: 0 10px 10px 0;
+    }
+    .wagtail-inventory-select .select-has {
+        width: 175px;
+    }
+    .wagtail-inventory-select .field-content {
+        width: 100%;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 {% trans "Block Inventory" as header_str %}
 {% include "wagtailadmin/shared/header.html" with title=header_str icon="placeholder" %}
@@ -12,12 +35,12 @@
 <form class="nice-padding" action="{% url 'wagtailinventory:search' %}">
 	{{ formset.management_form }}
   {% for form in formset %}
-    <div>
-      {{ form.has }}
-      {{ form.block }}
+    <div class="wagtail-inventory-select">
+      {% include "wagtailadmin/shared/field.html" with field=form.has show_label=False field_classes="select-has" %}
+      {% include "wagtailadmin/shared/field.html" with field=form.block show_label=False field_classes="select-block" %}
     </div>
   {% endfor %}
-  <input type="submit" value="Find matching pages" style="width: 240px; padding: 10px; margin: 10px 0" />
+  <input type="submit" value="Find matching pages" class="button" style="margin: 10px 0 20px;" />
 </form>
 
 <div id="search-results">


Test patch:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 7e77043..bf72a61 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v1
         with:
-          python-version: 3.8
+          python-version: 3.6
 
       - name: Install dependencies
         run: |
@@ -72,3 +72,4 @@ jobs:
         env: 
           TOXENV: ${{ matrix.toxenv }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          COVERALLS_SERVICE_NAME: github