[GitHub] [airflow] ryanahamilton commented on a change in pull request #11583: UX Enhancement: Add button to clear search query from DAG search

[GitBox <gi...@apache.org>]

ryanahamilton commented on a change in pull request #11583:
URL: https://github.com/apache/airflow/pull/11583#discussion_r506536914



##########
File path: airflow/www/templates/airflow/dags.html
##########
@@ -60,9 +60,12 @@ <h2>DAGs</h2>
         </div>
         <div class="col-sm-4">
           <form id="search_form" class="form-inline">
-            <div class="form-group" style="width: 100%;">
+            <div class="form-group search-input" style="width: 100%;">
               <label for="dag_query" class="sr-only">Search DAGs</label>
-              <input type="search" id="dag_query" class="typeahead form-control" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
+              <input type="search" id="dag_query" class="typeahead form-control search-input__input" data-provide="typeahead" style="width:100%;" value="{{search_query}}" autocomplete="off" placeholder="Search DAGs">
+              {% if search_query %}
+                <button type="reset" class="btn btn-default btn-sm material-icons search-input__clear-btn">cancel</button>

Review comment:
       "cancel" is the required sting for material icons to render the desired icon. I went ahead and added an `aria-label` attribute instead.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org