add filter menu

Author: tsck

packages/code-editor/package.json

@@ -48,10 +48,12 @@
     "@leafygreen-ui/a11y": "workspace:^",
     "@leafygreen-ui/badge": "workspace:^",
     "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/checkbox": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/icon-button": "workspace:^",
+    "@leafygreen-ui/input-option": "workspace:^",
     "@leafygreen-ui/leafygreen-provider": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/menu": "workspace:^",

packages/code-editor/src/SearchPanel/SearchPanel.spec.tsx

@@ -18,8 +18,11 @@ import {
 } from '@codemirror/search';
 
 import { Button } from '@leafygreen-ui/button';
+import { Checkbox } from '@leafygreen-ui/checkbox';
 import { IconButton } from '@leafygreen-ui/icon-button';
+import { InputOption } from '@leafygreen-ui/input-option';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Menu, MenuVariant } from '@leafygreen-ui/menu';
 import { TextInput } from '@leafygreen-ui/text-input';
 import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
@@ -67,6 +70,15 @@ export function SearchPanel({
   const baseFontSize = useUpdatedBaseFontSize();
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
+  const findOptions = {
+    isCaseSensitive: 'Match case',
+    isRegex: 'Regexp',
+    isWholeWord: 'By word',
+  } as const;
+  const [highlightedOption, setHighlightedOption] = useState<string | null>(
+    null,
+  );
+
   const updateSelectedIndex = useCallback(() => {
     const cursor = query.getCursor(view.state.doc);
     const selection = view.state.selection.main;
@@ -246,9 +258,41 @@ export function SearchPanel({
                 {selectedIndex ?? '?'}/{findCount}
               </Body>
             )}
-            <IconButton aria-label="filter button">
-              <Icon glyph="Filter" />
-            </IconButton>
+            <Menu
+              trigger={
+                <IconButton aria-label="filter button">
+                  <Icon glyph="Filter" />
+                </IconButton>
+              }
+              renderDarkMenu={false}
+              variant={MenuVariant.Compact}
+            >
+              {Object.entries(findOptions).map(([key, value]) => (
+                <InputOption
+                  key={key}
+                  as="li"
+                  highlighted={highlightedOption === key}
+                >
+                  <Checkbox
+                    label={value}
+                    onChange={() => {
+                      switch (key) {
+                        case 'isCaseSensitive':
+                          setIsCaseSensitive(!isCaseSensitive);
+                          break;
+                        case 'isRegex':
+                          setIsRegex(!isRegex);
+                          break;
+                        case 'isWholeWord':
+                          setIsWholeWord(!isWholeWord);
+                          break;
+                      }
+                      setHighlightedOption(key);
+                    }}
+                  />
+                </InputOption>
+              ))}
+            </Menu>
           </div>
         </div>
         <IconButton

packages/code-editor/src/SearchPanel/SearchPanel.stories.tsx

@@ -18,12 +18,18 @@
     {
       "path": "../button"
     },
+    {
+      "path": "../checkbox"
+    },
     {
       "path": "../emotion"
     },
     {
       "path": "../hooks"
     },
+    {
+      "path": "../input-option"
+    },
     {
       "path": "../lib"
     },