Apply modal pattern to search box pop-up #1932

gabalafou · 2024-07-17T13:10:41Z

Closes external issue Quansight-Labs/czi-scientific-python-mgmt#83.

Summary

This PR implements the pop-up search field as an HTML-native <dialog>. This somewhat simplifies our implementation and brings accessibility affordances with it.

I also introduced a couple visual changes, which fix #1714.

Before

After

This PR removes the border around the input element, so that there is only one border, around the parent element, which is the same as around the entire search bar.

This PR puts the focus ring around the entire search bar when the input element is focused rather than just around the input element itself. To my eyes this looks more natural.

Test plan

I tested this in Firefox, Chrome, and Safari on my Mac. I also tested it in Ubuntu + Firefox.

TODO:

Test on Windows

There are at least six different presentations of the search input field that need to be tested:

Search modal on homepage
Search input box on search results page
Persistent search field at /examples/persistent-search-field.html
Mobile: search modal on homepage
Mobile: search input box on search results page
BROKEN. Mobile: persistent search field

As the persistent search is currently broken in production, it's also broken in this PR. How so? On the persistent search field example page, if you click the search button in the nav bar, or you press the keyboard shortcut (Ctrl + K), neither of those actions does anything because the "persistent" search field is hidden behind the mobile sidebar which only opens up if you click the hamburger icon.

gabalafou

self review

gabalafou · 2024-07-17T13:11:22Z

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

-    <div class="search-button__overlay"></div>
-    <div class="search-button__search-container">{% include "../components/search-field.html" %}</div>
-  </div>
+  <dialog class="search-button__search-container">


Wondering if this class should be renamed

I have a question in another comments if this should even be made an id, as the js assume there is only one I think. Don't trust me on Js.

src/pydata_sphinx_theme/assets/styles/components/_search.scss

gabalafou · 2024-07-17T13:15:56Z

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

-    input.focus();
-    input.select();
-    input.scrollIntoView({ block: "center" });
+    // if the input field is not the hidden one, then toggle its focus state


On the left side, the logic in this else-branch was always run. That was because the old way of opening the search pop-up did not automatically focus the search input field. However, when the search input field is inside a dialog, then when you open the dialog, it is automatically focussed. So if you then run the code below, you get a buggy sequence of actions:

Call to searchDialog.showModal() puts focus on search input field

Call to input.blur() removes focus from search input field

So the solution is to put this toggle logic in an else-branch to handle the case when the search field is on already on the page (for example, the search results page, or a page with a persistent search bar).

gabalafou · 2024-07-17T13:17:09Z

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

-  if (overlay) {
-    overlay.onclick = toggleSearchField;
-  }
+  // If user clicks outside the search modal dialog, then close it.


The default behavior for modal dialogs is to stay on the screen even if you click on the dialog's backdrop.

To me the old behavior seemed natural though - i.e., if the user clicks the backdrop, we remove the pop-up search bar. So I restore that behavior here.

gabalafou · 2024-07-17T13:18:04Z

src/pydata_sphinx_theme/assets/styles/components/_search.scss

    color: var(--pst-color-border);
  }
 }

