Patternfly-react: Latest PF4 packages: tab content

[dlabrecq]

Installed the latest Patternfly and patternfly-react packages and the Cost Management UI is looking odd.

In this case, there is a problem with the tab content.

When the page is loaded, progress bars do not expand the entire width of the card body as expected. As a result, our Insights skeletons and PF progress bars no longer stretch the entire width.

It appears there is an issue with the select element output by the tabs component? I can override that to 100% and the progress bars fill the card.

Note that this also affects our use of Insights skeleton components. The skeletons look fine in other areas -- seems to be just an issue with the tabs?

Progress bars before:

Progress bars after:

Skeletons before:

Skeletons after:

[tlabaj]

@dlabrecq are you using the TabContent Outside of the tabs here?

[mcoker]

@tlabaj looks like this is the same issue as https://github.com/patternfly/patternfly-react/issues/1775

[dlabrecq]

I'm not using TabContent here, just Tabs and Tab.

[mcoker]

@tlabaj looking at the old implementation of tabs, the tab content sections are outside of the tabs component parent. With Dan's latest updates, the tab content sections are now inside of the tabs. Do you know when and why that changed? I'm curious if I need to provide a CSS fix or if this is something we can sort out in the react component.

Previous

Current

[tlabaj]

@mcoker It probably changed with the refactoring for the TabContent outside of Tabs. . I can make that change so it is outside of the tabs again.