Is your feature request related to a problem? Please describe.
There are scenarios in which I'd like to reuse existing components by just changing the type of the top-level wrapper, like converting a group into a button and keeping the flex layout.
EuiFlexGroup does currently support, using the component property, the div and span elements, the request if for wider support to all the other HTML elements for building more semantic HTML and reducing the DOM pollution with multiple nodes used only for forced layout.
EuiFlexItem already has full support for polymorphism, but lacks a strong typing inference when the component element is passed, would be great to also include this as part of the work.
Describe the solution you'd like
Given the following example, it would be great if the component property could accept any HTML tag recognized as part of React.ReactHTML, and have it typed correctly depending on the specified component.
function FlexAnchor(props) {
return (
<EuiFlexGroup component="a"> // TS should then suggest properties such as "href" etc.
{...}
</EuiFlexGroup>
);
}
Describe alternatives you've considered
The alternative I used so far has been nesting/wrapping the additional nodes where I couldn't replace them, which makes the DOM more verbose and less semantic.
Desired timeline
This could greatly impact and improve the DX for all the contributors writing React components, but it is not a high priority unless it is a quick win.
Is your feature request related to a problem? Please describe.
There are scenarios in which I'd like to reuse existing components by just changing the type of the top-level wrapper, like converting a group into a button and keeping the flex layout.
EuiFlexGroup does currently support, using the
componentproperty, thedivandspanelements, the request if for wider support to all the other HTML elements for building more semantic HTML and reducing the DOM pollution with multiple nodes used only for forced layout.EuiFlexItem already has full support for polymorphism, but lacks a strong typing inference when the component element is passed, would be great to also include this as part of the work.
Describe the solution you'd like
Given the following example, it would be great if the
componentproperty could accept any HTML tag recognized as part of React.ReactHTML, and have it typed correctly depending on the specified component.Describe alternatives you've considered
The alternative I used so far has been nesting/wrapping the additional nodes where I couldn't replace them, which makes the DOM more verbose and less semantic.
Desired timeline
This could greatly impact and improve the DX for all the contributors writing React components, but it is not a high priority unless it is a quick win.