Skip to content

Commit 52350ae

Browse files
elycheeaelycheea
authored
refactor: EmptyState TS to extend Carbon ButtonProps (#7191)
* chore: extend ButtonProps in empty state actions * refactor(EmptyState): share common types
1 parent dd9e832 commit 52350ae

File tree

7 files changed

+27
-352
lines changed

7 files changed

+27
-352
lines changed

‎packages/ibm-products/src/components/EmptyStates/EmptyState.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
1818
import '../../global/js/utils/props-helper';
1919
import { pkg } from '../../settings';
2020
import { ButtonProps } from '@carbon/react';
21-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
2221

2322
import { EmptyStateContent } from './EmptyStateContent';
2423

@@ -38,16 +37,16 @@ export const defaults: { position: string; size: sizes; headingAs: string } = {
3837
headingAs: 'h3',
3938
};
4039

40+
interface EmptyStateAction extends ButtonProps<React.ElementType> {
41+
kind?: 'primary' | 'secondary' | 'tertiary';
42+
text?: string;
43+
}
44+
4145
export interface EmptyStateProps {
4246
/**
4347
* Empty state action button
4448
*/
45-
action?: {
46-
kind?: 'primary' | 'secondary' | 'tertiary';
47-
renderIcon?: CarbonIconType;
48-
onClick?: ButtonProps<React.ElementType>['onClick'];
49-
text?: string;
50-
};
49+
action?: EmptyStateAction;
5150

5251
/**
5352
* Provide an optional class to be applied to the containing node.
@@ -105,6 +104,8 @@ export interface EmptyStateProps {
105104
v2?: boolean;
106105
}
107106

107+
export type EmptyStatePresetProps = Omit<EmptyStateProps, 'illustration'>;
108+
108109
/**
109110
* The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
110111
*/

‎packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx‎

Lines changed: 3 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
// Import portions of React that are needed.
9-
import React, { ElementType, ReactNode } from 'react';
9+
import React from 'react';
1010

1111
// Other standard imports.
1212
import PropTypes from 'prop-types';
@@ -18,74 +18,20 @@ import { pkg } from '../../../settings';
1818

1919
import { EmptyStateContent } from '../EmptyStateContent';
2020
import ErrorIllustration from '../assets/ErrorIllustration';
21-
import { defaults } from '../EmptyState';
22-
import { ButtonProps } from '@carbon/react';
23-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
21+
import { defaults, EmptyStatePresetProps } from '../EmptyState';
2422

2523
// The block part of our conventional BEM class names (blockClass__E--M).
2624
const blockClass = `${pkg.prefix}--empty-state`;
2725
const componentName = 'ErrorEmptyState';
2826

29-
export interface ErrorEmptyStateProps {
30-
/**
31-
* Empty state action button
32-
*/
33-
action?: {
34-
kind?: 'primary' | 'secondary' | 'tertiary';
35-
renderIcon?: CarbonIconType;
36-
onClick?: ButtonProps<React.ElementType>['onClick'];
37-
text?: string;
38-
};
39-
40-
/**
41-
* Provide an optional class to be applied to the containing node.
42-
*/
43-
className?: string;
44-
45-
/**
46-
* The alt text for empty state svg images. If not provided , title will be used.
47-
*/
48-
illustrationDescription?: string;
49-
50-
/**
51-
* Designates the position of the illustration relative to the content
52-
*/
53-
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
54-
27+
export interface ErrorEmptyStateProps extends EmptyStatePresetProps {
5528
/**
5629
* Empty state illustration theme variations.
5730
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
5831
* based on your app's current theme value. Example:
5932
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
6033
*/
6134
illustrationTheme?: 'light' | 'dark';
62-
63-
/**
64-
* Empty state link object
65-
*/
66-
link?: {
67-
text?: string | ReactNode;
68-
href?: string;
69-
};
70-
71-
/**
72-
* Empty state headingAs allows you to customize the type of heading element
73-
*/
74-
headingAs?: (() => ReactNode) | string | ElementType;
75-
/**
76-
* Empty state size
77-
*/
78-
size?: 'lg' | 'sm';
79-
80-
/**
81-
* Empty state subtitle
82-
*/
83-
subtitle?: string | ReactNode;
84-
85-
/**
86-
* Empty state title
87-
*/
88-
title: string | ReactNode;
8935
}
9036

9137
/**

‎packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx‎

Lines changed: 4 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,86 +6,32 @@
66
*/
77

88
// Import portions of React that are needed.
9-
import React, { ElementType, ReactNode } from 'react';
9+
import React from 'react';
1010

1111
// Other standard imports.
1212
import PropTypes from 'prop-types';
1313
import cx from 'classnames';
14-
import { Button, Link, ButtonProps } from '@carbon/react';
15-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
14+
import { Button, Link } from '@carbon/react';
1615

1716
import { getDevtoolsProps } from '../../../global/js/utils/devtools';
1817
import { pkg } from '../../../settings';
1918

2019
import { EmptyStateContent } from '../EmptyStateContent';
2120
import NoDataIllustration from '../assets/NoDataIllustration';
22-
import { defaults } from '../EmptyState';
21+
import { defaults, EmptyStatePresetProps } from '../EmptyState';
2322

2423
// The block part of our conventional BEM class names (blockClass__E--M).
2524
const blockClass = `${pkg.prefix}--empty-state`;
2625
const componentName = 'NoDataEmptyState';
2726

28-
export interface NoDataEmptyStateProps {
29-
/**
30-
* Empty state action button
31-
*/
32-
action?: {
33-
kind?: 'primary' | 'secondary' | 'tertiary';
34-
renderIcon?: CarbonIconType;
35-
onClick?: ButtonProps<React.ElementType>['onClick'];
36-
text?: string;
37-
};
38-
39-
/**
40-
* Provide an optional class to be applied to the containing node.
41-
*/
42-
className?: string;
43-
44-
/**
45-
* The alt text for empty state svg images. If not provided, title will be used.
46-
*/
47-
illustrationDescription?: string;
48-
49-
/**
50-
* Designates the position of the illustration relative to the content
51-
*/
52-
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
53-
27+
export interface NoDataEmptyStateProps extends EmptyStatePresetProps {
5428
/**
5529
* Empty state illustration theme variations.
5630
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
5731
* based on your app's current theme value. Example:
5832
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
5933
*/
6034
illustrationTheme?: 'light' | 'dark';
61-
62-
/**
63-
* Empty state link object
64-
*/
65-
link?: {
66-
text?: string | ReactNode;
67-
href?: string;
68-
};
69-
70-
/**
71-
* Empty state headingAs allows you to customize the type of heading element
72-
*/
73-
headingAs?: (() => ReactNode) | string | ElementType;
74-
75-
/**
76-
* Empty state size
77-
*/
78-
size?: 'lg' | 'sm';
79-
80-
/**
81-
* Empty state subtitle
82-
*/
83-
subtitle?: string | React.ReactNode;
84-
85-
/**
86-
* Empty state title
87-
*/
88-
title: string | React.ReactNode;
8935
}
9036

9137
/**

‎packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx‎

Lines changed: 3 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
// Import portions of React that are needed.
9-
import React, { ElementType, ReactNode } from 'react';
9+
import React from 'react';
1010

1111
// Other standard imports.
1212
import PropTypes from 'prop-types';
@@ -18,75 +18,20 @@ import { pkg } from '../../../settings';
1818

1919
import { EmptyStateContent } from '../EmptyStateContent';
2020
import NoTagsIllustration from '../assets/NoTagsIllustration';
21-
import { defaults } from '../EmptyState';
22-
import { ButtonProps } from '@carbon/react';
23-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
21+
import { defaults, EmptyStatePresetProps } from '../EmptyState';
2422

2523
// The block part of our conventional BEM class names (blockClass__E--M).
2624
const blockClass = `${pkg.prefix}--empty-state`;
2725
const componentName = 'NoTagsEmptyState';
2826

29-
export interface NoTagsEmptyStateProps {
30-
/**
31-
* Empty state action button
32-
*/
33-
action?: {
34-
kind?: 'primary' | 'secondary' | 'tertiary';
35-
renderIcon?: CarbonIconType;
36-
onClick?: ButtonProps<React.ElementType>['onClick'];
37-
text?: string;
38-
};
39-
40-
/**
41-
* Provide an optional class to be applied to the containing node.
42-
*/
43-
className?: string;
44-
45-
/**
46-
* The alt text for empty state svg images. If not provided , title will be used.
47-
*/
48-
illustrationDescription?: string;
49-
50-
/**
51-
* Designates the position of the illustration relative to the content
52-
*/
53-
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
54-
27+
export interface NoTagsEmptyStateProps extends EmptyStatePresetProps {
5528
/**
5629
* Empty state illustration theme variations.
5730
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
5831
* based on your app's current theme value. Example:
5932
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
6033
*/
6134
illustrationTheme?: 'light' | 'dark';
62-
63-
/**
64-
* Empty state link object
65-
*/
66-
link?: {
67-
text?: string | ReactNode;
68-
href?: string;
69-
};
70-
71-
/**
72-
* Empty state headingAs allows you to customize the type of heading element
73-
*/
74-
headingAs?: (() => ReactNode) | string | ElementType;
75-
76-
/**
77-
* Empty state size
78-
*/
79-
size?: 'lg' | 'sm';
80-
81-
/**
82-
* Empty state subtitle
83-
*/
84-
subtitle?: string | ReactNode;
85-
86-
/**
87-
* Empty state title
88-
*/
89-
title: string | ReactNode;
9035
}
9136

9237
/**

‎packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx‎

Lines changed: 3 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
// Import portions of React that are needed.
9-
import React, { ElementType, ReactNode } from 'react';
9+
import React from 'react';
1010

1111
// Other standard imports.
1212
import PropTypes from 'prop-types';
@@ -18,74 +18,20 @@ import { pkg } from '../../../settings';
1818

1919
import { EmptyStateContent } from '../EmptyStateContent';
2020
import NotFoundIllustration from '../assets/NotFoundIllustration';
21-
import { defaults } from '../EmptyState';
22-
import { ButtonProps } from '@carbon/react';
23-
import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
21+
import { defaults, EmptyStatePresetProps } from '../EmptyState';
2422

2523
// The block part of our conventional BEM class names (blockClass__E--M).
2624
const blockClass = `${pkg.prefix}--empty-state`;
2725
const componentName = 'NotFoundEmptyState';
2826

29-
export interface NotFoundEmptyStateProps {
30-
/**
31-
* Empty state action button
32-
*/
33-
action?: {
34-
kind?: 'primary' | 'secondary' | 'tertiary';
35-
renderIcon?: CarbonIconType;
36-
onClick?: ButtonProps<React.ElementType>['onClick'];
37-
text?: string;
38-
};
39-
40-
/**
41-
* Provide an optional class to be applied to the containing node.
42-
*/
43-
className?: string;
44-
45-
/**
46-
* The alt text for empty state svg images. If not provided , title will be used.
47-
*/
48-
illustrationDescription?: string;
49-
/**
50-
* Designates the position of the illustration relative to the content
51-
*/
52-
illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
53-
27+
export interface NotFoundEmptyStateProps extends EmptyStatePresetProps {
5428
/**
5529
* Empty state illustration theme variations.
5630
* To ensure you use the correct themed illustrations, you can conditionally specify light or dark
5731
* based on your app's current theme value. Example:
5832
* `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
5933
*/
6034
illustrationTheme?: 'light' | 'dark';
61-
62-
/**
63-
* Empty state link object
64-
*/
65-
link?: {
66-
text?: string | ReactNode;
67-
href?: string;
68-
};
69-
70-
/**
71-
* Empty state headingAs allows you to customize the type of heading element
72-
*/
73-
headingAs?: (() => ReactNode) | string | ElementType;
74-
75-
/**
76-
* Empty state size
77-
*/
78-
size?: 'lg' | 'sm';
79-
80-
/**
81-
* Empty state subtitle
82-
*/
83-
subtitle: string | ReactNode;
84-
85-
/**
86-
* Empty state title
87-
*/
88-
title: string | ReactNode;
8935
}
9036

9137
/**

0 commit comments

Comments
 (0)