-.form-control {


I merged these rules in with the input selector above. As far as I can tell, I searched the code base, and the only place I could find this class being used is on the input element in the search-field.html component.

gabalafou · 2024-07-17T13:19:23Z

src/pydata_sphinx_theme/assets/styles/components/_search.scss

  }

  // Shows off the keyboard shortcuts for the button
  .search-button__kbd-shortcut {
    display: flex;
-    position: absolute;


I think position: absolute was actually a bad idea because it allows the search terms in the input box to bleed into the span displaying the keyboard shortcut (think narrow screen rather than super long search string).

src/pydata_sphinx_theme/assets/styles/components/_search.scss

gabalafou · 2024-07-17T13:21:31Z

src/pydata_sphinx_theme/assets/styles/components/_search.scss

-    padding-top: 0;
-    padding-bottom: 0;


These padding rules are not needed. The form already has 0 top and bottom padding.

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-field.html

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/search.html

gabalafou

self review

gabalafou · 2024-07-17T14:58:08Z

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-field.html

@@ -6,7 +6,6 @@
  <input type="search"
         class="form-control"
         name="q"
-         id="search-input"


It's misleading to put an id on this element because this template can currently be rendered on the same page more than once. This definitely happens in the PST docs, for example, on the search results page.

choldgraf · 2024-07-17T18:03:28Z

this has been bugging me for so long, it looks much nicer thanks

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

gabalafou · 2024-07-18T16:58:25Z

I started a discussion about how I would like to change the keyboard shortcut behavior.

src/pydata_sphinx_theme/assets/styles/components/_search.scss

github-actions · 2024-07-19T15:12:27Z

Coverage report

This PR does not seem to contain any modification to coverable code.

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

This is very similar to #1932. Closes external issue Quansight-Labs/czi-scientific-python-mgmt#84 --------- Co-authored-by: M Bussonnier <[email protected]>

Apply modal pattern to search box pop-up

1811486

gabalafou commented Jul 17, 2024

View reviewed changes

remove label

200d871

gabalafou commented Jul 17, 2024

View reviewed changes

Carreau previously approved these changes Jul 18, 2024

View reviewed changes

This was referenced Jul 18, 2024

Search input modal does not return focus to opener (search button) when modal is closed Quansight-Labs/czi-scientific-python-mgmt#85

Open

Refine active search field design #1714

Closed

Team sync - July 18, 2024 Quansight-Labs/czi-scientific-python-mgmt#108

Open

gabalafou added 3 commits July 19, 2024 16:40

use const

0741fea

use id

c58f131

add comment, dialog click-handler includes clicks on backdrop

a223828

gabalafou dismissed Carreau’s stale review via a223828 July 19, 2024 15:04

gabalafou commented Jul 19, 2024

View reviewed changes

src/pydata_sphinx_theme/assets/styles/components/_search.scss Outdated Show resolved Hide resolved

Update src/pydata_sphinx_theme/assets/styles/components/_search.scss

c30a5bc

gabalafou commented Jul 19, 2024

View reviewed changes

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html Outdated Show resolved Hide resolved

gabalafou added 2 commits July 19, 2024 10:12

fix id

dd5eb7d

s/class/id

64dd4d1

gabalafou mentioned this pull request Jul 25, 2024

Team sync - July 25, 2024 Quansight-Labs/czi-scientific-python-mgmt#109

Open

Carreau approved these changes Jul 25, 2024

View reviewed changes

Carreau merged commit 72a756d into pydata:main Jul 25, 2024
29 checks passed

gabalafou deleted the fix-search-modal branch July 25, 2024 15:59

gabalafou mentioned this pull request Jul 30, 2024

Make overlay sidebars behave like modals #1942

Merged

Carreau added a commit that referenced this pull request Aug 29, 2024

Make overlay sidebars behave like modals (#1942)

15494ec

This is very similar to #1932. Closes external issue Quansight-Labs/czi-scientific-python-mgmt#84 --------- Co-authored-by: M Bussonnier <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apply modal pattern to search box pop-up #1932

Apply modal pattern to search box pop-up #1932

gabalafou commented Jul 17, 2024 •

edited

Loading

gabalafou left a comment

gabalafou Jul 17, 2024

Carreau Jul 18, 2024

gabalafou Jul 17, 2024

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024

gabalafou left a comment

gabalafou Jul 17, 2024

choldgraf commented Jul 17, 2024

gabalafou commented Jul 18, 2024 •

edited

Loading

github-actions bot commented Jul 19, 2024

Apply modal pattern to search box pop-up #1932

Apply modal pattern to search box pop-up #1932

Conversation

gabalafou commented Jul 17, 2024 • edited Loading

Summary

Before

After

Test plan

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou Jul 17, 2024

Choose a reason for hiding this comment

Carreau Jul 18, 2024

Choose a reason for hiding this comment

gabalafou Jul 17, 2024

Choose a reason for hiding this comment

gabalafou Jul 17, 2024 • edited Loading

Choose a reason for hiding this comment

gabalafou Jul 17, 2024 • edited Loading

Choose a reason for hiding this comment

gabalafou Jul 17, 2024 • edited Loading

Choose a reason for hiding this comment

gabalafou Jul 17, 2024

Choose a reason for hiding this comment

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou Jul 17, 2024

Choose a reason for hiding this comment

choldgraf commented Jul 17, 2024

gabalafou commented Jul 18, 2024 • edited Loading

github-actions bot commented Jul 19, 2024

Coverage report

gabalafou commented Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou Jul 17, 2024 •

edited

Loading

gabalafou commented Jul 18, 2024 •

edited

Loading