diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 2dcbacc83b2..d7b84a73836 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -7,15 +7,13 @@ import { ButtonVariant, EmptyState, EmptyStateBody, - EmptyStateIcon, EmptyStateActions, EmptyStateVariant, EmptyStateFooter, getResizeObserver, Popover, PopoverProps, - TooltipPosition, - EmptyStateHeader + TooltipPosition } from '@patternfly/react-core'; import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor'; import { editor } from 'monaco-editor/esm/vs/editor/editor.api'; @@ -520,12 +518,7 @@ class CodeEditor extends React.Component { const emptyState = providedEmptyState || (isUploadEnabled ? ( - - } - headingLevel="h4" - /> + {emptyStateBody} {!isReadOnly && ( @@ -543,12 +536,7 @@ class CodeEditor extends React.Component { )} ) : ( - - } - headingLevel="h4" - /> + {!isReadOnly && ( diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx index 6cf2f3ffc1a..53870b2bbef 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx @@ -11,10 +11,8 @@ import { SearchInput, EmptyState, EmptyStateVariant, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, - EmptyStateIcon, EmptyStateActions } from '@patternfly/react-core'; import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon'; @@ -139,8 +137,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => { }; const buildEmptyState = (isAvailable: boolean) => ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx index d92711defbe..1adeda4b975 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx @@ -11,11 +11,9 @@ import { Button, EmptyState, EmptyStateVariant, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, - EmptyStateActions, - EmptyStateIcon + EmptyStateActions } from '@patternfly/react-core'; import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; @@ -258,12 +256,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent {filterApplied && options.length === 0 && ( - - } - /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/EmptyState/EmptyState.tsx b/packages/react-core/src/components/EmptyState/EmptyState.tsx index 3c3b74322ba..07e6c1b01d0 100644 --- a/packages/react-core/src/components/EmptyState/EmptyState.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyState.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; +import { EmptyStateHeader, EmptyStateHeadingLevel } from './EmptyStateHeader'; +import { EmptyStateIconProps } from './EmptyStateIcon'; +import { statusIcons } from '../../helpers'; export enum EmptyStateVariant { 'xs' = 'xs', @@ -10,37 +13,79 @@ export enum EmptyStateVariant { full = 'full' } +export type EmptyStateStatus = 'danger' | 'warning' | 'success' | 'info' | 'custom'; +export type EmptyStateVariantType = 'xs' | 'sm' | 'lg' | 'xl' | 'full'; + export interface EmptyStateProps extends React.HTMLProps { /** Additional classes added to the empty state */ className?: string; /** Content rendered inside the empty state */ - children: React.ReactNode; + children?: React.ReactNode; /** Modifies empty state max-width and sizes of icon, title and body */ - variant?: 'xs' | 'sm' | 'lg' | 'xl' | 'full'; + variant?: EmptyStateVariantType; /** Cause component to consume the available height of its container */ isFullHeight?: boolean; + /** Status of the empty state, will set a default status icon and color. Icon can be overwritten using the icon prop */ + status?: EmptyStateStatus; + /** Additional class names to apply to the empty state header */ + headerClassName?: string; + /** Additional props passed to the empty state header container */ + headerProps?: React.HTMLProps; + /** Additional classes added to the title inside empty state header */ + titleClassName?: string; + /** Text of the title inside empty state header, will be wrapped in headingLevel */ + titleText: React.ReactNode; + /** Empty state icon element to be rendered. Can also be a spinner component */ + icon?: React.ComponentType; + /** Additional props passed to the icon element */ + iconProps?: EmptyStateIconProps; + /** The heading level to use, default is h1 */ + headingLevel?: EmptyStateHeadingLevel; } export const EmptyState: React.FunctionComponent = ({ children, className, - variant = EmptyStateVariant.full, + variant = 'full', isFullHeight, + status, + icon: customIcon, + titleText, + titleClassName, + headerClassName, + headingLevel, + headerProps, ...props -}: EmptyStateProps) => ( -
-
{children}
-
-); +}: EmptyStateProps) => { + const statusIcon = status && statusIcons[status]; + const icon = customIcon || statusIcon; + + return ( +
+
+ + {children} +
+
+ ); +}; EmptyState.displayName = 'EmptyState'; diff --git a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx index 2a108ca41ee..38749281a60 100644 --- a/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyStateHeader.tsx @@ -1,42 +1,40 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; -import { EmptyStateIconProps } from './EmptyStateIcon'; +import { EmptyStateIcon, EmptyStateIconProps } from './EmptyStateIcon'; + +export type EmptyStateHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export interface EmptyStateHeaderProps extends React.HTMLProps { - /** Content rendered inside the empty state header, either in addition to or instead of the titleText prop */ - children?: React.ReactNode; /** Additional classes added to the empty state header */ className?: string; /** Additional classes added to the title inside empty state header */ titleClassName?: string; /** Text of the title inside empty state header, will be wrapped in headingLevel */ - titleText?: React.ReactNode; - /** Empty state icon element to be rendered */ - icon?: React.ReactElement; + titleText: React.ReactNode; + /** Empty state icon element to be rendered. Can also be a spinner component */ + icon?: React.ComponentType; + /** Additional props passed to the icon element */ + iconProps?: EmptyStateIconProps; /** The heading level to use, default is h1 */ - headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + headingLevel?: EmptyStateHeadingLevel; } export const EmptyStateHeader: React.FunctionComponent = ({ - children, className, titleClassName, titleText, headingLevel: HeadingLevel = 'h1', - icon, + icon: Icon, + iconProps, ...props }: EmptyStateHeaderProps) => (
- {icon} - {(titleText || children) && ( -
- {titleText && ( - {titleText} - )} - {children} -
- )} + {Icon && } +
+ {titleText} +
); + EmptyStateHeader.displayName = 'EmptyStateHeader'; diff --git a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx index fb892e01e0b..dd9234e168d 100644 --- a/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx +++ b/packages/react-core/src/components/EmptyState/EmptyStateIcon.tsx @@ -2,14 +2,7 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; import { Spinner } from '../Spinner'; -import cssIconColor from '@patternfly/react-tokens/dist/esm/c_empty_state__icon_Color'; - -export interface IconProps extends Omit, 'size'> { - /** Changes the color of the icon. */ - color?: string; -} - -export interface EmptyStateIconProps extends IconProps { +export interface EmptyStateIconProps { /** Additional classes added to the empty state icon */ className?: string; /** Icon component to be rendered. Can also be a spinner component */ @@ -21,15 +14,12 @@ const isSpinner = (icon: React.ReactElement) => icon.type === Spinner; export const EmptyStateIcon: React.FunctionComponent = ({ className, icon: IconComponent, - color, ...props }: EmptyStateIconProps) => { const iconIsSpinner = isSpinner(); + return ( -
+
); diff --git a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx index bff4c5fd909..c080df284e8 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx +++ b/packages/react-core/src/components/EmptyState/__tests__/EmptyState.test.tsx @@ -10,14 +10,12 @@ import { EmptyStateActions } from '../EmptyStateActions'; import { Button } from '../../Button'; import { EmptyStateHeader } from '../EmptyStateHeader'; import { EmptyStateFooter } from '../EmptyStateFooter'; -import { EmptyStateIcon } from '../../../../dist/esm'; import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state'; describe('EmptyState', () => { test('Main', () => { const { asFragment } = render( - - + Defining HTTP Proxies that exist on your network allows you to perform various actions through those proxies. @@ -38,27 +36,21 @@ describe('EmptyState', () => { test('Main variant large', () => { const { asFragment } = render( - - - + ); expect(asFragment()).toMatchSnapshot(); }); test('Main variant small', () => { const { asFragment } = render( - - - + ); expect(asFragment()).toMatchSnapshot(); }); test('Main variant xs', () => { const { asFragment } = render( - - - + ); expect(asFragment()).toMatchSnapshot(); }); @@ -75,15 +67,13 @@ describe('EmptyState', () => { test('Full height', () => { const { asFragment } = render( - - - + ); expect(asFragment()).toMatchSnapshot(); }); test('Header with icon', () => { - const { asFragment } = render(} />); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); @@ -102,11 +92,6 @@ describe('EmptyState', () => { expect(screen.getByRole('heading', { level: 3, name: 'Empty state' })).toHaveClass(styles.emptyStateTitleText); }); - test('Headers render children', () => { - render(Title text); - expect(screen.getByText('Title text')).toBeVisible(); - }); - test('Footer', () => { render(); expect(screen.getByTestId('actions-test-id')).toHaveClass('custom-empty-state-footer'); diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx index 906756a3400..0e64025db6a 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx +++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx @@ -11,8 +11,6 @@ import { Spinner } from '../../../Spinner/Spinner'; it('EmptyStateIcon should match snapshot (auto-generated)', () => { const { asFragment } = render( @@ -23,8 +21,6 @@ it('EmptyStateIcon should match snapshot (auto-generated)', () => { it('EmptyStateIcon should match snapshot for variant container', () => { const { asFragment } = render( diff --git a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap index 1c98d3d5c64..9ca83f362d6 100644 --- a/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap +++ b/packages/react-core/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap @@ -4,11 +4,9 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
+
+

+ Empty state +

+
`; diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index 738ae02c5d2..9ee96c64cdb 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -2,12 +2,11 @@ id: Empty state section: components cssPrefix: pf-v5-c-empty-state -propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions'] +propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions'] --- import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; -import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; ## Examples ### Basic @@ -35,6 +34,10 @@ import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_s ```ts file="EmptyStateExtraLarge.tsx" ``` +### With status +```ts file="EmptyStateWithStatus.tsx" +``` + ### Spinner ```ts file="EmptyStateSpinner.tsx" @@ -44,8 +47,3 @@ import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_s ```ts file="EmptyStateNoMatchFound.tsx" ``` - -### Custom icon color - -```ts file="EmptyStateCustomIconColor.tsx" -``` diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx index 105cb71c426..907b6ff9d22 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx @@ -1,18 +1,9 @@ import React from 'react'; -import { - Button, - EmptyState, - EmptyStateBody, - EmptyStateActions, - EmptyStateHeader, - EmptyStateFooter, - EmptyStateIcon -} from '@patternfly/react-core'; +import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; export const EmptyStateBasic: React.FunctionComponent = () => ( - - } /> + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx deleted file mode 100644 index d5fdb7d2f76..00000000000 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core'; -import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; -/* eslint-disable camelcase */ -import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100'; - -export const EmptyStateCustomIconColor: React.FunctionComponent = () => ( - - } - /> - - This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to - use but flexible enough to meet a variety of needs. - - -); diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx index c5752199268..cb09ceb73a6 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx @@ -5,15 +5,12 @@ import { EmptyStateVariant, EmptyStateBody, EmptyStateActions, - EmptyStateHeader, - EmptyStateFooter, - EmptyStateIcon + EmptyStateFooter } from '@patternfly/react-core'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; export const EmptyStateExtraLarge: React.FunctionComponent = () => ( - - } /> + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx index 1c49330094d..ee483448546 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx @@ -5,17 +5,13 @@ import { EmptyStateVariant, EmptyStateBody, EmptyStateActions, - EmptyStateHeader, EmptyStateFooter } from '@patternfly/react-core'; +import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; export const EmptyStateExtraSmall: React.FunctionComponent = () => ( - - - - This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to - meet a variety of needs. - + + This represents an the empty state pattern in PatternFly. The icon is optional. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx index 5f0feacd5fb..062f66a9845 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx @@ -5,15 +5,12 @@ import { EmptyStateVariant, EmptyStateBody, EmptyStateActions, - EmptyStateHeader, - EmptyStateFooter, - EmptyStateIcon + EmptyStateFooter } from '@patternfly/react-core'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; export const EmptyStateLarge: React.FunctionComponent = () => ( - - } /> + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx index 3a928b4c1c7..ebc08c8d641 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx @@ -1,18 +1,9 @@ import React from 'react'; -import { - Button, - EmptyState, - EmptyStateBody, - EmptyStateHeader, - EmptyStateFooter, - EmptyStateActions, - EmptyStateIcon -} from '@patternfly/react-core'; +import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; export const EmptyStateNoMatchFound: React.FunctionComponent = () => ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx index e0b3b7a8996..eae0cc8e481 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx @@ -5,15 +5,12 @@ import { EmptyStateVariant, EmptyStateBody, EmptyStateActions, - EmptyStateHeader, - EmptyStateFooter, - EmptyStateIcon + EmptyStateFooter } from '@patternfly/react-core'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; export const EmptyStateSmall: React.FunctionComponent = () => ( - - } /> + This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx index 652cb34ccb5..6acd843b291 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx @@ -1,8 +1,6 @@ import React from 'react'; -import { EmptyState, EmptyStateHeader, EmptyStateIcon, Spinner } from '@patternfly/react-core'; +import { EmptyState, Spinner } from '@patternfly/react-core'; export const EmptyStateSpinner: React.FunctionComponent = () => ( - - } /> - + ); diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx new file mode 100644 index 00000000000..cb86ee4cf42 --- /dev/null +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { + EmptyState, + EmptyStateBody, + EmptyStateFooter, + EmptyStateActions, + EmptyStateStatus, + Button +} from '@patternfly/react-core'; + +export const EmptyStateWithStatus: React.FunctionComponent = () => { + const [status, setStatus] = React.useState('success'); + + const toggleStatus = () => { + interface StatusToggleMap { + [status: string]: EmptyStateStatus; + } + + const statusToggleMap: StatusToggleMap = { + success: 'danger', + danger: 'warning', + warning: 'info', + info: 'custom', + custom: 'success' + }; + + setStatus((prevStatus: EmptyStateStatus) => statusToggleMap[prevStatus]); + }; + + const titleMap = { + success: "You're all set", + danger: "You're not set", + warning: "You're probably not set", + info: 'You might be set', + custom: "You're custom" + }; + + return ( + + + This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible + enough to meet a variety of needs. + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index 3021a7bfc6c..8b58a2cb155 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -3,7 +3,6 @@ import { Button, EmptyState, EmptyStateBody, - EmptyStateHeader, EmptyStateFooter, NotificationDrawer, NotificationDrawerBody, @@ -16,7 +15,6 @@ import { NotificationDrawerListItemHeader, EmptyStateVariant, EmptyStateActions, - EmptyStateIcon, Dropdown, DropdownList, DropdownItem, @@ -377,12 +375,12 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => { truncateTitle={1} > - - } - /> + There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however. diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index 25263a10f49..9021d0812ea 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -4,7 +4,6 @@ import { EmptyState, EmptyStateBody, EmptyStateFooter, - EmptyStateHeader, EmptyStateVariant, NotificationDrawer, NotificationDrawerBody, @@ -15,8 +14,7 @@ import { NotificationDrawerListItem, NotificationDrawerListItemBody, NotificationDrawerListItemHeader, - EmptyStateActions, - EmptyStateIcon + EmptyStateActions } from '@patternfly/react-core'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; @@ -173,12 +171,12 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { isHidden={!thirdGroupExpanded} aria-label="Notifications in the third lightweight group" > - - } - /> + There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however. diff --git a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx index af17b4fa5ae..666643ff540 100644 --- a/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx +++ b/packages/react-core/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx @@ -4,11 +4,9 @@ import { Button, Alert, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, - EmptyStateIcon, Progress, Form, FormGroup, @@ -47,12 +45,12 @@ const ValidationProgress: React.FunctionComponent = ({ return (
- - } - /> + diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx index 5caa1e275af..a3cf9224a66 100644 --- a/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx +++ b/packages/react-core/src/components/Wizard/examples/WizardWithSubmitProgress.tsx @@ -1,11 +1,9 @@ import React from 'react'; import { EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, - EmptyStateIcon, Progress, Button, Wizard, @@ -37,12 +35,12 @@ const ValidationProgress: React.FunctionComponent = ({ return (
- - } - /> + diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx index 8e6d004f9ef..94618802668 100644 --- a/packages/react-core/src/demos/CardView/examples/CardView.tsx +++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx @@ -12,8 +12,6 @@ import { DropdownItem, DropdownList, EmptyState, - EmptyStateHeader, - EmptyStateIcon, EmptyStateFooter, EmptyStateVariant, EmptyStateActions, @@ -484,12 +482,12 @@ export const CardViewBasic: React.FunctionComponent = () => { - - } - /> + diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx index 71195ad840e..d01f2bec7e3 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx @@ -13,7 +13,6 @@ import { Popper, Pagination, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, Button, @@ -22,8 +21,7 @@ import { ToolbarGroup, ToolbarFilter, ToolbarToggleGroup, - EmptyStateActions, - EmptyStateIcon + EmptyStateActions } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; @@ -625,8 +623,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { ); const emptyState = ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx index d2315858746..89ce32876c7 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx @@ -12,7 +12,6 @@ import { Popper, Pagination, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, Button, @@ -21,7 +20,6 @@ import { ToolbarFilter, ToolbarToggleGroup, MenuGroup, - EmptyStateIcon, EmptyStateActions } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; @@ -442,8 +440,7 @@ export const FilterFaceted: React.FunctionComponent = () => { ); const emptyState = ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx index e5321c3277c..9fd942b67c2 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx @@ -12,7 +12,6 @@ import { Popper, Pagination, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, Button, @@ -20,7 +19,6 @@ import { Badge, ToolbarFilter, ToolbarToggleGroup, - EmptyStateIcon, EmptyStateActions } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; @@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { ); const emptyState = ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx index e8c74d36c98..491df5f43ab 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx @@ -12,13 +12,11 @@ import { Popper, Pagination, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, Button, Bullseye, ToolbarToggleGroup, - EmptyStateIcon, EmptyStateActions } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; @@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { ); const emptyState = ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx index 46111ca27bb..636688c7ec2 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx @@ -13,12 +13,10 @@ import { Popper, Pagination, EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, Button, Bullseye, - EmptyStateIcon, EmptyStateActions } from '@patternfly/react-core'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; @@ -274,8 +272,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { ); const emptyState = ( - - } /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index d237fe84aee..11d0c15f890 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -13,8 +13,6 @@ import { EmptyState, EmptyStateActions, EmptyStateBody, - EmptyStateIcon, - EmptyStateHeader, EmptyStateFooter, EmptyStateVariant, MenuToggle, @@ -505,12 +503,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { )} {!shouldShowNotifications && ( - - } - /> + There are currently no alerts. There may be silenced critical alerts however. diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index 250782181f1..45a26b7ff8d 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx @@ -13,8 +13,6 @@ import { EmptyState, EmptyStateActions, EmptyStateBody, - EmptyStateIcon, - EmptyStateHeader, EmptyStateFooter, EmptyStateVariant, MenuToggle, @@ -723,12 +721,12 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { onExpand={toggleThirdDrawer} > - - } - /> + There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however. @@ -744,12 +742,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { )} {!shouldShowNotifications && ( - - } - /> + There are currently no alerts. There may be silenced critical alerts however. diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx index b2dfd5c4381..ec37270ca55 100644 --- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx +++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx @@ -3,8 +3,6 @@ import { Button, EmptyState, EmptyStateBody, - EmptyStateHeader, - EmptyStateIcon, NotificationBadge, NotificationBadgeVariant, NotificationDrawer, @@ -297,12 +295,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () )} {notifications.length === 0 && ( - - } - /> + There are currently no notifications. )} diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx index 7fd53ead52d..b27fe110d36 100644 --- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx +++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardFinished.tsx @@ -1,11 +1,9 @@ import React from 'react'; import { EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, - EmptyStateIcon, Progress, Button } from '@patternfly/react-core'; @@ -43,12 +41,12 @@ const FinishedStep: React.FunctionComponent = (props: finishedPro return (
- - } - /> + diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx index 96bb52aebd2..53484e9ba33 100644 --- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx +++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { EmptyState, - EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, @@ -10,8 +9,7 @@ import { TextInput, Progress, Button, - Alert, - EmptyStateIcon + Alert } from '@patternfly/react-core'; import { Wizard as WizardDeprecated, @@ -52,12 +50,12 @@ const FinishedStep: React.FunctionComponent = (props: finishedPro return (
- - } - /> + diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts index 28d65f13de3..b12b6f01e88 100644 --- a/packages/react-core/src/helpers/constants.ts +++ b/packages/react-core/src/helpers/constants.ts @@ -10,6 +10,12 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_h import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl'; import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' }; export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' }; @@ -47,3 +53,11 @@ export const globalHeightBreakpoints = { xl: parseInt(globalHeightBreakpointXl.value), '2xl': parseInt(globalHeightBreakpoint2xl.value) }; + +export const statusIcons = { + success: CheckCircleIcon, + danger: ExclamationCircleIcon, + warning: ExclamationTriangleIcon, + info: InfoCircleIcon, + custom: BellIcon +}; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx index 935e3318608..df35a328cc1 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx @@ -2,9 +2,7 @@ import React from 'react'; import { Button, EmptyState, - EmptyStateHeader, EmptyStateBody, - EmptyStateIcon, EmptyStateVariant, NotificationDrawer, NotificationDrawerProps, @@ -35,10 +33,7 @@ interface GroupsNotificationDrawerDemoState { thirdGroupExpanded: boolean; } -export class GroupsNotificationDrawerDemo extends React.Component< - NotificationDrawerProps, - GroupsNotificationDrawerDemoState -> { +class GroupsNotificationDrawerDemo extends React.Component { static displayName = 'GroupsNotificationDrawerDemo'; constructor(props: NotificationDrawerProps) { super(props); @@ -400,12 +395,12 @@ export class GroupsNotificationDrawerDemo extends React.Component< onExpand={this.toggleThirdDrawer} > - - } - /> + There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however. @@ -424,3 +419,7 @@ export class GroupsNotificationDrawerDemo extends React.Component< ); } } + +GroupsNotificationDrawerDemo.displayName = 'GroupsNotificationDrawerDemo'; + +export { GroupsNotificationDrawerDemo }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx index 332d25a05ea..98ce7b28253 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerLightweightDemo.tsx @@ -3,7 +3,6 @@ import { Button, EmptyState, EmptyStateBody, - EmptyStateIcon, EmptyStateVariant, NotificationDrawer, NotificationDrawerProps, @@ -15,8 +14,6 @@ import { NotificationDrawerListItem, NotificationDrawerListItemBody, NotificationDrawerListItemHeader, - Title, - EmptyStateHeader, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core'; @@ -28,7 +25,7 @@ interface GroupsNotificationDrawerDemoState { thirdGroupIsOpen: boolean; } -export class LightweightNotificationDrawerDemo extends React.Component< +class LightweightNotificationDrawerDemo extends React.Component< NotificationDrawerProps, GroupsNotificationDrawerDemoState > { @@ -191,12 +188,12 @@ export class LightweightNotificationDrawerDemo extends React.Component< onExpand={this.toggleThirdDrawer} > - - } - /> + There are currently no critical alerts firing. There may be firing alerts of other severities or silenced critical alerts however. @@ -215,3 +212,7 @@ export class LightweightNotificationDrawerDemo extends React.Component< ); } } + +LightweightNotificationDrawerDemo.displayName = 'LightweightNotificationDrawerDemo'; + +export { LightweightNotificationDrawerDemo }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx index 7fa388c6006..769e0c917ea 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx @@ -5,16 +5,14 @@ import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-tab import { EmptyState, EmptyStateBody, - EmptyStateIcon, EmptyStateActions, Button, EmptyStateVariant, - EmptyStateHeader, EmptyStateFooter } from '@patternfly/react-core'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; -export class EmptyStateTable extends React.Component { +class EmptyStateTable extends React.Component { static displayName = 'EmptyStateTable'; constructor(props: TableProps) { super(props); @@ -31,8 +29,7 @@ export class EmptyStateTable extends React.Component - } headingLevel="h5" /> + This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs. @@ -66,3 +63,7 @@ export class EmptyStateTable extends React.Component ( - - } - titleText="No results found" - headingLevel="h2" - /> + Clear all filters and try again. diff --git a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx index ab9febef731..98803ffc12e 100644 --- a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx +++ b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx @@ -6,9 +6,7 @@ import { Card, EmptyState, EmptyStateVariant, - EmptyStateIcon, EmptyStateBody, - EmptyStateHeader, EmptyStateFooter, EmptyStateActions, PageSection @@ -34,12 +32,12 @@ export const TableEmptyStateDefault: React.FunctionComponent = () => ( - - } - titleText="No results found" - headingLevel="h2" - /> + No results match this filter criteria. Clear all filters and try again. diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx index c291b619f2b..abf68863499 100644 --- a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx +++ b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx @@ -1,17 +1,6 @@ import React from 'react'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; -import { - Bullseye, - Card, - EmptyState, - EmptyStateVariant, - EmptyStateIcon, - EmptyStateBody, - EmptyStateHeader, - PageSection -} from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200'; +import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper'; export const TableEmptyStateError: React.FunctionComponent = () => ( @@ -32,12 +21,12 @@ export const TableEmptyStateError: React.FunctionComponent = () => ( - - } - headingLevel="h2" - /> + There was an error retrieving data. Check your connection and reload the page. diff --git a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx index 229a6a327fc..4f015025306 100644 --- a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx +++ b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx @@ -1,14 +1,6 @@ import React from 'react'; import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; -import { - Bullseye, - Card, - EmptyState, - EmptyStateIcon, - EmptyStateHeader, - PageSection, - Spinner -} from '@patternfly/react-core'; +import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper'; export const TableEmptyStateLoading: React.FunctionComponent = () => ( @@ -29,9 +21,7 @@ export const TableEmptyStateLoading: React.FunctionComponent = () => ( - - } /> - + diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx index 0d40da804fe..ded33e8c2bc 100644 --- a/packages/react-table/src/demos/examples/TableFilterable.tsx +++ b/packages/react-table/src/demos/examples/TableFilterable.tsx @@ -6,8 +6,6 @@ import { EmptyState, EmptyStateActions, EmptyStateBody, - EmptyStateIcon, - EmptyStateHeader, EmptyStateFooter, Label, MenuToggle, @@ -308,12 +306,7 @@ export const TableFilterable: React.FunctionComponent = () => { : rowData; const emptyState = ( - - } - /> + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx index b15b7f8a765..d49cd0cf29e 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx @@ -4,10 +4,8 @@ import { Bullseye, EmptyState, EmptyStateVariant, - EmptyStateIcon, EmptyStateBody, Button, - EmptyStateHeader, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core'; @@ -26,12 +24,12 @@ export const LegacyTableEmptyState: React.FunctionComponent = () => { props: { colSpan: 8 }, title: ( - - } - headingLevel="h2" - /> + Clear all filters and try again. diff --git a/yarn.lock b/yarn.lock index adcd84d9244..d1983fe9525 100644 --- a/yarn.lock +++ b/yarn.lock @@ -107,7 +107,7 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11" integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ== -"@babel/compat-data@^7.23.5": +"@babel/compat-data@^7.22.9": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98" integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw== @@ -458,21 +458,6 @@ "@babel/helper-split-export-declaration" "^7.22.6" semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.23.6": - version "7.23.6" - resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.6.tgz#b04d915ce92ce363666f816a884cdcfc9be04953" - integrity sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw== - dependencies: - "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-environment-visitor" "^7.22.20" - "@babel/helper-function-name" "^7.23.0" - "@babel/helper-member-expression-to-functions" "^7.23.0" - "@babel/helper-optimise-call-expression" "^7.22.5" - "@babel/helper-replace-supers" "^7.22.20" - "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - semver "^6.3.1" - "@babel/helper-create-regexp-features-plugin@^7.12.13": version "7.12.17" resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz" @@ -525,7 +510,7 @@ resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz#ac3a56dbada59ed969d712cf527bd8271fe3eba8" integrity sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA== -"@babel/helper-environment-visitor@^7.22.20": +"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167" integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA== @@ -663,7 +648,7 @@ dependencies: "@babel/types" "^7.22.3" -"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0": +"@babel/helper-member-expression-to-functions@^7.22.15": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366" integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA== @@ -872,7 +857,7 @@ "@babel/traverse" "^7.22.1" "@babel/types" "^7.22.0" -"@babel/helper-replace-supers@^7.22.20": +"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.9": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793" integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw== @@ -1030,7 +1015,7 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8" integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw== -"@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5": +"@babel/helper-validator-option@^7.22.15": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307" integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw== @@ -6480,7 +6465,7 @@ browserslist@^4.21.3: node-releases "^2.0.8" update-browserslist-db "^1.0.10" -browserslist@^4.22.2: +browserslist@^4.21.9, browserslist@^4.22.1: version "4.22.2" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b" integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==