Migrate shortcuts search to filter box (#16216)

also fixes style of advanced options links, and adds missing cursor pointer styles
jupyterlab · Apr 24, 2024 · fd8fbbf · fd8fbbf
1 parent 8819549
commit fd8fbbf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/packages/shortcuts-extension/src/components/TopNav.tsx b/packages/shortcuts-extension/src/components/TopNav.tsx
@@ -4,7 +4,7 @@
  */
 
 import { ITranslator } from '@jupyterlab/translation';
-import { InputGroup } from '@jupyterlab/ui-components';
+import { FilterBox } from '@jupyterlab/ui-components';
 import * as React from 'react';
 
 import { ShortcutTitleItem } from './ShortcutTitleItem';
@@ -109,15 +109,13 @@ export class TopNav extends React.Component<ITopNavProps> {
       <div className="jp-Shortcuts-Top">
         <div className="jp-Shortcuts-TopNav">
           <Symbols />
-          <InputGroup
-            className="jp-Shortcuts-Search"
+          <FilterBox
             aria-label={trans.__('Search shortcuts')}
-            type="text"
-            onChange={event =>
-              this.props.updateSearchQuery(event.target['value'])
+            updateFilter={(_, query) =>
+              this.props.updateSearchQuery(query ?? '')
             }
             placeholder={trans.__('Search…')}
-            rightIcon="ui-components:search"
+            useFuzzyFilter={false}
           />
           <AdvancedOptions
             toggleSelectors={this.props.toggleSelectors}

diff --git a/packages/shortcuts-extension/style/base.css b/packages/shortcuts-extension/style/base.css
@@ -215,6 +215,7 @@
   border-radius: var(--jp-border-radius);
   padding: 5px 6px;
   margin: 3px 0;
+  cursor: pointer;
 }
 
 .jp-Shortcuts-Or {
@@ -248,6 +249,7 @@
   margin: 3px 0;
   padding: 5px 6px;
   color: var(--jp-ui-inverse-font-color1);
+  cursor: pointer;
 }
 
 .jp-Shortcuts-Plus:hover {
@@ -336,25 +338,15 @@
   padding-right: 10px;
 }
 
-.jp-Shortcuts-Search {
-  height: 30px;
-}
-
-.jp-Shortcuts-Search > input {
-  box-shadow: none;
-}
-
-.jp-Shortcuts-AdvancedOptionsSmall {
-  width: 30%;
-}
-
-.jp-Shortcuts-AdvancedOptionsRight {
-  margin-top: 8px;
+.jp-Shortcuts-AdvancedOptions {
+  padding-left: 12px;
 }
 
 .jp-Shortcuts-AdvancedOptionsLink {
   color: var(--jp-content-link-color);
   margin-right: 15px;
+  display: inline-block;
+  cursor: pointer;
 }
 
 .jp-Shortcuts-AdvancedOptionsLink:hover {