Progress bar style updates

Needs design work

This is ready for implementation :)

I created an initial patch for progress bar style update.

Desktop (big):

Mobile (small):

Re #6:

1. Instead of defining a new library and attaching it directly in the template, just replace the progress.module.css in the info.yml
2. The small version on Figma relates to the small progress version, and not for the mobile design.
3. Elements below the bar are overflowing the actual .progress element. Please fix .progress__percentage and .progress__description!
4. Omit using pixel units, and prefer variables.

Screenshots attached.

Hello all!

It was easier for me to create new patch. i rewrited classy progress.css but keeped stable progress.module.css since it contains all required for rtl.
Also i added states variables and implementations. I think it is better to use this component for password strength field.

Sorry i forgot to add

Reviewed the latest patch noticed that the progress element still had overflow issues with elements below it. Rolled a new patch that contains a fix for the overflow issues along with the rest of the styling (which looked good from my perspective.)

Screenshots attached.

Re #12:

I only ask for adding vertical-align: top; to .ajax-progress (and remove the re-defined inline-block display of .ajax-progress-throbber).

Nothing else.

Excellent (and elegant) work!

Re #18:

This is too much.

+++ b/css/src/components/ajax-progress.module.css
@@ -20,12 +21,10 @@
-  vertical-align: middle;

This makes throbbers worse than before... Please take it back!

Screenshots look nice :)

Re #16
@huzooka according to BEM principles alignment of ajax-progress__button and ajax-progress__progress-bar elements should be managed on level of ajax-progress block. so it is not really related to progress bar block.

From: https://en.bem.info/methodology/quick-start/#block
The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block.

so progress-bar itself shouldn't contain any alignment. but we may and seems have to add it on ajax-progress__progress-bar element. So maybe it is not the problem of this issue?

Fix based on the principles highlighted in #23.

No aligns anymore :)

Nice progress so far! 👏 Thank you everyone for pushing this forward!

1. +++ b/css/src/base/variables.css
   @@ -5,6 +5,7 @@
   +  --color-text-light: var(--color-grayblue);
   

   This is leading into wrong text color. The documented text color is Davy's Gray (#545560).

2. 
   

   There's still some inconsistencies with the vertical align.

@lauriii Well we have to decide how deep we want to follow BEM principles. I think that @finnsky is right (see #23), but only visually I still prefer the aligned version.

Re #26: note that on the attached screenshots the throbber is aligned to the baseline, and that's not a bad situation imho.

Re-rolled the patch form #25.

Screenshot attached.

This hopefully fixes the vertical align issues.

Testing #32.

IE and Edge are rendering the throbber really ugly.

...well, IE11 and Edge.

We probably actually don't need the svg at all. In my opinion, this looks better in all browsers, including high contrast (even though the empty space of throbber isn't completely empty). This way we also don't have to worry about this browser compatibility issue.

Edit: for some reason, the interdiff isn't showing the file spinner.svg deletion but it can be found from the actual patch.

Re #36:

Excellent catch! I agree that we don't need the SVG at all.

But the full-screen throbber does not follow the design definition anymore:

I'll fix this!

The throbber on IE and Edge is a bit worse than without the patch from #36 or the attached one...

We need to fill the progress bar with the text color in high contrast mode:

@media screen and (-ms-high-contrast: active) {
  .progress__bar {
    background-color: windowText;
  }
}

Fixed the IE 11 problem raised in #39. I also customized the ajax markup to make it follow BEM standards.

I'm reviewing this.

Added missing compiled JavaScript file to the patch.

Only one thing:

+++ b/css/src/components/ajax-progress.module.css
@@ -80,38 +77,29 @@
+.ajax-progress--fullscreen .ajax-progress__throbber {

+++ b/js/claro.ajax.es6.js
@@ -0,0 +1,45 @@
+    '<div class="ajax-progress ajax-progress--fullscreen"><div class="ajax-progress__throbber">&nbsp;</div></div>';

Now that we are able to use BEM structure, I'd use a modifier for the fullscreen throbber, e.g. .ajax-progress__throbber--fullscreen.

Re-rolled patch from #43, no other changes applied.

We noticed a weird issue with the throbber that happens only on high-contrast Edge and only with an RTL language.

This fixes the shakiness on throbber in high-contrast Edge RTL.

I increased the size of the full screen throbber to work around it's shaking animation in Safari on a non-retina display and fixed a minor RTL issue.

The attached screenshots were generated before the RTL margin of .ajax-progress--throbber was fixed.

Nothing else.

I think this is ready for committing!

1. +++ b/css/src/components/progress.css
   @@ -0,0 +1,83 @@
   +  padding: 0 1px;
   

   I think we should remove this property. Because of this, the progress bar is leaking 2px out of the container when it is at 100%.

2. +++ b/css/src/base/variables.css
   @@ -188,4 +189,34 @@
   +  /* is-good */
   +  --color-progress-bar-bg-is-good: var(--color-absolutezero);
   +  --color-progress-bar-border-is-good: var(--color-absolutezero);
   +++ b/css/src/components/progress.css
   @@ -0,0 +1,83 @@
   +.progress__bar.is-good {
   +  border-color: var(--color-progress-bar-border-is-good);
   +  background-color: var(--color-progress-bar-bg-is-good);
   +}
   

   The styleguide doesn't define color for this state. I think we could use the same color as we use for the fair state until we get more information from the design team.

I'll fix these.

Addressing #49, and on top of those, I also changed the border-color of the fair state.

+++ b/css/src/base/variables.css
@@ -188,4 +189,34 @@
+  --color-progress-bar-bg-is-strong: var(--color-celadongreen);
+  --color-progress-bar-border-is-strong: var(--color-celadongreen);

Sorry, I didn't notice this earlier 🤦‍♂️This leads into #228572, but according to the designs this should be #26a769.

It seems that the color palette was changed. We don't have celadon green anymore, but we have lightning green instead of that.

I updated the variables and completely removed celadon green.

+++ b/css/src/base/variables.css
@@ -188,4 +189,34 @@
+  --color-progress-bar-bg-is-strong: var(--color-celadongreen);
+  --color-progress-bar-border-is-strong: var(--color-celadongreen);

We should update this to use the new lightning green color 🤠

Maybe this time?..

Thank you everyone! This looks great ✨Committed and pushed!

Not sure what has moved this back to needs review 🤷‍♂️