From fb62eb552839b3ec19faa9b3a522892de19214f4 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 8 Jun 2023 10:18:14 -0500 Subject: [PATCH] chore: include reverted changes --- .../FilteredActionList.stories.tsx | 46 +++++++++-------- .../SelectPanel.features.stories.tsx | 50 +++++++++++-------- src/SelectPanel/SelectPanel.test.tsx | 2 +- 3 files changed, 54 insertions(+), 44 deletions(-) diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx index ab1dbcc1b60..1b8d938c500 100644 --- 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 ( - - ) + return function () { + return ( + + ) + } } 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 index b833a8bb614..42b4f6ccf24 100644 --- 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 function getColorCircle(color: string) { - return ( - - ) + return function () { + return ( + + ) + } } 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'}} />
{ selected={selectedA} onSelectedChange={setSelectedA} onFilterChange={setFilter} + showItemDividers={true} overlayProps={{height: 'medium'}} />

With height:auto, maxheight:medium

@@ -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 index 551d742aaa3..05332623326 100644 --- 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)