Rebrand icons in buttons and links

[MisRob]

Description

Rebrands icons in KButton, KRouterLink, and KExternalLink.

Before	After

Changelog

• #587
  • Description: Rebrands icons in buttons and links
  • Products impact: UI
  • Addresses: -
  • Components: KButton, KRouterLink, KExternalLink
  • Breaking: no
  • Impacts a11y: -
  • Guidance: -

Steps to test

You can preview existing examples in the documentation build.

For more comprehensive preview, you could paste the following:

<KButton text="Button 1" :primary="true" appearance="raised-button" icon="back" iconAfter="forward" />
<KButton text="Button 2" :primary="false" appearance="raised-button" icon="back" iconAfter="forward" />
<KButton text="Button 3" :primary="true" appearance="raised-button" hasDropdown />
<KButton text="Button 4" :primary="false" appearance="raised-button" hasDropdown />
<KButton text="Button 5" :primary="true" appearance="flat-button" icon="back" iconAfter="forward" />
<KButton text="Button 6" :primary="false" appearance="flat-button" icon="back" iconAfter="forward" />
<KButton text="Button 7" :primary="true" appearance="flat-button" hasDropdown />
<KButton text="Button 8" :primary="false" appearance="flat-button" hasDropdown />
<KButton text="Button 9" :primary="true" appearance="basic-link" icon="back" iconAfter="forward" />
<KRouterLink :to="{}" text="Router Link 1" :primary="true" appearance="raised-button" icon="back" iconAfter="forward" />
<KRouterLink :to="{}" text="Router Link 2" :primary="false" appearance="raised-button" icon="back" iconAfter="forward" />
<KRouterLink :to="{}" text="Router Link 3" :primary="true" appearance="flat-button" icon="back" iconAfter="forward" />
<KRouterLink :to="{}" text="Router Link 4" :primary="false" appearance="flat-button" icon="back" iconAfter="forward" />
<KRouterLink :to="{}" text="Router Link 5" :primary="true" appearance="basic-link" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 1" :primary="true" appearance="raised-button" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 2" :primary="false" appearance="raised-button" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 3" :primary="false" appearance="raised-button" openInNewTab />
<KExternalLink :to="{}" text="External Link 4" :primary="true" appearance="flat-button" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 5" :primary="false" appearance="flat-button" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 6" :primary="false" appearance="flat-button" openInNewTab />
<KExternalLink :to="{}" text="External Link 7" :primary="true" appearance="basic-link" icon="back" iconAfter="forward" />
<KExternalLink :to="{}" text="External Link 8" :primary="true" appearance="basic-link" openInNewTab />

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

After review

• The changelog item has been pasted to the CHANGELOG.md

[rtibbles]

Everything here looks good to me. One note is that we might want to expand the documentation pages for each of these components to showcase the different styles here - could you file a follow up issue for that?

[MisRob]

Thanks, @rtibbles, yes that'd be good