Enterprise: Hyperlink: Forward/Back Caret looks funny after icon changes

[tmcconechy]

Describe the bug
Should improve this example http://latest-enterprise.demo.design.infor.com/components/hyperlinks/example-index.html

To Reproduce
Steps to reproduce the behavior:

1. Go to http://latest-enterprise.demo.design.infor.com/components/hyperlinks/example-index.html
2. Look at the front and back caret icons

Expected behavior
Make them less big and with nicer padding.

Version

• ids-enterprise: v4.19

Screenshots

Additional context
https://github.com/infor-design/enterprise-ng/issues/440
Perhaps add the launch icon in as another example and make sure that is styled and can be styled in its own or same link.

[tmcconechy]

Kind of an older/minor regression? (But added a minor feature to the example). Probably from the icon changes. So not sure priority.

[EdwardCoyle]

For some timing context:

• Seems OK in v4.15.0
• Not totally sure about v4.16.0 (at the time of this posting, the link is down)
• Seems broken in v4.17.0

[tmcconechy]

Sounds about right for icon scheme changes which was what I suspected.

[tmcconechy]

Here is some markup for the test page for the outcome of this issue i'd like to see

<div class="row">
  <div class="one-half column">
    <a class="hyperlink hide-focus" href="#">Normal Hyperlink</a><p>&nbsp;</p>
    <a class="hyperlink hide-focus" disabled tabindex="-1" href="#">Disabled Hyperlink</a><p>&nbsp;</p>
    <a class="hyperlink show-visited force-visited" href="#">Visited Hyperlink (Forced)</a><p>&nbsp;</p>
    <a class="hyperlink directional hide-focus" href="#">
      <span>Forward Link with Caret</span>
      <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
        <use xlink:href="#icon-caret-right"/>
      </svg>
    </a><p>&nbsp;</p>
    <a href="#" class="hyperlink hide-focus">
      <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
        <use xlink:href="#icon-caret-left"/>
      </svg>
      <span>Forward Link with Caret</span>
    </a><p>&nbsp;</p>
    <a href="#" class="hyperlink hide-focus">
      <span>Launch</span>
      <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
        <use xlink:href="#icon-launch"/>
      </svg>
    </a><p>&nbsp;</p>
    <a href="#" class="hyperlink hide-focus">
      <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
        <use xlink:href="#icon-launch"/>
      </svg>
    </a>
  </div>
</div>

[tmcconechy]

This was fixed.