Foundation: Extend Component

[JasonGore]

• We should provide a method for easily extending and customizing existing components, such as tweaking styling. As a generic example:
  • const FancyStyledButton = extendComponent(Button, { tokens: { backgroundColor: fancyColor } });
  • Could make 'hidden' static on Button like __def that is accessible by extendComponent for calling createComponent to make a new component with extended options.
    • What would the arguments for extendComponent be? If constructed component, need to avoid wrapping component and adding layers to hierarchy.

• Can there be a props transform supplied to createComponent, like:
  • (Component, props) => <Component horizontal horizontalAlign="end" gap={props.theme.buttonGap}>
  • Need to be careful that props precedence is intact, i.e. user props vs. theme props vs. HOC props
  • extendComponent / createComponent should be able to take in default props and props transforms

• Should support slots customization as well as allowing users to target specific component via theming.

• Should allow styling and theming to work with all button variants such as those in Button: Creating ActionButton variant and cleaning styling #8645.

[khmakoto]

@JasonGore should we close this as well?

[JasonGore]

Closing due to newer efforts that'll address this issue.