feat: Adds class-name and data- props to error boundaries (#4221)

Author: pan-kot

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -11532,6 +11532,13 @@ exports[`Components definition for error-boundary matches the snapshot: error-bo
   "functions": [],
   "name": "ErrorBoundary",
   "properties": [
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Optional identifier for the error boundary instance.
 
@@ -11601,6 +11608,15 @@ attribute \`data-awsui-boundary-id={errorBoundaryId}\` to support debugging.",
       "optional": true,
       "type": "ErrorBoundaryProps.I18nStrings",
     },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Callback invoked when an error is intercepted by the boundary.
 Use this function to record, log, or report errors (for example, to telemetry or monitoring systems).

src/error-boundary/__tests__/error-boundary.test.tsx

@@ -17,7 +17,9 @@ jest.mock('../../../lib/components/error-boundary/utils', () => ({
 }));
 
 type RenderProps = Omit<
-  Partial<ErrorBoundaryProps> & { i18nProvider?: Record<string, Record<string, string>> },
+  Partial<ErrorBoundaryProps> & { i18nProvider?: Record<string, Record<string, string>> } & {
+    [key: `data-${string}`]: string;
+  },
   'children'
 >;
 
@@ -623,6 +625,23 @@ describe('default behaviors', () => {
   });
 });
 
+describe('base props passing to fallback', () => {
+  test('class name is added to the fallback', () => {
+    renderWithErrorBoundary(<b>{{}}</b>, { className: 'test' });
+    expect(findBoundary()!.getElement()).toHaveClass('test');
+  });
+
+  test('data-attributes are added to the fallback', () => {
+    renderWithErrorBoundary(<b>{{}}</b>, { 'data-resource-guidance': 'off' });
+    expect(findBoundary()!.getElement().dataset.resourceGuidance).toBe('off');
+  });
+
+  test('other attributes are not added to the fallback', () => {
+    renderWithErrorBoundary(<b>{{}}</b>, { 'aria-label': 'label' } as any);
+    expect(findBoundary()!.getElement()).not.toHaveAttribute('aria-label');
+  });
+});
+
 describe('__awsui__ API', () => {
   test('error state can be forced with forceError() and cleared with clearForcedError()', () => {
     const onError = jest.fn();

src/error-boundary/fallback.tsx

@@ -8,6 +8,7 @@ import IntlMessageFormat from 'intl-messageformat';
 import InternalAlert from '../alert/internal';
 import InternalButton from '../button/internal';
 import { useInternalI18n } from '../i18n/context';
+import { getBaseProps } from '../internal/base-component';
 import { ErrorBoundaryProps } from './interfaces';
 import { refreshPage } from './utils';
 
@@ -17,7 +18,9 @@ import testUtilStyles from './test-classes/styles.css.js';
 export function ErrorBoundaryFallback({
   i18nStrings = {},
   renderFallback,
+  ...props
 }: Pick<ErrorBoundaryProps, 'renderFallback' | 'i18nStrings'>) {
+  const baseProps = getBaseProps(props);
   const defaultSlots = {
     header: (
       <div className={clsx(styles.header, testUtilStyles.header)}>
@@ -36,7 +39,7 @@ export function ErrorBoundaryFallback({
     ),
   };
   return (
-    <div className={testUtilStyles.fallback}>
+    <div {...baseProps} className={clsx(baseProps.className, testUtilStyles.fallback)}>
       {renderFallback?.(defaultSlots) ?? (
         <InternalAlert type="error" header={defaultSlots.header} action={defaultSlots.action}>
           {defaultSlots.description}

src/error-boundary/interfaces.ts

@@ -3,7 +3,9 @@
 
 import { ErrorInfo } from 'react';
 
-export interface ErrorBoundaryProps {
+import { BaseComponentProps } from '../internal/base-component';
+
+export interface ErrorBoundaryProps extends BaseComponentProps {
   /**
    * Optional identifier for the error boundary instance.
    *