ref(ui): Refactor EmptyMessage to use core components and simplify API #103798
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| --- | ||
| title: EmptyMessage | ||
| description: A component for displaying empty states with optional icon, title, description, and action buttons. All text content uses balanced text wrapping for better readability. | ||
| source: 'sentry/components/emptyMessage' | ||
| resources: | ||
| js: https://github.com/getsentry/sentry/blob/master/static/app/components/emptyMessage.tsx | ||
| --- | ||
|
|
||
| import {Button} from 'sentry/components/core/button'; | ||
| import EmptyMessage from 'sentry/components/emptyMessage'; | ||
| import Panel from 'sentry/components/panels/panel'; | ||
| import {IconSearch} from 'sentry/icons'; | ||
| import * as Storybook from 'sentry/stories'; | ||
|
|
||
| To create a basic empty message, wrap your message in an `<EmptyMessage>` component. | ||
|
|
||
| ```jsx | ||
| <Panel> | ||
| <EmptyMessage> | ||
| This is a simple empty message with default styling and balanced text wrapping for | ||
| better readability. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| - **title** (`React.ReactNode`) - The title of the empty message | ||
| - **icon** (`React.ReactNode`) - Optional icon element | ||
| - **action** (`React.ReactElement`) - Optional action button | ||
| - **size** (`"md" | "lg"`) - Size of the text (default: md) | ||
| - **children** (`React.ReactNode`) - Main content text (automatically uses balanced text wrapping) | ||
|
|
||
| ## Examples | ||
|
|
||
| ### With Title | ||
|
|
||
| Add a title to provide context for the empty state. | ||
|
|
||
| <Storybook.Demo> | ||
| <Panel> | ||
| <EmptyMessage title="No Results Found"> | ||
| We couldn't find any results matching your search criteria. Try adjusting your | ||
| filters or search terms. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| </Storybook.Demo> | ||
| ```jsx | ||
| <EmptyMessage title="No Results Found"> | ||
| We couldn't find any results matching your search criteria. Try adjusting your filters | ||
| or search terms. | ||
| </EmptyMessage> | ||
| ``` | ||
|
|
||
| ### With Icon | ||
|
|
||
| Add an icon to make the empty state more visually distinctive. Icons are defaulted to `lg` size, so there is typically no need to specify an icon size. | ||
|
|
||
| <Storybook.Demo> | ||
| <Panel> | ||
| <EmptyMessage icon={<IconSearch />} title="No Results"> | ||
| We couldn't find any results matching your search criteria. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| </Storybook.Demo> | ||
| ```jsx | ||
| <EmptyMessage icon={<IconSearch />} title="No Results"> | ||
| We couldn't find any results matching your search criteria. | ||
| </EmptyMessage> | ||
| ``` | ||
|
|
||
| ### With Action | ||
|
|
||
| Add action buttons to guide users toward resolving the empty state. | ||
|
|
||
| <Storybook.Demo> | ||
| <Panel> | ||
| <EmptyMessage | ||
| icon={<IconSearch />} | ||
| title="No Results Found" | ||
| action={<Button priority="primary">Clear Filters</Button>} | ||
| > | ||
| We couldn't find any results matching your search criteria. Try adjusting your | ||
| filters or search terms. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| </Storybook.Demo> | ||
| ```jsx | ||
| <EmptyMessage | ||
| icon={<IconSearch />} | ||
| title="No Results Found" | ||
| action={<Button priority="primary">Clear Filters</Button>} | ||
| > | ||
| We couldn't find any results matching your search criteria. Try adjusting your filters | ||
| or search terms. | ||
| </EmptyMessage> | ||
| ``` | ||
|
|
||
| ### Sizes | ||
|
|
||
| EmptyMessage supports two sizes: `md` (default) and `lg`. | ||
|
|
||
| <Storybook.Demo> | ||
| <div style={{display: 'flex', gap: '1rem'}}> | ||
| <Panel style={{flex: 1}}> | ||
| <EmptyMessage icon={<IconSearch />} title="Medium Size"> | ||
| This is the default medium size empty message. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| <Panel style={{flex: 1}}> | ||
| <EmptyMessage size="lg" icon={<IconSearch />} title="Large Size"> | ||
| This is a large size empty message with bigger text. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| </div> | ||
| </Storybook.Demo> | ||
| ```jsx | ||
| <EmptyMessage size="medium" icon={<IconSearch />} title="Medium Size"> | ||
| This is the default medium size empty message. | ||
| </EmptyMessage> | ||
|
|
||
| <EmptyMessage size="lg" icon={<IconSearch />} title="Large Size"> | ||
| This is a large size empty message with bigger text. | ||
| </EmptyMessage> | ||
| ``` | ||
|
|
||
| ### Text Wrapping | ||
|
|
||
| All text content automatically uses CSS text-wrap balance mode for better readability, especially with longer messages. | ||
|
|
||
| <Storybook.Demo> | ||
| <Panel> | ||
| <EmptyMessage icon={<IconSearch />} title="Text Wrapping"> | ||
| Sure you haven't misspelled? If you're using a lesser-known platform, consider | ||
| choosing a more generic SDK like Browser JavaScript, Python, Node, .NET & Java or | ||
| create a generic project. | ||
| </EmptyMessage> | ||
| </Panel> | ||
| </Storybook.Demo> | ||
| ```jsx | ||
| <EmptyMessage icon={<IconSearch />} title="Text Wrapping"> | ||
| Sure you haven't misspelled? If you're using a lesser-known platform, consider choosing | ||
| a more generic SDK like Browser JavaScript, Python, Node, .NET & Java or create a | ||
| generic project. | ||
| </EmptyMessage> | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,51 @@ | ||
| import {useTheme} from '@emotion/react'; | ||
| import {mergeProps} from '@react-aria/utils'; | ||
|
|
||
| import {Container, Flex} from 'sentry/components/core/layout'; | ||
| import {Text} from 'sentry/components/core/text'; | ||
| import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults'; | ||
|
|
||
| interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> { | ||
| action?: React.ReactNode; | ||
| icon?: React.ReactNode; | ||
| size?: 'lg' | 'md'; | ||
| title?: React.ReactNode; | ||
| } | ||
|
|
||
| function EmptyMessage({title, icon, children, action, size, ...props}: Props) { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <Flex gap="xl" direction="column" padding="3xl"> | ||
| {stackProps => ( | ||
| <Text | ||
| align="center" | ||
| size={size} | ||
| data-test-id="empty-message" | ||
| {...mergeProps(stackProps, props)} | ||
| > | ||
| {icon && ( | ||
| <IconDefaultsProvider size="xl"> | ||
| <Container color={theme.isChonk ? theme.gray400 : theme.gray200}> | ||
|
Contributor
There was a problem hiding this comment. Bug: Icon color prop has no effectThe |
||
| {icon} | ||
| </Container> | ||
| </IconDefaultsProvider> | ||
| )} | ||
| {title && ( | ||
| <Text bold size="xl" density="comfortable"> | ||
| {title} | ||
| </Text> | ||
| )} | ||
| {children && ( | ||
| <Text textWrap="balance" density="comfortable"> | ||
| {children} | ||
| </Text> | ||
| )} | ||
| {action && <Container paddingTop="xl">{action}</Container>} | ||
| </Text> | ||
| )} | ||
|
Contributor
There was a problem hiding this comment. Bug: Invalid HTML nesting of div inside spanThe |
||
| </Flex> | ||
evanpurkhiser marked this conversation as resolved.
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment. Bug: Flex layout broken by Text display overrideThe |
||
| ); | ||
| } | ||
|
|
||
| export default EmptyMessage; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Invalid HTML nesting of div inside span
The
EmptyMessagecomponent usesTextas its root element, which defaults to rendering aspan. However, it containsContainerchildren (for the icon and action) that render asdivs. Nesting adivinside aspanis invalid HTML and can cause hydration mismatches or layout issues. TheTextcomponent should use theas="div"prop to render a block element.