chore: Fix logging of native attribute warnings (#3831)

Author: gethinwebster

src/badge/index.tsx

@@ -25,6 +25,7 @@ export default function Badge({ color = 'grey', children, style, nativeAttribute
     <WithNativeAttributes
       {...baseProps}
       tag="span"
+      componentName="Badge"
       nativeAttributes={nativeAttributes}
       className={className}
       ref={__internalRootRef}

src/button/internal.tsx

@@ -309,10 +309,12 @@ export const InternalButton = React.forwardRef(
       return (
         <>
           <WithNativeAttributes<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>
+            {...buttonProps}
+            {...disabledReasonProps}
             tag="a"
+            componentName="Button"
             nativeAttributes={nativeAnchorAttributes}
             skipWarnings={__skipNativeAttributesWarnings}
-            {...buttonProps}
             href={isNotInteractive ? undefined : href}
             role={isNotInteractive ? 'link' : undefined}
             tabIndex={getAnchorTabIndex()}
@@ -321,7 +323,6 @@ export const InternalButton = React.forwardRef(
             rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}
             aria-disabled={isNotInteractive ? true : undefined}
             download={download}
-            {...disabledReasonProps}
             style={stylePropertiesAndVariables}
           >
             {buttonContent}
@@ -339,14 +340,15 @@ export const InternalButton = React.forwardRef(
     return (
       <>
         <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>
+          {...buttonProps}
+          {...disabledReasonProps}
           tag="button"
+          componentName="Button"
           nativeAttributes={nativeButtonAttributes}
           skipWarnings={__skipNativeAttributesWarnings}
-          {...buttonProps}
           type={formAction === 'none' ? 'button' : 'submit'}
           disabled={disabled && !__focusable && !isDisabledWithReason}
           aria-disabled={hasAriaDisabled ? true : undefined}
-          {...disabledReasonProps}
           style={stylePropertiesAndVariables}
         >
           {buttonContent}

src/checkbox/internal.tsx

@@ -104,6 +104,7 @@ const InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(
           <WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
             {...nativeControlProps}
             tag="input"
+            componentName="Checkbox"
             nativeAttributes={nativeInputAttributes}
             ref={checkboxRef}
             type="checkbox"

src/icon/internal.tsx

@@ -100,6 +100,7 @@ const InternalIcon = ({
         {...baseProps}
         {...labelAttributes}
         tag="span"
+        componentName="Icon"
         nativeAttributes={nativeAttributes}
         ref={mergedRef}
         aria-hidden={!hasAriaLabel}
@@ -115,6 +116,7 @@ const InternalIcon = ({
       <WithNativeAttributes
         {...baseProps}
         tag="span"
+        componentName="Icon"
         nativeAttributes={nativeAttributes}
         ref={mergedRef}
         style={inlineStyles}
@@ -154,6 +156,7 @@ const InternalIcon = ({
       {...baseProps}
       {...labelAttributes}
       tag="span"
+      componentName="Icon"
       nativeAttributes={nativeAttributes}
       ref={mergedRef}
       style={inlineStyles}

src/internal/utils/__tests__/with-native-attributes.test.tsx

@@ -20,7 +20,7 @@ describe('WithNativeAttributes', () => {
 
   test('renders with basic props', () => {
     const { container } = render(
-      <WithNativeAttributes tag="div" nativeAttributes={{}}>
+      <WithNativeAttributes tag="div" componentName="" nativeAttributes={{}}>
         Test content
       </WithNativeAttributes>
     );
@@ -31,13 +31,13 @@ describe('WithNativeAttributes', () => {
   });
   test('works with different HTML tags', () => {
     const { container: spanContainer } = render(
-      <WithNativeAttributes tag="span" nativeAttributes={{}}>
+      <WithNativeAttributes tag="span" componentName="" nativeAttributes={{}}>
         Span content
       </WithNativeAttributes>
     );
 
     const { container: buttonContainer } = render(
-      <WithNativeAttributes tag="button" nativeAttributes={{}}>
+      <WithNativeAttributes tag="button" componentName="" nativeAttributes={{}}>
         Button content
       </WithNativeAttributes>
     );
@@ -50,6 +50,7 @@ describe('WithNativeAttributes', () => {
     const { container } = render(
       <WithNativeAttributes<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
         tag="div"
+        componentName=""
         className="test-class"
         nativeAttributes={undefined}
       >
@@ -64,7 +65,12 @@ describe('WithNativeAttributes', () => {
 
   test('concatenates className from rest props and nativeAttributes', () => {
     const { container } = render(
-      <WithNativeAttributes tag="div" className="base-class" nativeAttributes={{ className: 'native-class' }}>
+      <WithNativeAttributes
+        tag="div"
+        componentName=""
+        className="base-class"
+        nativeAttributes={{ className: 'native-class' }}
+      >
         Test content
       </WithNativeAttributes>
     );
@@ -78,6 +84,7 @@ describe('WithNativeAttributes', () => {
     const { container } = render(
       <WithNativeAttributes
         tag="div"
+        componentName=""
         style={{ color: 'red', fontSize: '16px' }}
         nativeAttributes={{ style: { backgroundColor: 'blue', fontSize: '18px' } }}
       >
@@ -96,7 +103,12 @@ describe('WithNativeAttributes', () => {
     const restHandler = jest.fn();
 
     const { container } = render(
-      <WithNativeAttributes tag="button" onClick={restHandler} nativeAttributes={{ onClick: nativeHandler }}>
+      <WithNativeAttributes
+        tag="button"
+        componentName=""
+        onClick={restHandler}
+        nativeAttributes={{ onClick: nativeHandler }}
+      >
         Click me
       </WithNativeAttributes>
     );
@@ -113,7 +125,12 @@ describe('WithNativeAttributes', () => {
     const restHandler = jest.fn();
 
     const { container } = render(
-      <WithNativeAttributes tag="button" onClick={restHandler} nativeAttributes={{ onClick: nativeHandler }}>
+      <WithNativeAttributes
+        tag="button"
+        componentName=""
+        onClick={restHandler}
+        nativeAttributes={{ onClick: nativeHandler }}
+      >
         Click me
       </WithNativeAttributes>
     );
@@ -127,22 +144,27 @@ describe('WithNativeAttributes', () => {
 
   test('overrides other attributes and shows warning', () => {
     const { container } = render(
-      <WithNativeAttributes tag="div" id="original-id" nativeAttributes={{ id: 'override-id' }}>
+      <WithNativeAttributes
+        tag="div"
+        componentName="my-component"
+        id="original-id"
+        nativeAttributes={{ id: 'override-id' }}
+      >
         Test content
       </WithNativeAttributes>
     );
 
     const element = container.firstElementChild!;
     expect(element.id).toBe('override-id');
     expect(mockedWarnOnce).toHaveBeenCalledWith(
-      'Button',
+      'my-component',
       'Overriding native attribute [id] which has a Cloudscape-provided value'
     );
   });
 
   test('passes through data attributes without warning', () => {
     const { container } = render(
-      <WithNativeAttributes tag="div" nativeAttributes={{ 'data-testid': 'test-element' }}>
+      <WithNativeAttributes tag="div" componentName="" nativeAttributes={{ 'data-testid': 'test-element' }}>
         Test content
       </WithNativeAttributes>
     );
@@ -154,7 +176,7 @@ describe('WithNativeAttributes', () => {
 
   test('does not allow children to be overrwitten', () => {
     const { container } = render(
-      <WithNativeAttributes tag="div" nativeAttributes={{ children: 'Something custom' } as any}>
+      <WithNativeAttributes tag="div" componentName="" nativeAttributes={{ children: 'Something custom' } as any}>
         Test content
       </WithNativeAttributes>
     );

src/internal/utils/with-native-attributes.tsx

@@ -14,6 +14,7 @@ type NativeAttributesProps<AT extends React.HTMLAttributes<HTMLElement>> = {
   children?: ReactNode;
   skipWarnings?: boolean;
   nativeAttributes: NativeAttributes<AT>;
+  componentName: string;
 } & NativeAttributes<AT>;
 interface ForwardRefType {
   <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(
@@ -23,7 +24,7 @@ interface ForwardRefType {
 
 export default React.forwardRef(
   <ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(
-    { tag, nativeAttributes, children, skipWarnings, ...rest }: NativeAttributesProps<AT>,
+    { tag, nativeAttributes, children, skipWarnings, componentName, ...rest }: NativeAttributesProps<AT>,
     ref: React.Ref<ET>
   ) => {
     const Tag = tag;
@@ -49,7 +50,7 @@ export default React.forwardRef(
         // override other attributes, warning if it already exists
       } else {
         if (key in rest && !skipWarnings) {
-          warnOnce('Button', `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
+          warnOnce(componentName, `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
         }
         acc[key] = value;
       }

src/spinner/internal.tsx

@@ -26,6 +26,7 @@ export default function InternalSpinner({
     <WithNativeAttributes
       {...baseProps}
       tag="span"
+      componentName="Spinner"
       nativeAttributes={nativeAttributes}
       className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}
       ref={__internalRootRef}