Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SelectPanel: Empty State - Explore SelectPanel.Message API and managing visibility of the component under the hood #4988

Draft
wants to merge 3 commits into
base: select_panel_loading_states
Choose a base branch
from
Draft

SelectPanel: Empty State - Explore SelectPanel.Message API and managing visibility of the component under the hood #4988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
19daa03
Explore SelectPanel.Messsage API and managing the visibility in the c…
broccolinisoup Sep 19, 2024
38ca715
fix linting and staff
broccolinisoup Sep 19, 2024
9895c58
footer not depend on empty state
broccolinisoup Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {useFeatureFlag} from '../FeatureFlags'

export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')

if (enabled) return <WithStableActionList {...props} />
else return <WithDeprecatedActionList {...props} />
}
Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export function FilteredActionList({
sx,
groupMetadata,
showItemDividers,
message,
...listProps
}: FilteredActionListProps): JSX.Element {
const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
Expand Down Expand Up @@ -150,7 +151,7 @@ export function FilteredActionList({
/>
</StyledHeader>
<VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
<Box ref={scrollContainerRef} overflow="auto">
<Box ref={scrollContainerRef} sx={{overflow: 'auto', height: '100%'}}>
{loading && loadingType.appearsInBody ? (
<FilteredActionListBodyLoader loadingType={loadingType} />
) : (
Expand All @@ -173,6 +174,7 @@ export function FilteredActionList({
})}
</ActionList>
)}
{message}
</Box>
</Box>
)
Expand Down
69 changes: 69 additions & 0 deletions packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
VersionsIcon,
} from '@primer/octicons-react'
import useSafeTimeout from '../hooks/useSafeTimeout'
import Link from '../Link'

const meta = {
title: 'Components/SelectPanel/Features',
Expand Down Expand Up @@ -422,3 +423,71 @@ export const AsyncFetch: StoryObj<typeof SelectPanel> = {
},
},
}

export const NoItems = () => {
const [selected, setSelected] = React.useState<ItemInput[]>([])
const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
const [open, setOpen] = useState(true)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const onFilterChange = (value: string = '') => {
setTimeout(() => {
// fetch the items
setFilteredItems([])
}, 0)
}
return (
<SelectPanel
title="Set projects"
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
<Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
{children ?? 'Select Labels'}
</Button>
)}
open={open}
onOpenChange={setOpen}
items={filteredItems}
selected={selected}
onSelectedChange={setSelected}
onFilterChange={onFilterChange}
overlayProps={{width: 'medium', height: 'large'}}
>
<SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
<Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
</SelectPanel.Message>
<SelectPanel.Message variant="nomatches" title={`No language found for `}>
Adjust your search term to find other languages
</SelectPanel.Message>
Comment on lines +454 to +459
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spiking about API options for the empty states. After having an initial conversation with @siddharthkp

Option 1 (As above code)

Pros

  • Straightforward. Consumers don't need to deal with calculating items length etc to display the empty state messages and which empty state they are going to display i.e. no items vs no matches

Cons

  • No flexibility to manage the visibility of the messages since everything is under the hood. There is a chance that it might not work for every usage if consumers have more params in determining the empty states. They can still manage it via this API but it would defeat its main motivation which is handling the complex stuff under the hood.

Option 2

We could simplify the API and let consumers worry about managing the empty state. Like below

<SelectPanel.Message variant="empty" title={noItemsState? `No items created yet' : No language found for'`}>
      {noItemsState? `Start creating your items here'  : Adjust your search term to find other languages}
</SelectPanel.Message>

Pros

  • Simple API

Cons

  • Consumers might choose to use the same messages for both empty states.
  • A bit more work for consumers to deal with managing the state.

Alternatively we can use a prop rather than children for providing the messages.

<SelectPanel
  message={<SelectPanel.Message variant="empty" title={noItemsState? `No items created yet' : No language found for'`}>
      {noItemsState? `Start creating your items here'  : Adjust your search term to find other languages}
</SelectPanel.Message>}
</SelectPanel>

Curious to hear what you think 🙌🏻 @siddharthkp @camertron

