chore: include reverted changes

primer · Jun 8, 2023 · fb62eb5 · fb62eb5
1 parent 266d40c
commit fb62eb5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 44 deletions.
diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx
@@ -1,7 +1,7 @@
 import {Meta} from '@storybook/react'
 import React from 'react'
 import {ThemeProvider} from '..'
-import {FilteredActionList, ItemInput} from '../FilteredActionList'
+import {FilteredActionList} from '../FilteredActionList'
 import BaseStyles from '../BaseStyles'
 import Box from '../Box'
 
@@ -26,33 +26,35 @@ const meta: Meta = {
 export default meta
 
 function getColorCircle(color: string) {
-  return (
-    <Box
-      bg={color}
-      borderColor={color}
-      width={14}
-      height={14}
-      borderRadius={10}
-      margin="auto"
-      borderWidth="1px"
-      borderStyle="solid"
-    />
-  )
+  return function () {
+    return (
+      <Box
+        bg={color}
+        borderColor={color}
+        width={14}
+        height={14}
+        borderRadius={10}
+        margin="auto"
+        borderWidth="1px"
+        borderStyle="solid"
+      />
+    )
+  }
 }
 
 const items = [
-  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
-  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
-  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
-  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
-  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
-  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
-  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
-] as ItemInput[]
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+]
 
 export function Default(): JSX.Element {
   const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
 
   return (
     <>

diff --git a/src/SelectPanel/SelectPanel.features.stories.tsx b/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -3,7 +3,7 @@ import {ComponentMeta} from '@storybook/react'
 
 import Box from '../Box'
 import {Button} from '../Button'
-import {ItemInput} from '../FilteredActionList'
+import {ItemInput} from '../deprecated/ActionList/List'
 import {SelectPanel} from './SelectPanel'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {OverlayProps} from '../Overlay'
@@ -14,28 +14,30 @@ export default {
 } as ComponentMeta<typeof SelectPanel>
 
 function getColorCircle(color: string) {
-  return (
-    <Box
-      bg={color}
-      borderColor={color}
-      width={14}
-      height={14}
-      borderRadius={10}
-      margin="auto"
-      borderWidth="1px"
-      borderStyle="solid"
-    />
-  )
+  return function () {
+    return (
+      <Box
+        bg={color}
+        borderColor={color}
+        width={14}
+        height={14}
+        borderRadius={10}
+        margin="auto"
+        borderWidth="1px"
+        borderStyle="solid"
+      />
+    )
+  }
 }
 
 const items = [
-  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
-  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
-  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
-  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
-  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
-  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
-  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
 ]
 
 export const SingleSelectStory = () => {
@@ -61,7 +63,6 @@ export const SingleSelectStory = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
-        showDividers={true}
         showItemDividers={true}
         overlayProps={{width: 'small', height: 'xsmall'}}
       />
@@ -93,6 +94,7 @@ export const ExternalAnchorStory = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{width: 'small', height: 'xsmall'}}
       />
     </>
@@ -123,6 +125,7 @@ export const SelectPanelHeightInitialWithOverflowingItemsStory = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
       />
     </>
@@ -154,6 +157,7 @@ export const SelectPanelHeightInitialWithUnderflowingItemsStory = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
       />
     </>
@@ -198,6 +202,7 @@ export const SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
       />
     </>
@@ -229,6 +234,7 @@ export const SelectPanelAboveTallBody = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{width: 'small', height: 'xsmall'}}
       />
       <div
@@ -270,6 +276,7 @@ export const SelectPanelHeightAndScroll = () => {
         selected={selectedA}
         onSelectedChange={setSelectedA}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{height: 'medium'}}
       />
       <h2>With height:auto, maxheight:medium</h2>
@@ -286,6 +293,7 @@ export const SelectPanelHeightAndScroll = () => {
         selected={selectedB}
         onSelectedChange={setSelectedB}
         onFilterChange={setFilter}
+        showItemDividers={true}
         overlayProps={{
           height: 'auto',
           maxHeight: 'medium',

diff --git a/src/SelectPanel/SelectPanel.test.tsx b/src/SelectPanel/SelectPanel.test.tsx
@@ -5,7 +5,7 @@ import theme from '../theme'
 import {SelectPanel} from '../SelectPanel'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemInput} from '../FilteredActionList'
+import {ItemInput} from '../deprecated/ActionList/List'
 
 expect.extend(toHaveNoViolations)