Conventions: Slot and Property validation. about calcite-design-system HOT 6 CLOSED

I like @patrickarlt's idea of a custom decorator.. I think the vast majority of "simple" prop validations will just be along the lines of...

  @Prop({ reflect: true }) color: string = 'blue';
  @Prop({ reflect: true }) theme: string = null;

  ...

  componentWillLoad() {  
    let colors = ['blue', 'red', 'green', 'yellow']
    if (!colors.includes(this.color)) this.color = 'blue';

    let themes = ['dark', 'light']
    if (this.theme !== null && !themes.includes(this.theme)) this.theme = 'light';
}

so to me an ideal solution that could cover most "initial load validations" would be ...

@ValidateProp({ reflect: true }) color: 'blue' | 'red' | 'yellow' | 'green' = 'blue';
@ValidateProp({ reflect: true }) theme: 'dark' | 'light' = null;

and then you could use the existing "@ Watch" for anything more complex or "on change" validations

from calcite-design-system.

Slots would be super tough to validate in any consistent manner IMO... But props should be, within reason.

For instance, validating that color is one of "red, green, blue, yellow" or theme is one of "dark, light" seems doable.

from calcite-design-system.

One possible way I can think of validating this.el.children and validate how many and which element it is. But I am not sure how much trustworthy or how efficient it is.

from calcite-design-system.

What's the status of this issue? can we close this one?

from calcite-design-system.

Checking back in on this one.

from calcite-design-system.

Closing this due to inactivity, feel free to open another if something specific is needed.

from calcite-design-system.