Autocomplete Field Style Update

IMHO this is not a parent-child relationship, this is a duplication. The Figma link is the same, only the test component differs.

Attaching Seven screenshots as a reference.

Screenshots here.

Really minor fix.

Needs re-roll because #3027004: Fix variables declarations is merged.

1. +++ b/claro.theme
   @@ -357,6 +357,10 @@ function claro_preprocess_input(&$variables) {
   +      $variables['attributes']['claro-autocomplete-message'] = t('Loading…');
   

   How about passing this as a new variable instead of passing it inside the attributes given that it's removed in the template?

2. +++ b/css/src/components/breadcrumb.css
   @@ -25,7 +25,7 @@
    [dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {
   
   +++ b/templates/form/input.html.twig
   @@ -0,0 +1,27 @@
   +  <div class="claro-autocomplete__wrapper">
   

   Maybe this could be just claro-auto-complete-with-message?

3. +++ b/templates/form/input.html.twig
   @@ -0,0 +1,27 @@
   +    <div hidden class="claro-autocomplete__message">{{autocomplete_message}}</div>
   

   This element is missing the block level element. However, we probably can change the wrapper into block level element and this could be claro-auto-complete-with-message__message.

Re #22:

1. Done. (I don't really know why I've done this...)
2. What about just claro-autocomplete? claro-auto-complete-with-message seems to be too long for me
3. See #2

1. +++ b/css/src/components/autocomplete-loading.module.css
   @@ -0,0 +1,46 @@
   +  font-size: 0.6875em;
   

   This value doesn't seem to be in the list of the font-sizes values in the Figma doc. Where is it from ?

2. +++ b/css/src/components/jquery.ui/theme.css
   @@ -429,11 +429,34 @@
   +  border: 0.0625em solid var(--color-jui-dropdown-border);
   

   .0625 = --size-input-border

3. +++ b/css/src/components/jquery.ui/theme.css
   @@ -429,11 +429,34 @@
   +  border-radius: 0 0 0.125em 0.125em;
   

   .125 = --size-input-border-radius

Addressing #27.

1. +++ b/css/src/components/autocomplete-loading.module.css
   @@ -0,0 +1,46 @@
   +  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8,0.999781c-4.5394538,-0.1723607 -8.18800628,4.7870352 -6.6873554,9.068641 1.1767997,4.383903 6.9938335,6.416563 10.6372244,3.700244 0.325764,-0.391006 0.56541,0.275384 0.84585,0.440896 1.246479,1.246479 2.492958,2.492959 3.739437,3.739438 0.471354,-0.471354 0.942709,-0.942709 1.414063,-1.414063 -1.44987,-1.44987 -2.89974,-2.899739 -4.34961,-4.349609C16.410345,8.7174615 14.748115,2.9379071 10.536504,1.4755074 9.7302231,1.1615612 8.8650587,0.99941873 8,0.999781Z m0,2c3.242467,-0.1231148 5.848576,3.4193109 4.776682,6.477601 -0.841211,3.131959 -4.9939918,4.58038 -7.5998944,2.649077C2.4322236,10.397214 2.2765833,6.0022025 4.8919502,4.0831465 5.7667487,3.38528 6.8811016,2.996997 8,2.999781Z' fill='%23868686' /%3E%3C/svg%3E");
   

   Should we use the magnifier.svg for this instead?

2. +++ b/css/src/components/autocomplete-loading.module.css
   @@ -0,0 +1,46 @@
   +  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
   

   Should we use the spinner.svg for this instead?

3. +++ b/images/src/spinner.svg
   --- /dev/null
   +++ b/js/claro.autocomplete.js
   

   Where's the source file for this? 🤔

Fixing #32.3

Added missing es6 source for the autocomplete enhancer js.

Re #32:

1. I strongly suggest to keep these inlined. Since the autocomplete library is attached conditionally and not globally, we can be 99% sure that this magnifier icon will be used; I don't see any reason why we should force the browser to get this asset in an another request and re-paint the autocomplete input's background (until we can be sure that it will be pushed by the server with HTTP/2)
2. Yes, we should do that in the future, but not now. Here are my arguments besides #1:
   • url properties of non-used CSS selectors aren't downloaded by popular browsers.
   • Browsers need some time for painting a non-downloaded remote asset (get it from server, parse, paint it) if it becomes 'required'.
   • The autocompleting event may easily finish before the missing asset gets downloaded/parsed/painted
   • The missing visual instant feedback may be a usability/accessibility issue as well
3. Fixed.

Thanks for the input on my feedback @huzooka! I think both of your arguments are reasonable, and I think it would be valuable to have these documented in the CSS itself so that this information doesn't get lost.

+++ b/images/src/spinner.svg
@@ -0,0 +1,37 @@
+    @keyframes s {

Wondering if we care but this doesn't work on IE 11 because of the lack of support for SVG CSS transitions 😢

Re #42 I know, I've seen it. Neither the progress bar background is animated in IE11, that's why I thought that this is an acceptable 'fallback'.

...Nor SVG's animate is supported in IE11.

I just noticed that the magnifier icon and the animation should be flipped for the RTL version (I did it in throbber style update #3025917: Throbber Style Update).

Changed:

1. Horizontally flipped magnifier icon for RTL languages
2. Reversed "autocompleting" animation for RTL languages
3. New GIF background-image(s) for IE11 (replaces the non-animated SVG)

+++ b/css/src/components/autocomplete-loading.module.css
@@ -33,11 +33,27 @@
+.js[dir="rtl"] .form-autocomplete.is-autocompleting {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3E%3Cstyle type='text/css'%3E @keyframes s%7B0%25%7Btransform:rotate(0deg) translate(-50%25,-50%25)%7D50%25%7Btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7D100%25%7Btransform:rotate(-720deg) translate(-50%25,-50%25)%7D%7Dellipse%7Banimation:s 1s linear infinite%7D%3C/style%3E%3Cg transform='translate(5 5)'%3E%3Cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%23004adc' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)' /%3E%3C/g%3E%3C/svg%3E");
+}

Could we place this right after the ltr selector?

Of course!

We'll add the fallback spinner-GIFs with white background in order to make their edges smooth.

We agreed that we'll provide a 1dppx version GIF fallback for ie11.

Thank you! 🙏