Ensure correct display name for forwardRef components (#3440)

* ensure correct display name for forwardRef components

* export const

* CL

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added `aria-hidden = true` to `EuiRangeSlider` and `EuiRangeTrack` if `showInput = true` ([#3423](https://github.com/elastic/eui/pull/3423))
 - Added `testenv` mock for `EuiCode` and `EuiCodeBlock` ([#3405](https://github.com/elastic/eui/pull/3405))
+- Added `displayName` to components using `React.forwardRef` ([#3440](https://github.com/elastic/eui/pull/3440))
 
 **Bug Fixes**
 

src/components/badge/badge_group/badge_group.tsx

@@ -65,3 +65,5 @@ export const EuiBadgeGroup = React.forwardRef<
     );
   }
 );
+
+EuiBadgeGroup.displayName = 'EuiBadgeGroup';

src/components/header/header_section/header_section_item_button.tsx

@@ -74,3 +74,5 @@ export const EuiHeaderSectionItemButton = React.forwardRef<
     );
   }
 );
+
+EuiHeaderSectionItemButton.displayName = 'EuiHeaderSectionItemButton';

src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
   }
 >
   <div>
-    <ForwardRef
+    <EuiTabs
       onFocus={[Function]}
     >
       <div
@@ -135,7 +135,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
           </button>
         </EuiTab>
       </div>
-    </ForwardRef>
+    </EuiTabs>
     <div
       aria-labelledby="kibana"
       id="42"

src/components/tabs/tabs.tsx

@@ -87,3 +87,5 @@ export const EuiTabs = React.forwardRef<
     );
   }
 );
+
+EuiTabs.displayName = 'EuiTabs';