Skip to content

Commit

Permalink
add icons/bakedInIcon partial (#1451)
Browse files Browse the repository at this point in the history 
This PR replaces all icon usages that only are meant to use a 
baked in icon with the icons/bakedInIcon partial.

The issue with just using iconPartial for everything is that, some icons are intended
to always use a baked in icon instead of switch between an iconName
(for built in icons) and an iconUrl (for custom icons).
However, handlebars partials operate on the context on which they are called, not only
on the variables passed into it. So, if an iconUrl exists on the scope somebody calls
`{{> icons/iconPartial iconName='chevron'}}`, an iconUrl will be passed into the partial
even though none was explicitly passed in.

Since iconUrl has higher priority than iconName, this can cause undesired behavior.
I think the best workaround is just creating a separate partial when we want an icon
that is built into the SDK.

J=SLAP-1297
TEST=manual

test that baked in icons display as expected and do not have this
behavior

see the animated search icon working as expected

manually check that all iconPartial usages have a specified iconUrl
  • Loading branch information
@oshi97
oshi97 committed Jul 1, 2021
1 parent 47b1061 commit f758e35
Show file tree
Hide file tree
Showing 14 changed files with 36 additions and 33 deletions.
2 changes: 1 addition & 1 deletion src/ui/templates/cards/accordion.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ id="{{id}}">
{{{_config.title}}}
</h3>
<div class="yxt-AccordionCard-icon js-yxt-AccordionCard-icon{{#if isExpanded}} yxt-AccordionCard-icon--expanded{{/if}}">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</div>
</button>
{{else}}
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/cards/standard.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@
<span>
{{#if hideExcessDetails}}
{{_config.showMoreText}}
{{> icons/iconPartial iconName='chevron' classNames='Icon--sm Icon-collapseDown'}}
{{> icons/bakedInIcon iconName='chevron' classNames='Icon--sm Icon-collapseDown'}}
{{else}}
{{_config.showLessText}}
{{> icons/iconPartial iconName='chevron' classNames='Icon--sm Icon-collapseUp'}}
{{> icons/bakedInIcon iconName='chevron' classNames='Icon--sm Icon-collapseUp'}}
{{/if}}
</span>
</button>
Expand Down
10 changes: 5 additions & 5 deletions src/ui/templates/controls/filteroptions.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@

{{#if expanded}}
<span class="yxt-FilterOptions-expand yxt-FilterOptions-collapseUp">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{else}}
<span class="yxt-FilterOptions-expand yxt-FilterOptions-collapseDown">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{/if}}
</div>
Expand Down Expand Up @@ -49,7 +49,7 @@
<div class="yxt-FilterOptions-search js-yxt-FilterOptions-search">
<input type="text" class="yxt-FilterOptions-filter js-yxt-FilterOptions-filter" aria-label="{{searchLabelText}}" placeholder="{{placeholderText}}">
<button class="yxt-FilterOptions-clearSearch js-yxt-FilterOptions-clearSearch js-hidden">
{{> icons/iconPartial iconName='close'}}
{{> icons/bakedInIcon iconName='close'}}
</button>
</div>
{{/if}}
Expand Down Expand Up @@ -115,15 +115,15 @@
{{showLessLabel}}
</span>
<span class="yxt-FilterOptions-collapseUp">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</button>
<button class="yxt-FilterOptions-showToggle js-yxt-FilterOptions-showToggle js-yxt-FilterOptions-showMore{{#unless showMoreState}} hidden{{/unless}}">
<span class="yxt-FilterOptions-showToggleLabel">
{{showMoreLabel}}
</span>
<span class="yxt-FilterOptions-collapseDown">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</button>
{{/if}}
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/controls/sortoptions.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@
<button class='yxt-SortOptions-showToggle'>
{{_config.showMoreLabel}}
<span class='yxt-SortOptions-collapseDown'>
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</button>
{{else}}
<button class='yxt-SortOptions-showToggle'>
{{_config.showLessLabel}}
<span class='yxt-SortOptions-collapseUp'>
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</button>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/templates/filters/filterbox.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{#if title}}
<h2 class="yxt-FilterBox-titleContainer">
<div>
{{> icons/iconPartial iconName='elements'}}
{{> icons/bakedInIcon iconName='elements'}}
</div>
<span class="yxt-FilterBox-title">{{title}}</span>
</h2>
Expand Down
3 changes: 3 additions & 0 deletions src/ui/templates/icons/bakedInIcon.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="Icon Icon--{{iconName}} {{classNames}}" aria-hidden="true">
{{icon iconName complexContentsParams}}
</div>
2 changes: 1 addition & 1 deletion src/ui/templates/navigation/navigation.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<div class="yxt-Nav-moreContainer">
<button id="yxt-Nav-moreButton" class="yxt-Nav-item yxt-Nav-more yxt-Nav-item--more js-yxt-navMore">
<span class="yxt-Nav-moreIcon">
{{> icons/iconPartial iconName=overflowIcon}}
{{> icons/bakedInIcon iconName=overflowIcon}}
</span>
{{overflowLabel}}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/questions/questionsubmission.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
aria-expanded="{{#if questionExpanded}}true{{else}}false{{/if}}">
<div class="yxt-QuestionSubmission-left">
<div class="yxt-QuestionSubmission-titleIconWrapper">
{{> icons/iconPartial iconName=_config.sectionTitleIconName}}
{{> icons/bakedInIcon iconName=_config.sectionTitleIconName}}
</div>
<div class="yxt-QuestionSubmission-title">
{{_config.sectionTitle}}
Expand All @@ -20,7 +20,7 @@
{{_config.teaser}}
</div>
<span class="yxt-QuestionSubmission-toggle{{#if questionExpanded}}--expanded{{else}}--collapsed{{/if}} yxt-QuestionSubmission-toggle">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</div>
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/templates/results/alternativeverticals.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</span>
</div>
<div class="yxt-AlternativeVerticals-arrowIconWrapper">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</div>
</a>
</li>
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/results/directanswer.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<form class="yxt-DirectAnswer-thumbs js-directAnswer-feedback-form">
<label class="yxt-DirectAnswer-thumb">
<span class="yxt-DirectAnswer-thumbUpIcon">
{{> icons/iconPartial iconName='thumb'}}
{{> icons/bakedInIcon iconName='thumb'}}
</span>
<input type="radio"
name="feedback"
Expand All @@ -60,7 +60,7 @@
</label>
<label class="yxt-DirectAnswer-thumb">
<span class="yxt-DirectAnswer-thumbDownIcon">
{{> icons/iconPartial iconName='thumb'}}
{{> icons/bakedInIcon iconName='thumb'}}
</span>
<input type="radio"
name="feedback"
Expand Down
12 changes: 6 additions & 6 deletions src/ui/templates/results/pagination.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
>
{{#unless icons.firstButtonIcon}}
<span class="yxt-Pagination-doubleChevron--left">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
<span class="yxt-Pagination-chevron--left">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{else}}
<span class="yxt-Pagination-doubleChevron--left">
Expand All @@ -30,7 +30,7 @@
>
{{#unless icons.previousButtonIcon}}
<span class="yxt-Pagination-chevron--left">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{else}}
<span class="yxt-Pagination-chevron--left">
Expand Down Expand Up @@ -96,7 +96,7 @@
>
{{#unless icons.nextButtonIcon}}
<span class="yxt-Pagination-chevron">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{else}}
<span class="yxt-Pagination-chevron">
Expand All @@ -113,10 +113,10 @@
>
{{#unless icons.lastButtonIcon}}
<span class="yxt-Pagination-doubleChevron">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
<span class="yxt-Pagination-chevron">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
{{else}}
<span class="yxt-Pagination-doubleChevron">
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/results/resultsaccordion.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{{this.title}}
<div class="yxt-AccordionResult-indicatorWrapper" aria-hidden="true">
<span class="yxt-AccordionResult-indicator">
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</span>
</div>
</button>
Expand All @@ -42,7 +42,7 @@
{{#if this.icon}}
<div class="yxt-AccordionResult-ctaIconWrapper">
<span class="yxt-AccordionResult-ctaIcon">
{{> icons/iconPartial iconName=this.icon}}
{{> icons/bakedInIcon iconName=this.icon}}
</span>
</div>
{{/if}}
Expand Down
4 changes: 2 additions & 2 deletions src/ui/templates/results/verticalresults.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
{{#if _config.icon}}
<div class="yxt-Results-titleIconWrapper">
{{#if iconIsBuiltIn}}
{{> icons/iconPartial iconName=_config.icon }}
{{> icons/bakedInIcon iconName=_config.icon }}
{{else}}
{{> icons/iconPartial iconUrl=_config.icon }}
{{/if}}
Expand Down Expand Up @@ -78,7 +78,7 @@
>
<div class="yxt-Results-viewAllLabel">{{_config.viewMoreLabel}}</div>
<div>
{{> icons/iconPartial iconName='chevron'}}
{{> icons/bakedInIcon iconName='chevron'}}
</div>
</a>
{{/if}}
Expand Down
12 changes: 6 additions & 6 deletions src/ui/templates/search/search.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
data-eventtype="SEARCH_CLEAR_BUTTON"
data-eventoptions="{{eventOptions}}"
>
{{> icons/iconPartial iconName='close'}}
{{> icons/bakedInIcon iconName='close'}}
<span class="yxt-SearchBar-clearButtonText sr-only">
{{clearText}}
</span>
Expand All @@ -38,7 +38,7 @@
class="js-yext-submit yxt-SearchBar-button">
{{#if submitIcon}}
<div class="yxt-SearchBar-buttonImage">
{{> icons/iconPartial iconName=submitIcon}}
{{> icons/bakedInIcon iconName=submitIcon}}
</div>
{{else if _config.customIconUrl}}
<div class="yxt-SearchBar-buttonImage">
Expand All @@ -47,15 +47,15 @@
{{else}}
<div class="yxt-SearchBar-AnimatedIcon yxt-SearchBar-AnimatedIcon--paused js-yxt-AnimatedForward
{{#if autoFocus}} yxt-SearchBar-AnimatedIcon--inactive{{/if}}">
{{> icons/iconPartial
{{> icons/bakedInIcon
iconName='yext_animated_forward'
classNames='Icon--lg'
complexContentsParams=forwardIconOpts.complexContentsParams
}}
</div>
<div class="yxt-SearchBar-AnimatedIcon yxt-SearchBar-AnimatedIcon--paused js-yxt-AnimatedReverse
{{#unless autoFocus}} yxt-SearchBar-AnimatedIcon--inactive{{/unless}}">
{{> icons/iconPartial
{{> icons/bakedInIcon
iconName='yext_animated_reverse'
classNames='Icon--lg'
complexContentsParams=reverseIconOpts.complexContentsParams
Expand Down Expand Up @@ -91,7 +91,7 @@
data-eventtype="SEARCH_CLEAR_BUTTON"
data-eventoptions="{{eventOptions}}"
>
{{> icons/iconPartial iconName='close' }}
{{> icons/bakedInIcon iconName='close' }}
<span class="yxt-SearchBar-clearButtonText sr-only">
{{clearText}}
</span>
Expand All @@ -100,7 +100,7 @@
class="js-yext-submit yxt-SearchBar-button">
{{#if submitIcon}}
<div class="yxt-SearchBar-buttonImage">
{{> icons/iconPartial iconName=submitIcon}}
{{> icons/bakedInIcon iconName=submitIcon}}
</div>
{{else if _config.customIconUrl}}
<div class="yxt-SearchBar-buttonImage">
Expand Down

0 comments on commit f758e35

Please sign in to comment.