Skip to content

Commit ade060d

Browse files
gethinwebstergethinwebster
authored
chore: Fix logging of native attribute warnings (#3831)
1 parent 1f4503d commit ade060d

File tree

7 files changed

+47
-16
lines changed

7 files changed

+47
-16
lines changed

‎src/badge/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function Badge({ color = 'grey', children, style, nativeAttribute
2525
<WithNativeAttributes
2626
{...baseProps}
2727
tag="span"
28+
componentName="Badge"
2829
nativeAttributes={nativeAttributes}
2930
className={className}
3031
ref={__internalRootRef}

‎src/button/internal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -309,10 +309,12 @@ export const InternalButton = React.forwardRef(
309309
return (
310310
<>
311311
<WithNativeAttributes<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>
312+
{...buttonProps}
313+
{...disabledReasonProps}
312314
tag="a"
315+
componentName="Button"
313316
nativeAttributes={nativeAnchorAttributes}
314317
skipWarnings={__skipNativeAttributesWarnings}
315-
{...buttonProps}
316318
href={isNotInteractive ? undefined : href}
317319
role={isNotInteractive ? 'link' : undefined}
318320
tabIndex={getAnchorTabIndex()}
@@ -321,7 +323,6 @@ export const InternalButton = React.forwardRef(
321323
rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}
322324
aria-disabled={isNotInteractive ? true : undefined}
323325
download={download}
324-
{...disabledReasonProps}
325326
style={stylePropertiesAndVariables}
326327
>
327328
{buttonContent}
@@ -339,14 +340,15 @@ export const InternalButton = React.forwardRef(
339340
return (
340341
<>
341342
<WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>
343+
{...buttonProps}
344+
{...disabledReasonProps}
342345
tag="button"
346+
componentName="Button"
343347
nativeAttributes={nativeButtonAttributes}
344348
skipWarnings={__skipNativeAttributesWarnings}
345-
{...buttonProps}
346349
type={formAction === 'none' ? 'button' : 'submit'}
347350
disabled={disabled && !__focusable && !isDisabledWithReason}
348351
aria-disabled={hasAriaDisabled ? true : undefined}
349-
{...disabledReasonProps}
350352
style={stylePropertiesAndVariables}
351353
>
352354
{buttonContent}

‎src/checkbox/internal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(
104104
<WithNativeAttributes<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>
105105
{...nativeControlProps}
106106
tag="input"
107+
componentName="Checkbox"
107108
nativeAttributes={nativeInputAttributes}
108109
ref={checkboxRef}
109110
type="checkbox"

‎src/icon/internal.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ const InternalIcon = ({
100100
{...baseProps}
101101
{...labelAttributes}
102102
tag="span"
103+
componentName="Icon"
103104
nativeAttributes={nativeAttributes}
104105
ref={mergedRef}
105106
aria-hidden={!hasAriaLabel}
@@ -115,6 +116,7 @@ const InternalIcon = ({
115116
<WithNativeAttributes
116117
{...baseProps}
117118
tag="span"
119+
componentName="Icon"
118120
nativeAttributes={nativeAttributes}
119121
ref={mergedRef}
120122
style={inlineStyles}
@@ -154,6 +156,7 @@ const InternalIcon = ({
154156
{...baseProps}
155157
{...labelAttributes}
156158
tag="span"
159+
componentName="Icon"
157160
nativeAttributes={nativeAttributes}
158161
ref={mergedRef}
159162
style={inlineStyles}

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

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('WithNativeAttributes', () => {
2020

2121
test('renders with basic props', () => {
2222
const { container } = render(
23-
<WithNativeAttributes tag="div" nativeAttributes={{}}>
23+
<WithNativeAttributes tag="div" componentName="" nativeAttributes={{}}>
2424
Test content
2525
</WithNativeAttributes>
2626
);
@@ -31,13 +31,13 @@ describe('WithNativeAttributes', () => {
3131
});
3232
test('works with different HTML tags', () => {
3333
const { container: spanContainer } = render(
34-
<WithNativeAttributes tag="span" nativeAttributes={{}}>
34+
<WithNativeAttributes tag="span" componentName="" nativeAttributes={{}}>
3535
Span content
3636
</WithNativeAttributes>
3737
);
3838

3939
const { container: buttonContainer } = render(
40-
<WithNativeAttributes tag="button" nativeAttributes={{}}>
40+
<WithNativeAttributes tag="button" componentName="" nativeAttributes={{}}>
4141
Button content
4242
</WithNativeAttributes>
4343
);
@@ -50,6 +50,7 @@ describe('WithNativeAttributes', () => {
5050
const { container } = render(
5151
<WithNativeAttributes<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
5252
tag="div"
53+
componentName=""
5354
className="test-class"
5455
nativeAttributes={undefined}
5556
>
@@ -64,7 +65,12 @@ describe('WithNativeAttributes', () => {
6465

6566
test('concatenates className from rest props and nativeAttributes', () => {
6667
const { container } = render(
67-
<WithNativeAttributes tag="div" className="base-class" nativeAttributes={{ className: 'native-class' }}>
68+
<WithNativeAttributes
69+
tag="div"
70+
componentName=""
71+
className="base-class"
72+
nativeAttributes={{ className: 'native-class' }}
73+
>
6874
Test content
6975
</WithNativeAttributes>
7076
);
@@ -78,6 +84,7 @@ describe('WithNativeAttributes', () => {
7884
const { container } = render(
7985
<WithNativeAttributes
8086
tag="div"
87+
componentName=""
8188
style={{ color: 'red', fontSize: '16px' }}
8289
nativeAttributes={{ style: { backgroundColor: 'blue', fontSize: '18px' } }}
8390
>
@@ -96,7 +103,12 @@ describe('WithNativeAttributes', () => {
96103
const restHandler = jest.fn();
97104

98105
const { container } = render(
99-
<WithNativeAttributes tag="button" onClick={restHandler} nativeAttributes={{ onClick: nativeHandler }}>
106+
<WithNativeAttributes
107+
tag="button"
108+
componentName=""
109+
onClick={restHandler}
110+
nativeAttributes={{ onClick: nativeHandler }}
111+
>
100112
Click me
101113
</WithNativeAttributes>
102114
);
@@ -113,7 +125,12 @@ describe('WithNativeAttributes', () => {
113125
const restHandler = jest.fn();
114126

115127
const { container } = render(
116-
<WithNativeAttributes tag="button" onClick={restHandler} nativeAttributes={{ onClick: nativeHandler }}>
128+
<WithNativeAttributes
129+
tag="button"
130+
componentName=""
131+
onClick={restHandler}
132+
nativeAttributes={{ onClick: nativeHandler }}
133+
>
117134
Click me
118135
</WithNativeAttributes>
119136
);
@@ -127,22 +144,27 @@ describe('WithNativeAttributes', () => {
127144

128145
test('overrides other attributes and shows warning', () => {
129146
const { container } = render(
130-
<WithNativeAttributes tag="div" id="original-id" nativeAttributes={{ id: 'override-id' }}>
147+
<WithNativeAttributes
148+
tag="div"
149+
componentName="my-component"
150+
id="original-id"
151+
nativeAttributes={{ id: 'override-id' }}
152+
>
131153
Test content
132154
</WithNativeAttributes>
133155
);
134156

135157
const element = container.firstElementChild!;
136158
expect(element.id).toBe('override-id');
137159
expect(mockedWarnOnce).toHaveBeenCalledWith(
138-
'Button',
160+
'my-component',
139161
'Overriding native attribute [id] which has a Cloudscape-provided value'
140162
);
141163
});
142164

143165
test('passes through data attributes without warning', () => {
144166
const { container } = render(
145-
<WithNativeAttributes tag="div" nativeAttributes={{ 'data-testid': 'test-element' }}>
167+
<WithNativeAttributes tag="div" componentName="" nativeAttributes={{ 'data-testid': 'test-element' }}>
146168
Test content
147169
</WithNativeAttributes>
148170
);
@@ -154,7 +176,7 @@ describe('WithNativeAttributes', () => {
154176

155177
test('does not allow children to be overrwitten', () => {
156178
const { container } = render(
157-
<WithNativeAttributes tag="div" nativeAttributes={{ children: 'Something custom' } as any}>
179+
<WithNativeAttributes tag="div" componentName="" nativeAttributes={{ children: 'Something custom' } as any}>
158180
Test content
159181
</WithNativeAttributes>
160182
);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type NativeAttributesProps<AT extends React.HTMLAttributes<HTMLElement>> = {
1414
children?: ReactNode;
1515
skipWarnings?: boolean;
1616
nativeAttributes: NativeAttributes<AT>;
17+
componentName: string;
1718
} & NativeAttributes<AT>;
1819
interface ForwardRefType {
1920
<ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(
@@ -23,7 +24,7 @@ interface ForwardRefType {
2324

2425
export default React.forwardRef(
2526
<ET extends HTMLElement, AT extends React.HTMLAttributes<ET>>(
26-
{ tag, nativeAttributes, children, skipWarnings, ...rest }: NativeAttributesProps<AT>,
27+
{ tag, nativeAttributes, children, skipWarnings, componentName, ...rest }: NativeAttributesProps<AT>,
2728
ref: React.Ref<ET>
2829
) => {
2930
const Tag = tag;
@@ -49,7 +50,7 @@ export default React.forwardRef(
4950
// override other attributes, warning if it already exists
5051
} else {
5152
if (key in rest && !skipWarnings) {
52-
warnOnce('Button', `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
53+
warnOnce(componentName, `Overriding native attribute [${key}] which has a Cloudscape-provided value`);
5354
}
5455
acc[key] = value;
5556
}

‎src/spinner/internal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default function InternalSpinner({
2626
<WithNativeAttributes
2727
{...baseProps}
2828
tag="span"
29+
componentName="Spinner"
2930
nativeAttributes={nativeAttributes}
3031
className={clsx(baseProps.className, styles.root, styles[`size-${size}`], styles[`variant-${variant}`])}
3132
ref={__internalRootRef}

0 commit comments

Comments
 (0)