The ability to use ReactNode as label prop of FormTab

[dejancg]

Currently, the FormTab component declares label prop as string type (here):

export interface FormTabProps {
    // ...
    label: string;
    // ..
}

However, the FormTab component merely passes the prop value to MuiTab component (translated though), as seen here:

const renderHeader = () => (
    <MuiTab
        // ...
        label={translate(label, { _: label })}
        // ...
    />
);

And the MuiTab component declares the label as ReactNode, as seen here:

export type TabTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendButtonBaseTypeMap<{
  props: P & {
    // ...
    /**
     * The label element.
     */
    label?: React.ReactNode;
    // ...
  };
  // ...
}>;

To work around this limitation, I did this:

1. Created a type guard to assert the label type:

const isString = (element: any): element is string => {
  return typeof element === "string" || element instanceof String;
};

2. Changed the renderHeader func like so:

  const renderHeader = () => (
    <MuiTab
      key={isString(label) ? label : label.props.key} // <-- Might be a better idea to use the FormTab key here
      label={isString(label) ? translate(label, { _: label }) : label}
     // ...
    />
  );

3. Change the FormTabProps label declaration like so:

export interface FormTabProps {
  // ...
  label: string | ReactElement;
  // ...
}

The obvious downside is that I lost the ability to have my translation key translated automatically when an element is used instead of plain string. But other than that, seems to be working fine. Any thoughts?

[djhi]

Thanks for reporting. Marking this as an enhancement

[djhi]

Fixed by #6061