ui: update icons to use the FlightIcon package

[sabrinako]

Related Issue

#2392

Description

This PR intends to transfer the Waypoint Ui over from using the Pds::Icon components to the new FlightIcon ones.

How to Test

1. Pull this branch down git checkout ui/flight-icon-update
2. yarn to download the new packages
3. yarn start to boot up UI with mock data
4. Click around to ensure all icons are looking as expected!

Additional Notes

flight-icons currently doesn't have any animated icons, so our loading spinner is not present. There's discussion about adding it that's picked up in recent days, so I imagine this will be added soon but I'm not planning on holding this PR back any longer since it's just 1 icon left.

Screenshots

Deployments Page

Auth Page

As of making this PR, the method for altering the colors of the icons in Flight requires altering the use element instead of path. This also seems to prevent us from changing the stroke width. Feedback on how we could change the stroke width would be helpful (since I'm pretty sure it was thinner before)

[sabrinako]

Just wanted to update on GH as well but this is on hold until we get the HC logos in Flight

[github-actions]

Ember Asset Size action

As of f82b213

Files that got Bigger 🚨:

File	raw	gzip
vendor.js	+2.37 kB	+572 B
vendor.css	+166 B	+37 B
waypoint.css	+643 B	-112 B

Files that got Smaller 🎉:

File	raw	gzip
waypoint.js	-59 B	-79 B

[jgwhite]

Are we dropping icons from the breadcrumbs?

• Looks like there’s unneeded space for an icon to the left of the app name
• Icon next to “deployments” seems a bit close to the text (maybe it’s not meant to be there?)

[jgwhite]

The new icons are looking really nice.

I spotted a few nitpicks, but in general the transition is butter smooth.

[gregone]

LGTM. just a few questions about using the button element for styling

[jgwhite]

Looking good. The points @gregone raised are worth investigating but apart from that I didn’t spot anything out of place.

[didoo]

@sabrinako added a few comments, take them for what they are (just suggestions)

[didoo]

here you're relying on the component internal structure (expects the SVG to be a direct child) and in case we decide in the future to change it, this would break (unknowingly) the styling.

my suggestion is to use a wrapping container/div, and style that container. in this way you decouple hosting codebase from the components implementation

[didoo]

potentially, also here you have a coupling (less strong than the other one, but still)

one option could be to apply a class to the FlightIcon component and use that one as a CSS selector here (and also in other cases I see where you have used the DOM element as target)

[didoo]

this is not how we would expect color to be applied. you're manipulating directly the internal SVG but we expose a @color prop for this (see https://flight-hashicorp.vercel.app/engineering#example-fill)

plus, our icons use currentColor by default so they can just inherit the color from the parent container

plus, our icons are flat, they don't contain strokes, so the stroke: $brand-color; declaration can be removed

[didoo]

@heatherlarsen for knowledge, one case in which the 24px icon is scaled up to 96px

[heatherlarsen]

I ran into an issue getting this to run locally, but I'm assuming this is either for the Waypoint logo or the HashiCorp logo. I'd advocate for using a logo in these instances instead of an icon.

[jgwhite]

I ran into an issue getting this to run locally

@heatherlarsen I’d like to hear more about this. I’ll reach out to you on Slack :)

[didoo]

do you need a font-size for an icon?

[heatherlarsen]

@sabrinako I saw your note about changing the stroke weight. Stroke weight is not something that should be changed on Flight icons as each icon was intentionally designed with consistent stroke weight based on the size of the icon. More information about how the icons are drawn can be found in the docs. Is there a specific reason you need to adjust the stroke weight?