search

AlaskaAirlines / auro-alert

Custom element that renders errors, warnings, and other inline notifications with automated styling elements
https://auro.alaskaair.com/components/auro/alert
Apache License 2.0
0 stars 1 forks source link

auro-alerts: UI attribute is not reflected within the element in Svelte #14

Closed blackfalcon closed 3 years ago

blackfalcon commented 3 years ago

Describe the bug

In some frameworks, there appears to be an issue where the technique of using an attribute selector to theme a custom element is not reflected within the scope of the rendered element.

This issue and image are from @geoffrich

87ba077c-11c3-4d15-9978-a95cd956157f

Expected behavior

The element should have the correct UI when used in Svelte.

Correction suggestion

The suggestion to address this issue is to add the following to all the defined properties within the scope of the element. 

myProp: {reflect: true}
geoffrich commented 3 years ago

Note that you only need to reflect properties where the attribute is used for styling. I think this is all of them in the auro-alerts case, but that might not be true with other elements.

blackfalcon commented 3 years ago

Note that you only need to reflect properties where the attribute is used for styling. I think this is all of them in the auro-alerts case, but that might not be true with other elements.

The issue is... when a style attribute is used for BOTH a Property within the scope of the element AND a styled attribute. E.g. 

  static get properties() {
    return {
      error:          { type: Boolean },
    };
  }
:host([error]) {
  .alert {
    border-color: var(--auro-color-alert-error-on-light);
  }

  svg {
    color: var(--auro-color-alert-error-on-light);
  }
}

If the styled attribute is only for a CSS hook, then this is not needed. E.g. auro-loader

@gusnaughton reported an issue with auro-loader related to this. @gusnaughton can you elaborate as to the issue and how it was resolved?

geoffrich commented 3 years ago

Right... I always forget about the standalone attribute case.

You can see my PR for the auro-loader fix: https://github.com/AlaskaAirlines/auro-loader/pull/6. There were two issues