As of the EuiTabs Emotion conversion (#6311), child EuiTab now need to be passed size and expand.
|
const tabItems = React.Children.map(children, (child) => { |
|
if (React.isValidElement(child)) { |
|
return cloneElementWithCss(child, { |
|
// we're passing the parent `size` and `expand` down to the children |
|
size: size, |
|
expand: expand, |
|
}); |
|
} |
|
}); |
However, the above code only captures EuiTab children that are direct descendants of EuiTabs. It does not correctly pass down size to grandchild, anywhere within the EuiTabs parent, e.g.
<EuiTabs size="l">
<SomeIntermediateWrapper>
<EuiTab> // will be size "m" / will not inherit size "l"
Link to actual production example in Kibana where consumers have a perfectly acceptable use case of a React component wrapper that handles click behavior.
The more robust architecture/approach we should be using is using a React context provider to pass size and expand to all children, following EuiDescriptionList's example:
|
<EuiDescriptionListContext.Provider |
|
value={{ type, compressed, textStyle, align, gutterSize }} |
|
> |
As of the
EuiTabsEmotion conversion (#6311), childEuiTabnow need to be passedsizeandexpand.eui/src/components/tabs/tabs.tsx
Lines 72 to 80 in 83d7a6d
However, the above code only captures
EuiTabchildren that are direct descendants ofEuiTabs. It does not correctly pass downsizeto grandchild, anywhere within theEuiTabsparent, e.g.Link to actual production example in Kibana where consumers have a perfectly acceptable use case of a React component wrapper that handles click behavior.
The more robust architecture/approach we should be using is using a React context provider to pass
sizeandexpandto all children, followingEuiDescriptionList's example:eui/src/components/description_list/description_list.tsx
Lines 68 to 70 in 6018d7e