fix(rux-progress-monitoring-icon) restyle to match rux-monitoring-icon

kiley-mitti commented 1 year ago

Brief Description

This is a restyle of rux-progress-monitoring-icon web component to bring the styles inline with rux-monitoring-icon. The two were styles quite differently which made them look odd next to each other in the GSB. The GRM Dashboard is a sample of where they might be seen together in the GSB.

JIRA Link

ASTRO-5105

Related Issue

General Notes

Motivation and Context

Oddly there is no figma example of rux-progress-monitoring-icon so its styles were never (as far as I know) created by design. This is a draft PR to show design what it would look like if it matched rux-monitoring-icon

Issues and Limitations

This is a draft until it gets approved by design. :) <-- update Steve G said this looks good for now. I think eventually they will want to tweak the text inside the progress circle but everything else should be good.

Types of changes

[x] Bug fix
[ ] New feature
[x] Breaking change - it does pretty significantly change the style of rux-progress-monitoring-icon although it should not grow the overall footprint/size it does shrink it.

Checklist

[ ] This PR adds or removes a Storybook story.
[ ] I have added tests to cover my changes.
[x] Regressions are passing and/or failures are documented
[x] Changes have been checked in evergreen browsers

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: c01a12a277c988528757439475fc2592f8090921

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name	Link
Latest commit	c01a12a277c988528757439475fc2592f8090921
Latest deploy log	https://app.netlify.com/sites/astro-stencil/deploys/63ceca978ae8680008376786
Deploy Preview	https://deploy-preview-1028--astro-stencil.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name	Link
Latest commit	c01a12a277c988528757439475fc2592f8090921
Latest deploy log	https://app.netlify.com/sites/astro-preview/deploys/63ceca97e140ac000908acb3
Deploy Preview	https://deploy-preview-1028--astro-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

kiley-mitti commented 1 year ago

/update-snapshots

kiley-mitti commented 1 year ago

/update-snapshots

markacianfrani commented 1 year ago

this might need some more design thought, esp around how the badge floats.

localhost_3333_ (2) I like how the badge here floats, but it doesnt on the monitoring icon. they should be consistent. (also think the 100% is too close to the border. we didnt have a vrt covering 100%)

localhost_3333_ (3) the problem with that though is that if you have a single icon in the right slot in gsb, the badge will get cut off.

kiley-mitti commented 1 year ago

this might need some more design thought, esp around how the badge floats. I like how the badge here floats, but it doesnt on the monitoring icon. they should be consistent.

Oh right... I need to add the math for sizing to the progress monitoring icon. Frances added it to the monitoring icon some time ago to fix the badge cut off problem with GSB.

(also think the 100% is too close to the border. we didnt have a vrt covering 100%)

Agree on this. Steve G and I actually had a conversation here and decided that for now, it's probably ok because we can't make the text smaller (design system reasons). When they get this into figma they'll play with it and perhaps find a slight tweak to solve.

the problem with that though is that if you have a single icon in the right slot in gsb, the badge will get cut off.

Yeah, we fixed this for monitoring icon, but not for progress monitoring icon. I'll go in and make that revision.

I'm wondering if progress monitoring icon is meant to have notifications at all. I don't know if it is meant to or if that's just a remnant of it being copied over from monitoring icon.

kiley-mitti commented 1 year ago

/update-snapshots

RocketCommunicationsInc / astro