Fix: Reduce pfe-cta arrow spacing, bring closer to text (#844)

* Reduce CTA arrow spacing, bring closer to text
* Remove render flicker on hover by removing transition prop
* Simplify math with Sass

Co-authored-by: [ Cassondra ] <[email protected]>

Author: starryeyez024

CHANGELOG-prerelease.md

@@ -3,7 +3,9 @@
 - [27fee5f](https://github.com/patternfly/patternfly-elements/commit/27fee5f5c5eb021ac126f3767dd0299f5cda8231) fix: pfe-tabs check for tagName on addedNode mutation before continuing
 - [2c950b0](https://github.com/patternfly/patternfly-elements/commit/2c950b08f7638787df50aa5ee6738f1205ea3a9d) fix: Add clearfix within tab and accordion panels
 - [96f0a1b](https://github.com/patternfly/patternfly-elements/commit/96f0a1bdf9c758650e02b20a63ee3fb2fcf11bc9) feat: Add border to the card component
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Generator needs to convert slot-name to camelCase in js file if dash exists
+- [f392a0f](https://github.com/patternfly/patternfly-elements/commit/f392a0f0eeac3b0379794eff4a1b2946e10e883a) fix: Generator needs to convert slot-name to camelCase in js file if dash exists
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: adjust arrow spacing & alignment on pfe-cta
+
 
 ## Prerelese 45 ( 2020-04-27 )
 

elements/pfe-cta/src/pfe-cta.scss

@@ -6,6 +6,12 @@ $LOCAL: cta;
 $pfe-cta--BackgroundColor--focus: rgba(40, 151, 240, 0.2);
 $pfe-cta--Color--fallback: #003366;
 
+// Arrow animation
+$horizontal-spacing: 3px;
+$arrow-basic: 0 $horizontal-spacing;
+$arrow-hover: 0 0 0 #{$horizontal-spacing * 2};
+
+
 $variables: (
   Padding: 0.6rem 0,
   BorderRadius: 0,
@@ -26,7 +32,7 @@ $variables: (
   FontSize--priority: calc(#{pfe-local($cssvar: FontSize) / 1.125}),
   arrow: (
     Display: inline,
-    Padding: 0 0.125rem 0 0.375rem,
+    Padding: #{$arrow-basic},
     size: 13px,
     MarginLeft: calc(#{pfe-var(content-spacer)} * 0.25)
   ),
@@ -40,13 +46,10 @@ $variables: (
 :host {
   @include pfe-print-variables($variables);
 
-  // properties
   display: inline-block;
   position: relative;
   z-index: 0;
   vertical-align: middle;
-  transition: padding #{pfe-var(animation-speed)} #{pfe-var(animation-timing)};
-
   background-color: #{pfe-local(BackgroundColor)};
   border-color: #{pfe-local(BorderColor)};
 
@@ -76,7 +79,7 @@ $variables: (
 :host(:hover),
 :host(:hover) ::slotted(*),
 ::slotted(:hover) {
-  --pfe-cta__arrow--Padding: 0 0 0 0.5rem;
+  --pfe-cta__arrow--Padding: #{$arrow-hover};
 }
 
 :host(:hover) {
@@ -194,7 +197,7 @@ $variables: (
     width: #{pfe-local($cssvar: size, $region: arrow)};
     height: #{pfe-local($cssvar: size, $region: arrow)};
     transition: padding #{pfe-var(animation-speed)} #{pfe-var(animation-timing)};
-
+    margin-bottom: -1px;
     :host(.focus-within) & {
       fill: #{pfe-local(Color--focus)};
     }