Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request : @Props OR component inheritance #2844

Open
xe4me opened this issue Mar 8, 2021 · 7 comments
Open

Feature Request : @Props OR component inheritance #2844

xe4me opened this issue Mar 8, 2021 · 7 comments
Labels
Feature: Want this? Upvote it! This PR or Issue may be a great consideration for a future idea. Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through.

Comments

@xe4me
Copy link

xe4me commented Mar 8, 2021

Hi
Thank you for your wonderful job, we are one of your biggest supporters, here in Australia :)
I'm writing to get help or perhaps if possible get this feature natively.
We're developing a design system with Stencil , however ,since StencilJS doesn't support component inheritance, we're finding it very limiting when it comes to reusing our internal code base.

Use Case :
Create a bunch of icon components that each represent one icon element, but they all share similar props :

Component 1 :

    <my-icon-arrow-left size="small" color="primary">

Component 2 :

    <my-icon-arrow-right size="small" color="primary">

Each of above component accepts a series of similar props, like color, size, shape and passes all those props to an internal component which has the SCSS file which does the actual magic .

Each of above components would look like below


@Component({
  tag: 'icon-arrow-left',
  shadow: true,
})
export class IconArrowLeft {

  @Prop() size: SvgSizeProp;

  @Prop() color: SvgColourProp;

  @Prop() bgColor: SvgBgColorProp;

  @Prop() shape: SvgShapeProp;

  @Prop() elevation: SvgElevationProp;

  @Prop() customColor: string;

  @Prop() customSize: string;

  @Prop() variant: SvgVariantProp;

  render() {
    return (
      <svg-icon
        size={this.size}
        color={this.color}
        bg-color={this.bgColor}
        shape={this.shape}
        elevation={this.elevation}
        custom-color={this.customColor}
        custom-size={this.customSize}
        variant={this.variant}
        path={
          <g stroke="none">
            <path d="M44.003282"></path>
          </g>
        }
      />
    );
  }
}

This pattern has been heavily used in React Material design, https://material-ui.com/components/material-icons/

We have hundreds of these icons and we have to repeat these props inside every single one of them.
Is there any way we could avoid this ?

Ideally, it would be nice if there was a @Props() allProps decorator which would contain all the props.

With Props, we could do something like this :

@Component({
  tag: 'icon-arrow-left',
  shadow: true,
})
export class IconArrowLeft {
  @Props() allProps:

  render() {
    return (
      <svg-icon
        {...this.allProps} <<<<<<<<====== HERE 
        path={
          <g stroke="none">
            <path d="M44.003282,63.9997333"></path>
          </g>
        }
      />
    );
  }
}

Or at least allow us to use inheritance to achieve something like this :

export class IconArrowLeft extend IconProps {

  render() {
    return (
      <svg-icon
        size={this.size}
        color={this.color}
        bg-color={this.bgColor}
        shape={this.shape}
        elevation={this.elevation}
        custom-color={this.customColor}
        custom-size={this.customSize}
        variant={this.variant} 
        path={
          <g stroke="none">
            <path d="M44.003282,63.9997333"></path>
          </g>
        }
      />
    );
  }
}

We look forward to hearing from you.

Cheers

@ionitron-bot ionitron-bot bot added the triage label Mar 8, 2021
@xe4me xe4me changed the title Feature Request : Props OR Inheritance Feature Request : @Props OR component inheritance Mar 8, 2021
@granfar
Copy link

granfar commented Mar 26, 2021

We WOULD LOVE THIS KIND OF FEATURE AS WELL!

@miladwooliesx
Copy link

Hey guys :)
Any updates on this ?

@johnjenkins
Copy link
Contributor

johnjenkins commented Apr 29, 2021

I will be submitting a PR which should solve this issue :) - just as soon as my source maps branch gets merged as source maps would be helpful.
(Mentioned as per the contributing guide)

@miladwooliesx
Copy link

@johnjenkins that would be amazing.
Any updates ?

@johnjenkins
Copy link
Contributor

Yep, nearly there. Just writing tests

@johnjenkins
Copy link
Contributor

Ok, if anyone get a chance, I'd urge you to take a look and try it out :)

@splitinfinities splitinfinities added the Feature: Want this? Upvote it! This PR or Issue may be a great consideration for a future idea. label Oct 12, 2021
@ionitron-bot ionitron-bot bot removed the triage label Oct 12, 2021
@centigrade-julian-lang
Copy link

centigrade-julian-lang commented Jan 3, 2022

Component inheritance is really a foundational feature IMHO. Also there are several already-closed issues to this exact topic (starting from 2017, nearly 5 years ago). Will this have a chance to arrive in stencil or is it considered as "won't fix"?

@rwaskiewicz rwaskiewicz added the Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through. label Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature: Want this? Upvote it! This PR or Issue may be a great consideration for a future idea. Resolution: Refine This PR is marked for Jira refinement. We're not working on it - we're talking it through.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants