fix(EmptyState): composable heading

carbon-design-system · Dec 18, 2024 · 2a05665 · 2a05665
1 parent 5f4745b
commit 2a05665
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 15 deletions.
diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/EmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { EmptyStateV2 } from '.';
 
 // Other standard imports.
@@ -77,6 +77,11 @@ export interface EmptyStateProps {
     href?: string;
   };
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs?: (() => ReactNode) | string | ElementType;
+
   /**
    * Empty state size
    */
@@ -116,6 +121,7 @@ export let EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
       illustrationPosition = defaults.position,
       link,
       size = defaults.size,
+      headingAs,
       subtitle,
       title,
       ...rest
@@ -147,6 +153,7 @@ export let EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
           action={action}
           link={link}
           size={size}
+          headingAs={headingAs}
           subtitle={subtitle}
           title={title ?? ''}
         />
@@ -177,6 +184,11 @@ EmptyState.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
+
   /**
    * 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}`
@@ -195,7 +207,6 @@ EmptyState.propTypes = {
    * Designates the position of the illustration relative to the content
    */
   illustrationPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /**
    * Empty state link object
    */
@@ -205,7 +216,6 @@ EmptyState.propTypes = {
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     href: PropTypes.string,
   }),
-
   /**
    * Empty state size
    */

diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyStateContent.js b/packages/ibm-products/src/components/EmptyStates/EmptyStateContent.js
@@ -14,22 +14,30 @@ import { pkg } from '../../settings';
 import cx from 'classnames';
 
 // Carbon and package components we use.
-import { Button, Link } from '@carbon/react';
+import { Button, Link, Section } from '@carbon/react';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'EmptyStateContent';
 
-export const EmptyStateContent = ({ action, link, size, subtitle, title }) => {
+export const EmptyStateContent = ({
+  action,
+  link,
+  headingAs,
+  size,
+  subtitle,
+  title,
+}) => {
   return (
     <div className={`${blockClass}__content`}>
-      <h3
+      <Section
+        as={headingAs}
         className={cx(`${blockClass}__header`, {
           [`${blockClass}__header--small`]: size === 'sm',
         })}
       >
         {title}
-      </h3>
+      </Section>
       {subtitle && (
         <p
           className={cx(`${blockClass}__subtitle`, {
@@ -79,6 +87,10 @@ EmptyStateContent.propTypes = {
     onClick: Button.propTypes.onClick,
     text: PropTypes.string,
   }),
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * Empty state link object
    */

diff --git a/packages/ibm-products/src/components/EmptyStates/EmptyStates.stories.jsx b/packages/ibm-products/src/components/EmptyStates/EmptyStates.stories.jsx
@@ -42,6 +42,7 @@ export default {
 };
 
 const emptyStateCommonProps = {
+  headingAs: 'h3',
   title: 'Start by adding data assets',
   subtitle: (
     <>

diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.stories.jsx b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.stories.jsx
@@ -41,6 +41,7 @@ export default {
 };
 
 const defaultStoryProps = {
+  headingAs: 'h3',
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
   illustrationDescription: 'Test alt text',

diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -68,6 +68,10 @@ export interface ErrorEmptyStateProps {
     href?: string;
   };
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs?: (() => ReactNode) | string | ElementType;
   /**
    * Empty state size
    */
@@ -102,6 +106,7 @@ export let ErrorEmptyState = React.forwardRef<
       illustrationTheme,
       link,
       size = defaults.size,
+      headingAs,
       subtitle,
       title,
 
@@ -134,6 +139,7 @@ export let ErrorEmptyState = React.forwardRef<
           action={action}
           link={link}
           size={size}
+          headingAs={headingAs}
           subtitle={subtitle}
           title={title || ''}
         />
@@ -171,6 +177,11 @@ ErrorEmptyState.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
+
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

diff --git a/...ges/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.stories.jsx b/...ges/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.stories.jsx
@@ -41,6 +41,7 @@ export default {
 };
 
 const defaultStoryProps = {
+  headingAs: 'h3',
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
   illustrationDescription: 'Test alt text',

diff --git a/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -67,6 +67,11 @@ export interface NoDataEmptyStateProps {
     href?: string;
   };
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs?: (() => ReactNode) | string | ElementType;
+
   /**
    * Empty state size
    */
@@ -101,6 +106,7 @@ export let NoDataEmptyState = React.forwardRef<
       illustrationDescription,
       link,
       size = defaults.size,
+      headingAs,
       subtitle,
       title,
 
@@ -133,6 +139,7 @@ export let NoDataEmptyState = React.forwardRef<
           action={action}
           link={link}
           size={size}
+          headingAs={headingAs}
           subtitle={subtitle}
           title={title || ''}
         />
@@ -170,6 +177,11 @@ NoDataEmptyState.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
+
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

diff --git a/...ges/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.stories.jsx b/...ges/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.stories.jsx
@@ -41,6 +41,7 @@ export default {
 };
 
 const defaultStoryProps = {
+  headingAs: 'h3',
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
   illustrationDescription: 'Test alt text',

diff --git a/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -68,6 +68,11 @@ export interface NoTagsEmptyStateProps {
     href?: string;
   };
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs?: (() => ReactNode) | string | ElementType;
+
   /**
    * Empty state size
    */
@@ -102,6 +107,7 @@ export let NoTagsEmptyState = React.forwardRef<
       illustrationDescription,
       link,
       size = defaults.size,
+      headingAs,
       subtitle,
       title,
 
@@ -134,6 +140,7 @@ export let NoTagsEmptyState = React.forwardRef<
           action={action}
           link={link}
           size={size}
+          headingAs={headingAs}
           subtitle={subtitle}
           title={(title = '')}
         />
@@ -171,6 +178,11 @@ NoTagsEmptyState.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
+
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

diff --git a/...ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.stories.jsx b/...ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.stories.jsx
@@ -40,6 +40,7 @@ export default {
 };
 
 const defaultStoryProps = {
+  headingAs: 'h3',
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
   illustrationDescription: 'Test alt text',

diff --git a/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx b/packages/ibm-products/src/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.tsx
@@ -6,7 +6,7 @@
  */
 
 // Import portions of React that are needed.
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -67,6 +67,11 @@ export interface NotFoundEmptyStateProps {
     href?: string;
   };
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs?: (() => ReactNode) | string | ElementType;
+
   /**
    * Empty state size
    */
@@ -101,6 +106,7 @@ export let NotFoundEmptyState = React.forwardRef<
       illustrationDescription,
       link,
       size = defaults.size,
+      headingAs,
       subtitle,
       title,
 
@@ -133,6 +139,7 @@ export let NotFoundEmptyState = React.forwardRef<
           action={action}
           link={link}
           size={size}
+          headingAs={headingAs}
           subtitle={subtitle}
           title={title || ''}
         />
@@ -173,6 +180,11 @@ NotFoundEmptyState.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
+
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

diff --git a/...ts/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.stories.jsx b/...ts/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.stories.jsx
@@ -40,6 +40,7 @@ export default {
 };
 
 const defaultStoryProps = {
+  headingAs: 'h3',
   title: 'Empty state title',
   subtitle: 'Description text explaining why this section is empty.',
   illustrationDescription: 'Test alt text',