Revert "Revert "Change icons from divs to spans (#1857)""

This reverts commit 67b32df to add back the changes in #1857 now that we have the accompanying HH Theme changes ready to release.
yext · Feb 20, 2024 · f37d3ba · f37d3ba
1 parent 495eea4
commit f37d3ba
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 19 deletions.
diff --git a/src/ui/sass/modules/_SearchBar.scss b/src/ui/sass/modules/_SearchBar.scss
@@ -280,13 +280,18 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base)
 
   &-buttonImage .Icon svg, .Icon-image
   {
+    display: block;
     width: 2em;
     height: 2em;
   }
 
   &-instructions {
     display: none;
   }
+
+  &-CustomLoadingImage {
+    display: block;
+  }
 }
 
 // If custom icons are supplied, the SVGs simply alternate opacity

diff --git a/src/ui/templates/icons/builtInIcon.hbs b/src/ui/templates/icons/builtInIcon.hbs
@@ -1,3 +1,3 @@
-<div class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
   {{icon iconName complexContentsParams}}
-</div>
+</span>
diff --git a/src/ui/templates/icons/icon.hbs b/src/ui/templates/icons/icon.hbs
@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{name}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>
diff --git a/src/ui/templates/icons/iconPartial.hbs b/src/ui/templates/icons/iconPartial.hbs
@@ -1,7 +1,7 @@
-<div class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
+<span class="Icon Icon--{{#if iconName}}{{iconName}}{{else}}custom{{/if}} {{classNames}}" aria-hidden="true">
   {{#if iconUrl}}
     <img src="{{iconUrl}}" alt="" class="Icon-image">
   {{else}}
     {{icon iconName complexContentsParams}}
   {{/if}}
-</div>
+</span>
diff --git a/src/ui/templates/icons/searchBarIcon.hbs b/src/ui/templates/icons/searchBarIcon.hbs
@@ -1,41 +1,41 @@
 {{#if showLoadingIndicator}}
   {{#if customLoadingIconUrl}}
-    <div class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
+    <span class="yxt-SearchBar-CustomLoadingImage js-yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon yxt-SearchBar-Icon--inactive">
       {{> icons/iconPartial iconUrl=customLoadingIconUrl}}
-    </div>
+    </span>
   {{else}}
-    <div class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
+    <span class="yxt-SearchBar-AnimatedIcon js-yxt-SearchBar-LoadingIndicator yxt-SearchBar-LoadingIndicator js-yxt-SearchBar-Icon 
       yxt-SearchBar-Icon--inactive Icon--lg">
       <svg class= "yxt-SearchBar-LoadingIndicator-AnimatedIcon" viewBox="0 0 72 72">
         <circle class="yxt-SearchBar-LoadingIndicator-Circle" cx="36" cy="36" r="33" stroke="black" stroke-width="3" fill="none"/>
       </svg>
-    </div>
+    </span>
   {{/if}}
 {{/if}}
 
 {{#if submitIcon}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/builtInIcon iconName=submitIcon}}
-  </div>
+  </span>
 {{else if _config.customIconUrl}}
-  <div class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
+  <span class="yxt-SearchBar-buttonImage js-yxt-SearchBar-buttonImage js-yxt-SearchBar-Icon">
     {{> icons/iconPartial iconUrl=_config.customIconUrl}}
-  </div>
+  </span>
 {{else}}
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedForward js-yxt-SearchBar-Icon
     {{#unless autoFocus}} yxt-SearchBar-Icon--inactive{{/unless}}">
     {{> icons/builtInIcon
       iconName='yext_animated_forward'
       classNames='yxt-SearchBar-MagnifyingGlass--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
-  <div class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
+  </span>
+  <span class="yxt-SearchBar-AnimatedIcon js-yxt-AnimatedReverse js-yxt-SearchBar-Icon
     {{#if autoFocus}} yxt-SearchBar-Icon--inactive{{/if}}">
     {{> icons/builtInIcon
       iconName='yext_animated_reverse'
       classNames='yxt-SearchBar-Yext--static Icon--lg'
       complexContentsParams=forwardIconOpts.complexContentsParams
     }}
-  </div>
+  </span>
 {{/if}}
diff --git a/src/ui/templates/icons/voiceSearchIcon.hbs b/src/ui/templates/icons/voiceSearchIcon.hbs
@@ -14,4 +14,4 @@
     {{/if}}
   </div>
   <span class="yxt-SearchBar-voiceSearchText sr-only"></span>
-</div>
+</div>