ui: update icons to use the FlightIcon package #2681

sabrinako · 2021-11-04T20:45:10Z

Related Issue

Description

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

How to Test

Pull this branch down git checkout ui/flight-icon-update
yarn to download the new packages
yarn start to boot up UI with mock data
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 · 2021-11-18T20:34:08Z

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

github-actions · 2021-12-08T20:45:11Z

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 · 2021-12-09T10:04:32Z

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.

ui/app/templates/workspace/projects/project/app/deployment/deployment-seq.hbs

ui/app/components/copyable-code/index.hbs

ui/app/components/workspace-switcher.hbs

ui/app/components/git-commit.hbs

ui/app/components/project-input-variables/list.hbs

ui/app/templates/workspace/projects/new.hbs

ui/app/components/app-item/deployment.hbs

gregone

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

ui/app/styles/_layout.scss

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 · 2021-12-16T19:09:08Z

ui/app/styles/components/button.scss

@@ -92,11 +86,23 @@ a[href].button {
 }

 &--external-link {
- > .pds-icon {
+ > svg {


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 · 2021-12-16T19:10:00Z

ui/app/styles/components/button.scss

+ align-items: stretch;
+ margin-left: calc(-1 * 0.25rem);
+
+ svg {


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 · 2021-12-16T19:15:27Z

ui/app/styles/pages/auth-page.scss


- path {
+ use {


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 · 2021-12-16T19:22:24Z

ui/app/styles/pages/auth-page.scss

@@ -31,8 +31,10 @@

 .icon.brand {
 display: flex;
+ width: scale.$lg-14;


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

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.

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 · 2021-12-16T19:24:52Z

ui/app/styles/components/workspace-switcher.scss

@@ -31,14 +30,14 @@
 line-height: var(--pds-lineHeight--dense);
 padding-left: scale.$lg--2;

- .pds-icon {
+ svg {
 position: absolute;
 font-size: scale.$lg--1;


do you need a font-size for an icon?

heatherlarsen · 2021-12-17T05:00:31Z

@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?

github-actions bot added the ui label Nov 4, 2021

vercel bot temporarily deployed to Preview November 5, 2021 20:55 Inactive

vercel bot temporarily deployed to Preview November 8, 2021 22:27 Inactive

sabrinako self-assigned this Nov 8, 2021

vercel bot temporarily deployed to Preview November 8, 2021 22:34 Inactive

sabrinako mentioned this pull request Nov 9, 2021

ui: add all operation info to OperationStatusIndicator #2702

Merged

Sabrina Ko added 6 commits December 7, 2021 15:35

ui: installed flight icons package

ec7a7d8

ui: updated icons to use flight icons (no styling)

8d68f05

ui: updated styling, OperationStatusIndicator still broken

4cdaec4

ui: fixed test and final styling

8582ac6

ui: fixed lint error and added changelog

f9c9cfa

ui: updated to 2.0 flight icons

ca488ae

sabrinako force-pushed the ui/flight-icon-update branch from 8f75f55 to 93aa454 Compare December 8, 2021 20:39

vercel bot temporarily deployed to Preview December 8, 2021 20:39 Inactive

ui: fixed remaining icons

b0e9ac1

sabrinako force-pushed the ui/flight-icon-update branch from 93aa454 to b0e9ac1 Compare December 8, 2021 20:53

vercel bot temporarily deployed to Preview December 8, 2021 20:53 Inactive

sabrinako added this to the 0.7.0 milestone Dec 8, 2021

sabrinako marked this pull request as ready for review December 8, 2021 21:00

sabrinako requested review from almonk and a team December 8, 2021 21:00

jgwhite suggested changes Dec 9, 2021

View reviewed changes

ui: addressed comments on pr from @jgwhite

882247a

vercel bot temporarily deployed to Preview December 10, 2021 18:37 Inactive

sabrinako requested review from jgwhite and a team December 10, 2021 18:45

gregone approved these changes Dec 14, 2021

View reviewed changes

ui/app/styles/_layout.scss Outdated Show resolved Hide resolved

jgwhite approved these changes Dec 14, 2021

View reviewed changes

ui: removed redudant button styling

f82b213

vercel bot temporarily deployed to Preview December 14, 2021 22:11 Inactive

sabrinako merged commit 5222fcd into main Dec 14, 2021

sabrinako deleted the ui/flight-icon-update branch December 14, 2021 22:27

sabrinako linked an issue Dec 15, 2021 that may be closed by this pull request

UI: migrate the UI Icons from structure-icons to flight #2392

Closed

didoo reviewed Dec 16, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ui: update icons to use the FlightIcon package #2681

ui: update icons to use the FlightIcon package #2681

sabrinako commented Nov 4, 2021 •

edited

Loading

sabrinako commented Nov 18, 2021

github-actions bot commented Dec 8, 2021 •

edited

Loading

jgwhite commented Dec 9, 2021

jgwhite left a comment

gregone left a comment

jgwhite left a comment

didoo left a comment

didoo Dec 16, 2021

didoo Dec 16, 2021

didoo Dec 16, 2021

didoo Dec 16, 2021

heatherlarsen Dec 17, 2021

jgwhite Dec 17, 2021

didoo Dec 16, 2021

heatherlarsen commented Dec 17, 2021

ui: update icons to use the FlightIcon package #2681

ui: update icons to use the FlightIcon package #2681

Conversation

sabrinako commented Nov 4, 2021 • edited Loading

Related Issue

Description

How to Test

Additional Notes

Screenshots

Deployments Page

Auth Page

sabrinako commented Nov 18, 2021

github-actions bot commented Dec 8, 2021 • edited Loading

Ember Asset Size action

jgwhite commented Dec 9, 2021

jgwhite left a comment

Choose a reason for hiding this comment

gregone left a comment

Choose a reason for hiding this comment

jgwhite left a comment

Choose a reason for hiding this comment

didoo left a comment

Choose a reason for hiding this comment

didoo Dec 16, 2021

Choose a reason for hiding this comment

didoo Dec 16, 2021

Choose a reason for hiding this comment

didoo Dec 16, 2021

Choose a reason for hiding this comment

didoo Dec 16, 2021

Choose a reason for hiding this comment

heatherlarsen Dec 17, 2021

Choose a reason for hiding this comment

jgwhite Dec 17, 2021

Choose a reason for hiding this comment

didoo Dec 16, 2021

Choose a reason for hiding this comment

heatherlarsen commented Dec 17, 2021

sabrinako commented Nov 4, 2021 •

edited

Loading

github-actions bot commented Dec 8, 2021 •

edited

Loading