Eui: Adding displayName to components

[wenchonglee]

Hey,

First off, I just want to say that I recently switched to Elastic-ui and it has been amazing.

Up until the recent release 28.3.0, I've been using docgenInfo as a way to identify your components. (#3911 removed it)
For a little bit of context, I have a validation wrapper component that behaves differently when different form components are within it.

<CustomComponent>
    <EuiFieldText />
</CustomComponent>

<CustomComponent>
    <EuiComboBox />
</CustomComponent>

I realize my use-case is quite niche, but is it a conscious decision to not have displayName attributed to each elastic component? It would help if they could be identified

[thompsongl]

Hey @wenchonglee

Glad to know you like using EUI!
It is not a conscious decision to not have displayName. We add displayName to components that use React.forwardRef for reasons similar to what you describe, but haven't found a real need to add it to everything.

We'd be happy to review a PR if you're up for creating one.

[chandlerprall]

A component's name can be computed in a number of ways, displayName being one. Enzyme employs the following logic to determine the name:

type.displayName || (typeof type === 'function' ? functionName(type) : type.name || type);

Where type comes from the React element (your component's children). This logic covers a string type (div), a component with displayName, or extracts the component's name from its function / class definition.

[chandlerprall]

Another thought - you can compare the element's type directly against the component itself:

import { EuiFieldText } from '@elastic/eui';

...

if (React.Children.only(children).type === EuiFieldText) { ... }

[wenchonglee]

Thanks for the insightful replies!

@chandlerprall
I did a brief test on both methods. I think the method used by Enzyme doesn't work because the function name gets minified in production builds.

The second idea seems to work, unfortunately I'll only be able to test it out more thoroughly on Friday.
I'll report back and close this issue/create a PR :)

[wenchonglee]

I think the 2nd method works well.

Thanks, appreciate both of your help :)