Skip to content

Commit a1e11df

Browse files
Alessandra Davilakodiakhq[bot]
Alessandra Davila
and
kodiakhq[bot]
authored
feat(react): add display names to forward ref components (#9591)
* feat(react): add display names to forward ref components * chore(snapshot): updated snapshot tests * test(combo-box): update combobox test * test(combo-box): update ListBoxMenuItem forward ref Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 1d7d399 commit a1e11df

28 files changed

+88
-52
lines changed

‎packages/carbon-react/src/components/Popover/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ function Popover({
4242
);
4343
}
4444

45+
Popover.displayName = 'Popover';
4546
Popover.propTypes = {
4647
/**
4748
* Specify how the popover should align with the trigger element
@@ -122,6 +123,8 @@ const PopoverContent = React.forwardRef(function PopoverContent(
122123
);
123124
});
124125

126+
PopoverContent.displayName = 'PopoverContent';
127+
125128
PopoverContent.propTypes = {
126129
/**
127130
* Provide a custom element or component to render the top-level node for the

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -447,6 +447,7 @@ Map {
447447
"shouldFilterItem": [Function],
448448
"type": "default",
449449
},
450+
"displayName": "ComboBox",
450451
"propTypes": Object {
451452
"ariaLabel": Object {
452453
"type": "string",
@@ -4692,6 +4693,7 @@ Map {
46924693
},
46934694
"PaginationNav" => Object {
46944695
"$$typeof": Symbol(react.forward_ref),
4696+
"displayName": "PaginationNav",
46954697
"propTypes": Object {
46964698
"className": Object {
46974699
"type": "string",
@@ -4730,6 +4732,7 @@ Map {
47304732
"onClick": [Function],
47314733
"size": "",
47324734
},
4735+
"displayName": "ControlledPasswordInput",
47334736
"propTypes": Object {
47344737
"className": Object {
47354738
"type": "string",
@@ -4841,6 +4844,7 @@ Map {
48414844
"onClick": [Function],
48424845
"size": "",
48434846
},
4847+
"displayName": "PasswordInput",
48444848
"propTypes": Object {
48454849
"className": Object {
48464850
"type": "string",
@@ -6046,6 +6050,7 @@ Map {
60466050
"onClick": [Function],
60476051
"size": "",
60486052
},
6053+
"displayName": "ControlledPasswordInput",
60496054
"propTypes": Object {
60506055
"className": Object {
60516056
"type": "string",
@@ -6157,6 +6162,7 @@ Map {
61576162
"onClick": [Function],
61586163
"size": "",
61596164
},
6165+
"displayName": "PasswordInput",
61606166
"propTypes": Object {
61616167
"className": Object {
61626168
"type": "string",
@@ -6901,6 +6907,7 @@ Map {
69016907
},
69026908
"ToolbarTitle" => Object {
69036909
"$$typeof": Symbol(react.forward_ref),
6910+
"displayName": "ToolbarTitle",
69046911
"propTypes": Object {
69056912
"title": Object {
69066913
"type": "string",
@@ -6910,6 +6917,7 @@ Map {
69106917
},
69116918
"ToolbarOption" => Object {
69126919
"$$typeof": Symbol(react.forward_ref),
6920+
"displayName": "ToolbarOption",
69136921
"propTypes": Object {
69146922
"children": Object {
69156923
"type": "node",
@@ -6919,6 +6927,7 @@ Map {
69196927
},
69206928
"ToolbarDivider" => Object {
69216929
"$$typeof": Symbol(react.forward_ref),
6930+
"displayName": "ToolbarDivider",
69226931
"render": [Function],
69236932
},
69246933
"ToolbarSearch" => Object {
@@ -7589,6 +7598,7 @@ Map {
75897598
},
75907599
"HeaderMenuItem" => Object {
75917600
"$$typeof": Symbol(react.forward_ref),
7601+
"displayName": "HeaderMenuItem",
75927602
"propTypes": Object {
75937603
"children": Object {
75947604
"isRequired": true,
@@ -7701,6 +7711,7 @@ Map {
77017711
},
77027712
"Switcher" => Object {
77037713
"$$typeof": Symbol(react.forward_ref),
7714+
"displayName": "Switcher",
77047715
"propTypes": Object {
77057716
"aria-label": [Function],
77067717
"aria-labelledby": [Function],
@@ -7716,6 +7727,7 @@ Map {
77167727
},
77177728
"SwitcherItem" => Object {
77187729
"$$typeof": Symbol(react.forward_ref),
7730+
"displayName": "SwitcherItem",
77197731
"propTypes": Object {
77207732
"aria-label": [Function],
77217733
"aria-labelledby": [Function],
@@ -7769,6 +7781,7 @@ Map {
77697781
"isFixedNav": false,
77707782
"isPersistent": true,
77717783
},
7784+
"displayName": "SideNav",
77727785
"propTypes": Object {
77737786
"addFocusListeners": Object {
77747787
"type": "bool",
@@ -7936,6 +7949,7 @@ Map {
79367949
"element": "a",
79377950
"large": false,
79387951
},
7952+
"displayName": "SideNavLink",
79397953
"propTypes": Object {
79407954
"children": Object {
79417955
"isRequired": true,
@@ -7987,6 +8001,7 @@ Map {
79878001
},
79888002
"SideNavMenuItem" => Object {
79898003
"$$typeof": Symbol(react.forward_ref),
8004+
"displayName": "SideNavMenuItem",
79908005
"propTypes": Object {
79918006
"children": Object {
79928007
"type": "node",
@@ -8002,6 +8017,7 @@ Map {
80028017
},
80038018
"SideNavSwitcher" => Object {
80048019
"$$typeof": Symbol(react.forward_ref),
8020+
"displayName": "SideNavSwitcher",
80058021
"propTypes": Object {
80068022
"className": Object {
80078023
"type": "string",

‎packages/react/src/components/ComboBox/ComboBox-test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('ComboBox', () => {
6060

6161
for (let i = 0; i < mockProps.items.length; i++) {
6262
openMenu(wrapper);
63-
wrapper.find('ForwardRef(ListBoxMenuItem)').at(i).simulate('click');
63+
wrapper.find('ListBoxMenuItem').at(i).simulate('click');
6464
expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
6565
expect(mockProps.onChange).toHaveBeenCalledWith({
6666
selectedItem: mockProps.items[i],
@@ -94,7 +94,7 @@ describe('ComboBox', () => {
9494
it('should let the user select an option by clicking on the option node', () => {
9595
const wrapper = mount(<ComboBox {...mockProps} />);
9696
openMenu(wrapper);
97-
wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
97+
wrapper.find('ListBoxMenuItem').at(0).simulate('click');
9898
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
9999
expect(mockProps.onChange).toHaveBeenCalledWith({
100100
selectedItem: mockProps.items[0],
@@ -104,7 +104,7 @@ describe('ComboBox', () => {
104104
mockProps.onChange.mockClear();
105105

106106
openMenu(wrapper);
107-
wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
107+
wrapper.find('ListBoxMenuItem').at(1).simulate('click');
108108
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
109109
expect(mockProps.onChange).toHaveBeenCalledWith({
110110
selectedItem: mockProps.items[1],

‎packages/react/src/components/ComboBox/ComboBox.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,7 @@ const ComboBox = React.forwardRef((props, ref) => {
402402
);
403403
});
404404

405+
ComboBox.displayName = 'ComboBox';
405406
ComboBox.propTypes = {
406407
/**
407408
* 'aria-label' of the ListBox component.

‎packages/react/src/components/Dropdown/Dropdown-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ describe('Dropdown', () => {
133133
it('should let the user select an option by clicking on the option node', () => {
134134
const wrapper = mount(<Dropdown {...mockProps} />);
135135
openMenu(wrapper);
136-
wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
136+
wrapper.find('ListBoxMenuItem').at(0).simulate('click');
137137
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
138138
expect(mockProps.onChange).toHaveBeenCalledWith({
139139
selectedItem: mockProps.items[0],
@@ -143,7 +143,7 @@ describe('Dropdown', () => {
143143
mockProps.onChange.mockClear();
144144

145145
openMenu(wrapper);
146-
wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
146+
wrapper.find('ListBoxMenuItem').at(1).simulate('click');
147147
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
148148
expect(mockProps.onChange).toHaveBeenCalledWith({
149149
selectedItem: mockProps.items[1],

‎packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ exports[`Dropdown should render custom item components 1`] = `
295295
role="listbox"
296296
tabIndex={-1}
297297
>
298-
<ForwardRef(ListBoxMenuItem)
298+
<ListBoxMenuItem
299299
aria-selected="false"
300300
id="downshift-6-item-0"
301301
isActive={false}
@@ -330,8 +330,8 @@ exports[`Dropdown should render custom item components 1`] = `
330330
</itemToElement>
331331
</div>
332332
</div>
333-
</ForwardRef(ListBoxMenuItem)>
334-
<ForwardRef(ListBoxMenuItem)
333+
</ListBoxMenuItem>
334+
<ListBoxMenuItem
335335
aria-selected="false"
336336
id="downshift-6-item-1"
337337
isActive={false}
@@ -366,8 +366,8 @@ exports[`Dropdown should render custom item components 1`] = `
366366
</itemToElement>
367367
</div>
368368
</div>
369-
</ForwardRef(ListBoxMenuItem)>
370-
<ForwardRef(ListBoxMenuItem)
369+
</ListBoxMenuItem>
370+
<ListBoxMenuItem
371371
aria-selected="false"
372372
id="downshift-6-item-2"
373373
isActive={false}
@@ -402,8 +402,8 @@ exports[`Dropdown should render custom item components 1`] = `
402402
</itemToElement>
403403
</div>
404404
</div>
405-
</ForwardRef(ListBoxMenuItem)>
406-
<ForwardRef(ListBoxMenuItem)
405+
</ListBoxMenuItem>
406+
<ListBoxMenuItem
407407
aria-selected="false"
408408
id="downshift-6-item-3"
409409
isActive={false}
@@ -438,8 +438,8 @@ exports[`Dropdown should render custom item components 1`] = `
438438
</itemToElement>
439439
</div>
440440
</div>
441-
</ForwardRef(ListBoxMenuItem)>
442-
<ForwardRef(ListBoxMenuItem)
441+
</ListBoxMenuItem>
442+
<ListBoxMenuItem
443443
aria-selected="false"
444444
id="downshift-6-item-4"
445445
isActive={false}
@@ -474,7 +474,7 @@ exports[`Dropdown should render custom item components 1`] = `
474474
</itemToElement>
475475
</div>
476476
</div>
477-
</ForwardRef(ListBoxMenuItem)>
477+
</ListBoxMenuItem>
478478
</div>
479479
</ListBoxMenu>
480480
</div>
@@ -604,7 +604,7 @@ exports[`Dropdown should render with strings as items 1`] = `
604604
role="listbox"
605605
tabIndex={-1}
606606
>
607-
<ForwardRef(ListBoxMenuItem)
607+
<ListBoxMenuItem
608608
aria-selected="false"
609609
id="downshift-4-item-0"
610610
isActive={false}
@@ -628,8 +628,8 @@ exports[`Dropdown should render with strings as items 1`] = `
628628
zar
629629
</div>
630630
</div>
631-
</ForwardRef(ListBoxMenuItem)>
632-
<ForwardRef(ListBoxMenuItem)
631+
</ListBoxMenuItem>
632+
<ListBoxMenuItem
633633
aria-selected="false"
634634
id="downshift-4-item-1"
635635
isActive={false}
@@ -653,7 +653,7 @@ exports[`Dropdown should render with strings as items 1`] = `
653653
doz
654654
</div>
655655
</div>
656-
</ForwardRef(ListBoxMenuItem)>
656+
</ListBoxMenuItem>
657657
</div>
658658
</ListBoxMenu>
659659
</div>

‎packages/react/src/components/ListBox/ListBoxMenuItem.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem(
5353
);
5454
});
5555

56+
ListBoxMenuItem.displayName = 'ListBoxMenuItem';
5657
ListBoxMenuItem.propTypes = {
5758
/**
5859
* Specify any children nodes that should be rendered inside of the ListBox

‎packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`ListBoxMenu should render 1`] = `
99
id="test-listbox"
1010
role="listbox"
1111
>
12-
<ForwardRef(ListBoxMenuItem)
12+
<ListBoxMenuItem
1313
isActive={false}
1414
isHighlighted={false}
1515
>
@@ -22,7 +22,7 @@ exports[`ListBoxMenu should render 1`] = `
2222
Hello
2323
</div>
2424
</div>
25-
</ForwardRef(ListBoxMenuItem)>
25+
</ListBoxMenuItem>
2626
</div>
2727
</ListBoxMenu>
2828
`;

‎packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ListBoxMenuItem should render 1`] = `
4-
<ForwardRef(ListBoxMenuItem)
4+
<ListBoxMenuItem
55
isActive={false}
66
isHighlighted={false}
77
>
@@ -16,11 +16,11 @@ exports[`ListBoxMenuItem should render 1`] = `
1616
</span>
1717
</div>
1818
</div>
19-
</ForwardRef(ListBoxMenuItem)>
19+
</ListBoxMenuItem>
2020
`;
2121

2222
exports[`ListBoxMenuItem should render 2`] = `
23-
<ForwardRef(ListBoxMenuItem)
23+
<ListBoxMenuItem
2424
isActive={true}
2525
isHighlighted={false}
2626
>
@@ -35,11 +35,11 @@ exports[`ListBoxMenuItem should render 2`] = `
3535
</span>
3636
</div>
3737
</div>
38-
</ForwardRef(ListBoxMenuItem)>
38+
</ListBoxMenuItem>
3939
`;
4040

4141
exports[`ListBoxMenuItem should render 3`] = `
42-
<ForwardRef(ListBoxMenuItem)
42+
<ListBoxMenuItem
4343
isActive={false}
4444
isHighlighted={true}
4545
>
@@ -54,5 +54,5 @@ exports[`ListBoxMenuItem should render 3`] = `
5454
</span>
5555
</div>
5656
</div>
57-
</ForwardRef(ListBoxMenuItem)>
57+
</ListBoxMenuItem>
5858
`;

‎packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
generateGenericItem,
1717
} from '../../ListBox/test-helpers';
1818

19-
const listItemName = 'ForwardRef(ListBoxMenuItem)';
19+
const listItemName = 'ListBoxMenuItem';
2020
const openMenu = (wrapper) => {
2121
wrapper.find(`[role="combobox"]`).simulate('click');
2222
};

0 commit comments

Comments
 (0)