Patternfly-react: Feature: Support JSX.Element on Tab title property

[xeviknal]

Right now, Tab title component only supports string values. It would be great that it supported Elements.

Kiali wants to render as a tab title one string and one icon, like the following:

This is blocking our progress into migration to PF4.

[xeviknal]

cc @serenamarie125 @aljesusg @pilhuhn @abonas

[xeviknal]

In the second example, we needed to have this last tab opening a new tab (other tabs should just run as usual). Is there a way to achieve it with actual implementation of tabs?

[rachael-phillips]

Hi @xeviknal what is your timeline like on this request, and what level of urgency would you say this is?

[xeviknal]

@rachael-phillips another workaround for both solutions: icons and links.
However, starting to have a lot of workarounds, hehe.

Example that works. Notice the trick of telling title is type any. Tab.title expects a string.

const title: any = (
          <>
            Traces <Icon type={'fa'} name={'external-link'} />
          </>
        );
<Tab eventKey={3} title={title} />

Non working scenario:

      <Tab eventKey={3}
            title={
              <>
              'Traces ' + <Icon type={'fa'} name={'external-link'} />
              </>
            }
          />

[rachael-phillips]

That's a great point, @xeviknal Thanks for posting the workaround! @tlabaj I am adding this as a P2 - please feel free to update

[boaz0]

@rachael-phillips @tlabaj can you assign this to me?

[rachael-phillips]

Done! Thanks for your help @boaz0 !

[xeviknal]

I can confirm that this has been fixed and is not a blocked in Kiali's side. Thanks.