From 0398d9a668d936ebbf484cd3448c0a006d39c616 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 11 May 2026 13:40:43 -0400 Subject: [PATCH 1/4] First pass of adding a clear button to USE --- app/assets/stylesheets/partials/_search.scss | 27 +++++++++++++++++++ .../stylesheets/partials/_variables.scss | 2 ++ app/javascript/search_form.js | 23 ++++++++++++++++ app/views/search/_form.html.erb | 1 + 4 files changed, 53 insertions(+) diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss index 4ae271e3..78f4aa7c 100644 --- a/app/assets/stylesheets/partials/_search.scss +++ b/app/assets/stylesheets/partials/_search.scss @@ -66,6 +66,33 @@ width: 100%; padding-left: 46px; } + + #clear-search { + display: none; + position: absolute; + top: 10px; + right: 10px; + height: 28px; + width: 28px; + background: none; + color: $color-gray-500; + font-size: 0; + padding: 0; + border-radius: 100%; + border: none; + cursor: pointer; + + &:hover { + background-color: $color-icon-secondary; + color: $color-icon-oncolor; + } + + &::before { + content: '\f00d'; + font-family: FontAwesome; + font-size: 20px; + } + } } button { diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss index 7ae7b31d..d1685a49 100644 --- a/app/assets/stylesheets/partials/_variables.scss +++ b/app/assets/stylesheets/partials/_variables.scss @@ -59,8 +59,10 @@ $color-text-oncolor: $color-white; // ICONS $color-icon-primary: $color-gray-950; +$color-icon-secondary: $color-gray-700; $color-icon-success: $color-green-800; $color-icon-danger: $color-red-500; +$color-icon-oncolor: $color-white; // BACKGROUNDS $color-bg-default: $color-white; diff --git a/app/javascript/search_form.js b/app/javascript/search_form.js index a48ecef3..9dc2a89e 100644 --- a/app/javascript/search_form.js +++ b/app/javascript/search_form.js @@ -3,6 +3,7 @@ var advancedPanel = document.getElementById('advanced-search-panel'); var geoboxPanel = document.getElementById('geobox-search-panel'); var geodistancePanel = document.getElementById('geodistance-search-panel'); var allPanels = document.getElementsByClassName('form-panel'); +var clearSearchButton = document.getElementById('clear-search'); function togglePanelState(currentPanel) { // Only the geoboxPanel and geodistancePanel inputs need to be required. Advanced search inputs do not. @@ -57,6 +58,15 @@ function updateKeywordPlaceholder() { } } +// Toggle visibility of clear search button based on whether the input has text. +function toggleClearButtonVisibility() { + if (keywordField.value.trim() === '') { + clearSearchButton.style.display = 'none'; + } else { + clearSearchButton.style.display = 'inline'; + } +} + // Add event listeners for all panels in the DOM. For GeoData, this is currently both geospatial panels and the advanced // panel. In all other TIMDEX UI apps, it's just the advanced panel. if (Array.from(allPanels).includes(geoboxPanel && geodistancePanel)) { @@ -77,4 +87,17 @@ if (Array.from(allPanels).includes(geoboxPanel && geodistancePanel)) { }); } +// Add event listener to show/hide clear button when typing. +keywordField.addEventListener('input', toggleClearButtonVisibility); + +// Add event listener to clear input when button is clicked. +clearSearchButton.addEventListener('click', () => { + keywordField.value = ''; + toggleClearButtonVisibility(); + keywordField.focus(); +}); + +// Initialize clear button visibility on page load to handle pre-populated search values. +toggleClearButtonVisibility(); + console.log('search_form.js loaded'); diff --git a/app/views/search/_form.html.erb b/app/views/search/_form.html.erb index 42e33ac1..1b079eb7 100644 --- a/app/views/search/_form.html.erb +++ b/app/views/search/_form.html.erb @@ -4,6 +4,7 @@
+
From c14e7b055b0f17028d22852753cb93c0e24c98eb Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Mon, 11 May 2026 14:37:23 -0400 Subject: [PATCH 2/4] Updated styling to be closer to secondary button --- app/assets/stylesheets/partials/_search.scss | 22 +++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss index 78f4aa7c..5c6b1804 100644 --- a/app/assets/stylesheets/partials/_search.scss +++ b/app/assets/stylesheets/partials/_search.scss @@ -70,27 +70,29 @@ #clear-search { display: none; position: absolute; - top: 10px; - right: 10px; - height: 28px; - width: 28px; + top: 8px; + right: 8px; + height: 32px; + width: 32px; background: none; - color: $color-gray-500; + color: $color-icon-primary; font-size: 0; - padding: 0; + padding: 2px; border-radius: 100%; - border: none; + border: 1px solid $color-border-default; cursor: pointer; &:hover { - background-color: $color-icon-secondary; - color: $color-icon-oncolor; + background-color: $color-blue-25; + color: $color-blue-500; + border-color: $color-blue-500; + outline: none; } &::before { content: '\f00d'; font-family: FontAwesome; - font-size: 20px; + font-size: 16px; } } } From 97067b4efc77c9b7c72c15e15f4f6e1a39c54299 Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 12 May 2026 08:57:15 -0400 Subject: [PATCH 3/4] Responsive adjustment and padding to ensure truncation of input text --- app/assets/stylesheets/partials/_search.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss index 5c6b1804..1eed7dd2 100644 --- a/app/assets/stylesheets/partials/_search.scss +++ b/app/assets/stylesheets/partials/_search.scss @@ -65,6 +65,7 @@ border: none; width: 100%; padding-left: 46px; + padding-right: 48px; } #clear-search { @@ -102,6 +103,10 @@ border: none; } + @media (max-width: $bp-screen-xs) { + flex-direction: column; + } + } .form-links { From 0d16e738e66bff79e226765d2ba5007344eb3d8c Mon Sep 17 00:00:00 2001 From: djanelle-mit Date: Tue, 12 May 2026 09:05:41 -0400 Subject: [PATCH 4/4] Adding aria label to clear button --- app/views/search/_form.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/search/_form.html.erb b/app/views/search/_form.html.erb index 1b079eb7..248dfb96 100644 --- a/app/views/search/_form.html.erb +++ b/app/views/search/_form.html.erb @@ -4,7 +4,7 @@
- +