Expand search box horizontally when text grows long (jupyterlab#15266)

* Expand search box horizontally when text grows long

* Update Playwright Snapshots

* Fix button positioning by adjusting padding

the top/bottom padding was inflating the input box
resulting in the input having over 20px; because it
was defined with em it was difficult to adjust for it
this change should ensure that with standard font-sizes
the buttons will be centered

* Update Playwright Snapshots

* Revert incorrect snapshot update

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: krassowski <[email protected]>

.gitignore

@@ -74,6 +74,7 @@ __pycache__
 pip-wheel-metadata
 Pipfile
 Pipfile.lock
+venv/
 
 # xeus-python debug logs
 xpython_debug_logs

docs/source/developer/repo.rst

@@ -61,7 +61,7 @@ The ``lab-dev`` endpoint is the equivalent of checking out the repo locally and
 The ``lab-spliced`` endpoint is the equivalent of building JupyterLab in spliced mode and running ``jupyter lab``.
 See the `Development workflow for source extensions <../extension/extension_dev.html#development-workflow-for-source-extensions>`__ for more information on spliced mode.
 
-Build utilities: ``builtutils/``
+Build utilities: ``buildutils/``
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 An ``npm`` package that contains several utility scripts for managing

packages/documentsearch/src/searchview.tsx

@@ -32,6 +32,7 @@ import { IFilter, IFilters, IReplaceOptionsSupport } from './tokens';
 const OVERLAY_CLASS = 'jp-DocumentSearch-overlay';
 const OVERLAY_ROW_CLASS = 'jp-DocumentSearch-overlay-row';
 const INPUT_CLASS = 'jp-DocumentSearch-input';
+const INPUT_LABEL_CLASS = 'jp-DocumentSearch-input-label';
 const INPUT_WRAPPER_CLASS = 'jp-DocumentSearch-input-wrapper';
 const INPUT_BUTTON_CLASS_OFF = 'jp-DocumentSearch-input-button-off';
 const INPUT_BUTTON_CLASS_ON = 'jp-DocumentSearch-input-button-on';
@@ -77,13 +78,19 @@ export interface ISearchKeyBindings {
 function SearchInput(props: ISearchInputProps): JSX.Element {
   const [rows, setRows] = useState<number>(1);
 
-  const updateRows = useCallback(
+  const updateDimensions = useCallback(
     (event?: React.SyntheticEvent<HTMLTextAreaElement>) => {
       const element = event
         ? (event.target as HTMLTextAreaElement)
         : props.inputRef?.current;
       if (element) {
-        setRows(element.value.split(/\n/).length);
+        const split = element.value.split(/\n/);
+        // use the longest string out of all lines to compute the width.
+        let longest = split.reduce((a, b) => (a.length > b.length ? a : b), '');
+        if (element.parentNode && element.parentNode instanceof HTMLElement) {
+          element.parentNode.dataset.value = longest;
+        }
+        setRows(split.length);
       }
     },
     []
@@ -98,31 +105,33 @@ function SearchInput(props: ISearchInputProps): JSX.Element {
     props.inputRef?.current?.select();
     // After any change to initial value we also want to update rows in case if
     // multi-line text was selected.
-    updateRows();
+    updateDimensions();
   }, [props.initialValue]);
 
   return (
-    <textarea
-      placeholder={props.placeholder}
-      className={INPUT_CLASS}
-      rows={rows}
-      onChange={e => {
-        props.onChange(e);
-        updateRows(e);
-      }}
-      onKeyDown={e => {
-        props.onKeyDown(e);
-        updateRows(e);
-      }}
-      // Setting a key ensures that `defaultValue` will become updated
-      // when the initial value changes.
-      key={props.autoUpdate ? props.initialValue : null}
-      tabIndex={0}
-      ref={props.inputRef}
-      title={props.title}
-      defaultValue={props.initialValue}
-      autoFocus={props.autoFocus}
-    ></textarea>
+    <label className={INPUT_LABEL_CLASS}>
+      <textarea
+        onChange={e => {
+          props.onChange(e);
+          updateDimensions(e);
+        }}
+        onKeyDown={e => {
+          props.onKeyDown(e);
+          updateDimensions(e);
+        }}
+        rows={rows}
+        placeholder={props.placeholder}
+        className={INPUT_CLASS}
+        // Setting a key ensures that `defaultValue` will become updated
+        // when the initial value changes.
+        key={props.autoUpdate ? props.initialValue : null}
+        tabIndex={0}
+        ref={props.inputRef}
+        title={props.title}
+        defaultValue={props.initialValue}
+        autoFocus={props.autoFocus}
+      ></textarea>
+    </label>
   );
 }
 

packages/documentsearch/style/base.css

@@ -82,11 +82,13 @@
 }
 
 .jp-DocumentSearch-toggle-wrapper {
+  flex-shrink: 0;
   width: 14px;
   height: 14px;
 }
 
 .jp-DocumentSearch-button-wrapper {
+  flex-shrink: 0;
   width: var(--jp-private-document-search-button-height);
   height: var(--jp-private-document-search-button-height);
 }
@@ -210,6 +212,7 @@
   margin: auto 2px;
   padding: 1px 4px;
   height: calc(var(--jp-private-document-search-button-height) + 2px);
+  flex-shrink: 0;
 }
 
 .jp-DocumentSearch-replace-button-wrapper:focus {
@@ -247,3 +250,37 @@
 .jp-DocumentSearch-replace-toggle:hover {
   background-color: var(--jp-layout-color2);
 }
+
+/*
+  The following few rules allow the search box to expand horizontally,
+  as the text within it grows. This is done by using putting
+  the text within a wrapper element and using that wrapper for sizing,
+  as <textarea> and <input> tags do not grow automatically.
+  This is the underlying technique:
+  https://til.simonwillison.net/css/resizing-textarea
+*/
+.jp-DocumentSearch-input-label::after {
+  content: attr(data-value) ' ';
+  visibility: hidden;
+  white-space: pre;
+}
+
+.jp-DocumentSearch-input-label {
+  display: inline-grid;
+  align-items: stretch;
+}
+
+.jp-DocumentSearch-input-label::after,
+.jp-DocumentSearch-input-label > .jp-DocumentSearch-input {
+  width: auto;
+  min-width: 1em;
+  grid-area: 1/2;
+  font: inherit;
+  padding: 2px 3px;
+  margin: 0;
+  resize: none;
+  background: none;
+  appearance: none;
+  border: none;
+  overflow: hidden;
+}