WIP: Include Font Awesome and Material Icons

[nogalpaulina]

V 1.3.2

Updated

• Update Font Awesome version to 5.12.0
• Minor CSS classes updates

Fixed

• Loading Font Awesome and Material Icons from to insure their availability when application loads

Before:

After:

[apsummers]

Does this work if you remove:

this.shadowRoot.appendChild(createStyleElement(this.iconType));
this.shadowRoot
  .getElementById("container")
  .appendChild(createIconElement(this.iconType, this.icon));

from the myuw-icon-link.js constructor? This is pretty much what I tried doing initially but I had issues with the external stylesheets applying styles to the components because of how Web Components scope styles.

I'd also suggest waiting to merge this until #6 is merged because it changes the API, so rebase off that. And could we leave the whitespace around = and ||? 😬

[nogalpaulina]

Does this work if you remove:

this.shadowRoot.appendChild(createStyleElement(this.iconType));
this.shadowRoot
  .getElementById("container")
  .appendChild(createIconElement(this.iconType, this.icon));

from the myuw-icon-link.js constructor? This is pretty much what I tried doing initially but I had issues with the external stylesheets applying styles to the components because of how Web Components scope styles.

I'd also suggest waiting to merge this until #6 is merged because it changes the API, so rebase off that. And could we leave the whitespace around = and ||? 😬

The icons disappear when I remove the code above. I changed my PR to WIP, to wait for your changed being merged first, and will fix the spacing!

[apetro]

Let's stick with version 4.7.0 if at all possible, at least until we can demonstrate working on version. The reason for this is status quo production MyUW is using version 4.7.0, so if this also supports 4.7.0, it'll be more interchangable with what we're already running and the icons reference in the current production data.

Switching Font Awesome versions is going to entail auditing/updating those icon usages to ensure they're using icon aliases that will work moving forward and might couple adopting this Web Component with making corresponding data changes.

So. Not never on the Font Awesome upgrade, but not in the same transaction as flopping over to this Web Component, is my suggestion.

[apetro]

I don't necessarily need to have an opinion about code style and white space.

I do suggest that if we're going to do automated reformatting of code that's not otherwise being changed,

1. it can help to do it in separate commits so it's clearer what's a substantive change and what's a style change, and
2. it can help to codify what style rules and automation we're using. What tools or plugins, configured how? Might be something to document in CONTRIBUTING.md, might even be possible to include tool configuration metadata in this repository.

In other contexts some MyUW projects have tried to "adopt Google style". This has some advantages in tooling support, being three words long, applying across a variety of languages, consisting entirely of a reference to external style so there's less surface to internally argue about and customize style, etc.

[apsummers]

Does this work if you remove:

this.shadowRoot.appendChild(createStyleElement(this.iconType));
this.shadowRoot
  .getElementById("container")
  .appendChild(createIconElement(this.iconType, this.icon));

from the myuw-icon-link.js constructor? This is pretty much what I tried doing initially but I had issues with the external stylesheets applying styles to the components because of how Web Components scope styles.
I'd also suggest waiting to merge this until #6 is merged because it changes the API, so rebase off that. And could we leave the whitespace around = and ||? 😬

The icons disappear when I remove the code above. I changed my PR to WIP, to wait for your changed being merged first, and will fix the spacing!

Ah whoops, I grabbed too many lines for you to remove so yeah, that definitely wouldn't work! Does it work if you remove only the:

this.shadowRoot.appendChild(createStyleElement(this.iconType));

line? That line embeds the styles in a link tag inside the component so that the Shadow DOM has access to them. See that pattern here (Cmd+F for link because there's no anchor to the right section).