Adds content to tabs component examples.

[edonehoo]

closes #2990

[patternfly-build]

Preview: https://patternfly-react-pr-8678.surge.sh

A11y report: https://patternfly-react-pr-8678-a11y.surge.sh

[edonehoo]

carrying over a comment from the closed PR:

Need input in particular on these examples:
Children mounting on click
Unmounting invisible children
Toggled separate content

ty!

[nicolethoen]

@edonehoo here's some explanation you can expand upon in the docs for the following examples:

Children mounting on click

This example is demonstrating the use of the mountOnEnter prop. Using the prop does not create the tab children until the tab is clicked, so they are not preloaded in to the DOM.

Unmounting invisible children

This example is demonstrating the use of the unmountOnExit prop. Using this prop unmounts tab children (removes them from the DOM) when they are no longer visible.

Toggled separate content

This example demonstrates how you can use controls on a page - external to the Tabs component - to change which tabs are visible. In such cases, the Tab and the TabContent associated with that Tab should both only be rendered/mounted on the DOM when conditions are met to make the Tab visible.

[mcarrano]

Looks good @edonehoo . I just had one small it about the first sentence that describes what a tab is.

[edonehoo]

@nicolethoen thanks for that context! I made some additions to those examples.

@ anyone there are still a couple of examples that I haven't added to. Does the following make sense for each?:

1. Uncontrolled tabs - To let tab data be handled by the DOM instead of by a React component, use uncontrolled tabs.
2. Page insets - To adjust the placement of tabs on a page, use the usePageInsets property. This property adds more space to the left side of the tabs.

I'm making some assumptions/leaps here, so I'm not sure if this is accurate to the purpose and effect. Thanks!

[nicolethoen]

• Uncontrolled tabs - To let tab data be handled by the DOM instead of by a React component, use uncontrolled tabs.

The uncontrolled tabs example shows how the Tabs component will manage setting the active tab and displaying the correct content itself, rather than the consumer needing to manually manage that business logic themself.

• Page insets - To adjust the placement of tabs on a page, use the usePageInsets property. This property adds more space to the left side of the tabs.

The usePageInsets property makes it so that the Tabs themselves have a left padding which matches the default left padding of the page sections. It makes it easier to line up the Tabs with the content in page sections.

Also, before you make subsequent updates to this PR, be sure to do a git pull from your issue branch, since i just rebased it to clean up the number of commits/files in this commit for you :)

[mcarrano]

Looks great. Thanks @edonehoo !

[tlabaj]

I would have requested a change here. Can we please ope na follow up issue?

[tlabaj]

Which variations can not be boxed/default. I think the all can. I might reword this. To me it implies that isBoxed prop does not always apply the styling.
@mcoker are there any instances when isBoxed would not be applied?

[mcoker]

@tlabaj nope, isBoxed should work with any variation

[tlabaj]

I don't think this is necessary. Anywhere we have aria-labels in our code base, the consumer can override them (I would actually say it is encouraged).

[tlabaj]

@kmcfaul @thatblindgeye The popovers ate nit displaying correctly here. Is that a known issue?

[thatblindgeye]

@tlabaj Looks like it might be because it's being appended inline, and/or a combination of some overflow styling on pf-c-tabs__list or .pf-c-tabs.

Updating the Popover to append to document body resolves the issue best right now, but worth looking closer into if it can be resolved without doing that.

[kmcfaul]

Another way to resolve this would be to put each of the popovers outside of the Tabs component (and put the whole return statement in a react fragment). This would require making separate refs for each tab that has a help action manually, as currently the logic uses the map to generate the popovers and refs.