refactor(EmptyState): add types to EmptyState (#5711)

* refactor(EmptyState): implement types for EmptyState * refactor(EmptyStateV2): implement types for EmptyStateV2 * refactor(EmptyState): add types to EmptyStateContent * Revert "refactor(EmptyState): add types to EmptyStateContent" This reverts commit 4093c1c. * Revert "refactor(EmptyStateV2): implement types for EmptyStateV2" This reverts commit 0fa19ce. * Revert "refactor(EmptyState): implement types for EmptyState" This reverts commit b719dbb. * chore(EmptyState): convert emptystate to tsx * chore(EmptyStateV2): convert to tsx * chore(EmptyStateV2): convert to tsx --------- Co-authored-by: Alexander Melo <[email protected]>
carbon-design-system · Jul 30, 2024 · 95b7563 · 95b7563
1 parent 5d21bf8
commit 95b7563
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 54 deletions.
diff --git a/.../src/components/EmptyStates/EmptyState.js → ...src/components/EmptyStates/EmptyState.tsx b/.../src/components/EmptyStates/EmptyState.js → ...src/components/EmptyStates/EmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { EmptyStateV2 } from '.';
 
 // Other standard imports.
@@ -17,71 +17,142 @@ import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
+import { ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 
 import { EmptyStateContent } from './EmptyStateContent';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'EmptyState';
 
+enum sizes {
+  lg = 'lg',
+  sm = 'sm',
+}
+
 // Default values for props
-export const defaults = {
+export const defaults: { position: string; size: sizes } = {
   position: 'top',
-  size: 'lg',
+  size: sizes.lg,
 };
 
+interface EmptyStateProps {
+  /**
+   * Empty state action button
+   */
+  action?: {
+    kind?: 'primary' | 'secondary' | 'tertiary';
+    renderIcon?: CarbonIconType;
+    onClick?: ButtonProps['onClick'];
+    text?: string;
+  };
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className?: string;
+
+  /**
+   * Empty state illustration, specify the `src` for a provided illustration to be displayed. In the case of requiring a light and dark illustration of your own, simply pass the corresponding illustration based on the current theme of your application.
+   * For example: `illustration={appTheme === 'dark' ? darkIllustration : lightIllustration}`
+   */
+  illustration?: string;
+
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription?: string;
+
+  /**
+   * Designates the position of the illustration relative to the content
+   */
+  illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * Empty state link object
+   */
+  link?: {
+    text?: string | ReactNode;
+    href?: string;
+  };
+
+  /**
+   * Empty state size
+   */
+  size?: 'lg' | 'sm';
+
+  /**
+   * Empty state subtitle
+   */
+  subtitle?: string | ReactNode;
+
+  /**
+   * Empty state title
+   */
+  title: string | ReactNode;
+
+  /**
+   * Designates which version of the EmptyState component is being used.
+   * Refer to V2 documentation separately.
+   */
+  v2?: boolean;
+}
+
 /**
  * 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.
  */
-export let EmptyState = React.forwardRef(({ v2 = false, ...props }, ref) => {
-  // todo: deprecate v1
-  if (v2) {
-    return <EmptyStateV2 {...props} />;
-  }
-  const {
-    action,
-    className,
-    illustration,
-    illustrationDescription,
-    illustrationPosition = defaults.position,
-    link,
-    size = defaults.size,
-    subtitle,
-    title,
-    ...rest
-  } = props;
-  return (
-    <div
-      {
-        // Pass through any other property values as HTML attributes.
-        ...rest
-      }
-      className={cx(blockClass, `${blockClass}-type--default`, className, {
-        [`${blockClass}-position--${illustrationPosition}`]: !!illustration,
-      })}
-      ref={ref}
-      {...getDevtoolsProps(componentName)}
-    >
-      {illustration && (
-        <img
-          src={illustration}
-          alt={illustrationDescription}
-          className={cx([
-            `${blockClass}__illustration`,
-            `${blockClass}__illustration--${size}`,
-          ])}
+export let EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ v2 = false, ...props }, ref) => {
+    // todo: deprecate v1
+    if (v2) {
+      return <EmptyStateV2 {...props} />;
+    }
+    const {
+      action,
+      className,
+      illustration,
+      illustrationDescription,
+      illustrationPosition = defaults.position,
+      link,
+      size = defaults.size,
+      subtitle,
+      title,
+      ...rest
+    } = props;
+    return (
+      <div
+        {
+          // Pass through any other property values as HTML attributes.
+          ...rest
+        }
+        className={cx(blockClass, `${blockClass}-type--default`, className, {
+          [`${blockClass}-position--${illustrationPosition}`]: !!illustration,
+        })}
+        ref={ref}
+        {...getDevtoolsProps(componentName)}
+      >
+        {illustration && (
+          <img
+            src={illustration}
+            alt={illustrationDescription}
+            className={cx([
+              `${blockClass}__illustration`,
+              `${blockClass}__illustration--${size}`,
+            ])}
+          />
+        )}
+        <EmptyStateContent
+          action={action}
+          link={link}
+          size={size}
+          subtitle={subtitle}
+          title={title ?? ''}
         />
-      )}
-      <EmptyStateContent
-        action={action}
-        link={link}
-        size={size}
-        subtitle={subtitle}
-        title={title}
-      />
-    </div>
-  );
-});
+      </div>
+    );
+  }
+);
 
 // Return a placeholder if not released and not enabled by feature flag
 EmptyState = pkg.checkComponentEnabled(EmptyState, componentName);
@@ -112,6 +183,7 @@ EmptyState.propTypes = {
   /**
    * The alt text for custom provided illustrations
    */
+  /**@ts-ignore*/
   illustrationDescription: PropTypes.string.isRequired.if(
     ({ illustration }) => illustration
   ),

diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyStateV2.tsx b/packages/ibm-products/src/components/EmptyStates/EmptyStateV2.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023, 2023
+ * Copyright IBM Corp. 2023, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -68,7 +68,7 @@ interface EmptyStateV2Props {
    * Props for the link. Refer to the Carbon Components link documentation for full list of props.
    */
   link?: {
-    text?: string;
+    text?: string | ReactNode;
   };
 
   /**
@@ -237,7 +237,7 @@ EmptyStateV2.propTypes = {
    */
   /**@ts-ignore*/
   link: PropTypes.shape({
-    text: PropTypes.string,
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   }),
 
   /**