</SelectPanel>
)
}
export const NoMatches = () => {
const [selected, setSelected] = React.useState<ItemInput[]>([])
const [filter, setFilter] = React.useState<string>('')
const [open, setOpen] = useState(true)

const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
return (
<SelectPanel
title="Set projects"
renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
<Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
{children ?? 'Select Labels'}
</Button>
)}
open={open}
onOpenChange={setOpen}
items={filteredItems}
selected={selected}
onSelectedChange={setSelected}
onFilterChange={setFilter}
overlayProps={{width: 'medium', height: 'small'}}
>
<SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
<Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
</SelectPanel.Message>
<SelectPanel.Message variant="nomatches" title={`No language found for ${filter}`}>
Adjust your search term to find other languages
</SelectPanel.Message>
</SelectPanel>
)
}
77 changes: 68 additions & 9 deletions packages/react/src/SelectPanel/SelectPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type {AnchoredOverlayProps} from '../AnchoredOverlay'
import {AnchoredOverlay} from '../AnchoredOverlay'
import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
import Box from '../Box'
import Text from '../Text'
import type {FilteredActionListProps} from '../FilteredActionList'
import {FilteredActionList} from '../FilteredActionList'
import Heading from '../Heading'
Expand Down Expand Up @@ -49,11 +50,13 @@ interface SelectPanelBaseProps {
initialLoadingType?: InitialLoadingType
}

export type SelectPanelProps = SelectPanelBaseProps &
Omit<FilteredActionListProps, 'selectionVariant'> &
Pick<AnchoredOverlayProps, 'open'> &
AnchoredOverlayWrapperAnchorProps &
(SelectPanelSingleSelection | SelectPanelMultiSelection)
export type SelectPanelProps = React.PropsWithChildren<
SelectPanelBaseProps &
Omit<FilteredActionListProps, 'selectionVariant'> &
Pick<AnchoredOverlayProps, 'open'> &
AnchoredOverlayWrapperAnchorProps &
(SelectPanelSingleSelection | SelectPanelMultiSelection)
>

function isMultiSelectVariant(
selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'],
Expand All @@ -66,7 +69,42 @@ const focusZoneSettings: Partial<FocusZoneHookSettings> = {
disabled: true,
}

export function SelectPanel({
export type SelectPanelMessageProps = {
children: React.ReactNode
title: string
variant: 'noitems' | 'nomatches'
}
// we will have more variants in the future like error / warning etc
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({variant = 'noitems', title, children}) => {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
height: '100%',
gap: 1,
paddingX: 4,
textAlign: 'center',
a: {color: 'inherit', textDecoration: 'underline'},
minHeight: 'min(calc(var(--max-height) - 150px), 324px)',
// maxHeight of dialog - (header & footer)
}}
>
<Text sx={{fontSize: 1, fontWeight: 'semibold'}}>{title}</Text>
<Text
sx={{fontSize: 1, color: 'fg.muted', display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center'}}
>
{children}
</Text>
</Box>
)
}

function Panel({
open,
onOpenChange,
renderAnchor = props => {
Expand Down Expand Up @@ -94,6 +132,7 @@ export function SelectPanel({
sx,
loading,
initialLoadingType = 'spinner',
children,
...listProps
}: SelectPanelProps): JSX.Element {
const inputRef = React.useRef<HTMLInputElement>(null)
Expand Down Expand Up @@ -241,6 +280,19 @@ export function SelectPanel({
}
}

const isNoItemsState = items.length === 0 && dataLoadedOnce.current && !loading
const isNoMatchState = items.length === 0 && filterValue !== '' && dataLoadedOnce.current && !loading

const deconstructChildren = (children: React.ReactNode) => {
return React.Children.toArray(children).find(child => {
if (isNoMatchState) return child.props.variant === 'nomatches' && React.isValidElement(child)
else if (isNoItemsState) return child.props.variant === 'noitems' && React.isValidElement(child)
else return []
})
}

const message = deconstructChildren(children)

return (
<LiveRegion>
<AnchoredOverlay
Expand Down Expand Up @@ -279,6 +331,7 @@ export function SelectPanel({
</Box>
) : null}
</Box>

<FilteredActionList
filterValue={filterValue}
onFilterChange={onFilterChange}
Expand All @@ -295,11 +348,13 @@ export function SelectPanel({
inputRef={inputRef}
loading={isLoading}
loadingType={loadingType()}
message={message}
// inheriting height and maxHeight ensures that the FilteredActionList is never taller
// than the Overlay (which would break scrolling the items)
sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
/>
{footer && (

{footer ? (
<Box
sx={{
display: 'flex',
Expand All @@ -310,11 +365,15 @@ export function SelectPanel({
>
{footer}
</Box>
)}
) : null}
</Box>
</AnchoredOverlay>
</LiveRegion>
)
}

SelectPanel.displayName = 'SelectPanel'
Panel.displayName = 'SelectPanel'

export const SelectPanel = Object.assign(Panel, {
Message: SelectPanelMessage,
})
Loading