JS Version 13.1 - Technical and Visual Regressions

Bug Reporting
1

With the Launch of v13, there are several visual changes that regressions in experiences when upgrading from an earlier version. Here is a running log of said :bug:s, current workarounds, and ETAs for resolution. Feel free to use this if you have already updated a client to v13.1 and are seeing these issues.

Technical Breaking Changes and Regressions

Description Resolution Workaround
Title Link Targets: Defining ā€˜targetā€™ moved from the vertical.target to vertical.dataMappings.target, and is no longer defaulting to ā€œ_blankā€. This breaks client-hosted integrations because content will open in the same window. Version 1.0.0, EOD 4/20 See (1) below
CTA Link Targets in cards: Default target behavior for CTAs is no longer defaulting to ā€œ_blankā€. This breaks client-hosted integrations because content will open in the same window. Version 1.0.0, EOD 4/20 See (2) below
Icon references not working (SVGs) Scoping in progress None
Legacy Card does not support bigDate (affects Events with Date) Version 1.0.0, EOD 4/20 None
  1. Instead of setting target in the top level vertical config, set it dataMappings. For the fix deploying on Monday, either will work.
verticals: {
  locations: {
    target: "_blank", //no longer works (regression)
    dataMappings: {
       target: "_blank", //will update the target for the title link
    }
  }
}
  1. IAdd a target to the ctas. For the fix deploying on Monday, it will again default to blank. Need to confirm this with AEB team then will update.
verticals: {
  locations: {
    target: "_blank", //no longer works (regression)
    dataMappings: {
      ctas: {    
       target: "_blank"
      }
    }
  }
}

Visual Breaking Changes and Regressions

Description Resolution Workaround
Search bar loses border when on mobile, becomes obvious on a white background Version 1.0.0, EOD 4/20 See (1) below
Border is lost on vertical section headers and applied filters section, accordion results lost border Version 1.0.0, EOD 4/20 See (2) below
CTA color on hover is no longer respecting $color-brand-primary Version 1.0.0, EOD 4/20 See (3) below
Exposing the results count (1 - 10 of 345) by default leads to a bad UX if pagination is not present. Many verticals do not have pagination. Visual See (4) below to hide result count
Thereā€™s spacing between the cards on verticals Visual If youā€™d prefer to not have this, see (5) below
  1. Search bar loses border when on mobile. Add this to your answers.scss
.yxt-SearchBar
{
  &-container
  {
    @include bplte(sm) {
      border-radius: .4rem;
      border: 1px solid $gray-3;
    }
  }
}
  1. Border is lost on vertical section headers and applied filters
$answers-border : 1px solid #e9e9e9;
.yxt-Results
{
 &-filters
 {
   border-right: $answers-border;
   border-left: $answers-border;
   border-bottom: none;
 }
}
.yxt-Accordion.yxt-Results {
 border: $answers-border;
}
.yxt-Accordion-list {
  border-top: .0625rem solid #e9e9e9;
}
.yxt-Accordion {
   .yxt-Results-filters {
      border-left: 0;
      border-right: 0;
   }
}
.yxt-Results--verticalName {
  .yxt-Results-titleBar {
        border: .0625rem solid #e9e9e9;
  }
}
  1. CTA color on hover is no longer respecting $color-brand-primary
yxt-CTA:active, .yxt-CTA:focus, .yxt-CTA:hover {
  color: $color-brand-primary;
}
  1. Exposing the results count (1 - 10 of 345) by default leads to a bad UX if pagination is not present. Either add pagination, or in your vertical, set showResultCount to false to hide it.
verticals: {
  links: {
    showResultCount: false
  }
}
  1. Thereā€™s spacing between cards on vertical search. This is an intended UX change but can be overridden by adding this to your answers.scss.
.yxt-Card {
margin-right: 0;
margin-bottom: 0;
}
1 Like