Extending Types BaseClass => ChildClass

[zeroedin]

What is the best solution for extending types when different options are needed in separate child classes?

My original attempt was thinking I could just override the InsetVariant type in rh-tabs so I would not have to reinclude @property in either pfe-tabs or rh-tabs that however did not work.

Here is a proposal @heyMP and I worked out.

If anyone else has any other thoughts please let me know.

BaseTabs.ts

export type InsetVariant = (
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | '2xl'
  | 'page'
);

...

@property({ reflect: false }) inset?: InsetVariant;

pfe-tabs.ts

import type { InsetVariant } from './BaseTabs.js'
export type ExtendedInsetVariant = InsetVariant | 'page'

...

@property({ reflect: false }) inset?: ExtendedInsetVariant;

rh-tabs.ts

import type { InsetVariant } from '@patternfly/pfe-tabs/BaseTab.js'
export type ExtendedInsetVariant = InsetVariant | 'none'

...

@property({ reflect: false }) inset?: ExtendedInsetVariant;

[bennypowers]

Today at Office Hours it was resolved that

1. Base classes should be as abstract as possible. (I will elaborate on this in the wiki)
2. Class Inheritance should be a feature of design discussions, particularly focusing on templates and/or template hooks in base classes.

Thank you @zeroedin for raising the discussion, @marionnegp @heyMP , @nikkimk @brianferry for your input.

[bennypowers]

Resulting Wiki entry: https://github.com/RedHat-UX/red-hat-design-system/wiki/Base-Classes

[zeroedin]

Initial work on BaseClasses for tabs in PFE: patternfly/patternfly-elements#2260