Update FilteredSearch docs and fix the z-index issue (#2242)

* Update FilteredSearch docs * update snapshots and add changeset
primer · Aug 22, 2022 · d46ae9f · d46ae9f
1 parent 9bb5f46
commit d46ae9f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/.changeset/nice-apples-collect.md b/.changeset/nice-apples-collect.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove z-index assignment that used to be necessary for the dropdown children of FilteredSearch
diff --git a/docs/content/FilteredSearch.md b/docs/content/FilteredSearch.md
@@ -15,14 +15,14 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
   <ActionMenu>
     <ActionMenu.Button as="summary">Filter</ActionMenu.Button>
     <ActionMenu.Overlay>
-      <ActionList direction="sw">
+      <ActionList>
         <ActionList.Item>Item 1</ActionList.Item>
         <ActionList.Item>Item 2</ActionList.Item>
         <ActionList.Item>Item 3</ActionList.Item>
       </ActionList>
     </ActionMenu.Overlay>
   </ActionMenu>
-  <TextInput icon={SearchIcon} />
+  <TextInput leadingVisual={SearchIcon} />
 </FilteredSearch>
 ```
 

diff --git a/src/FilteredSearch.tsx b/src/FilteredSearch.tsx
@@ -18,7 +18,6 @@ const FilteredSearch = styled.div<SxProp>`
     border-radius: 0;
     border-top-right-radius: ${get('radii.2')};
     border-bottom-right-radius: ${get('radii.2')};
-    z-index: 1; // Allows the focus outline to show on top of the dropdown.
   }
 
   ${sx}

diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`FilteredSearch renders consistently 1`] = `
   border-radius: 0;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
-  z-index: 1;
 }
 
 <div