fix: [issue 669] Padding bug on pfe-cta in IE & Edge (#665)

* [issue 664] moving padding to href and adding z-index to span wrappers for links in IE and edge;  adjusted lightdom styles to read padding
* added padding to modal slot, fixed links in edge
* removed lightdom styles that were causing a bug on the secondary focus state for edge and IE11
* added IE11 & edge fallback styles for pfe-cta 
* added safari fallback styles for focus states on priority ctas
* put inner focus border on priority CTAs only

Co-authored-by: Kendall Totten <[email protected]>

Author: LyndseyR

elements/pfe-cta/package-lock.json

@@ -8,13 +8,15 @@ $LOCAL: cta;
 
 /*************************/
 /** Set link tag styles for IE11 & EDGE **/
-[class^="pfe-cta"][class="PFElement"],
+
 .pfe-cta--wrapper {
   a,
   a:visited {
       font-family: #{pfe-var(font-family)};
       display: inline;
-      color:  #{pfe-local($cssvar: Color, $fallback: #{pfe-color(link)})} !important;
+      color:  #{pfe-local(
+          $cssvar: Color, $fallback: #{pfe-color(link)}
+      )} !important;
       z-index: 1; // IE & Edge need this for the link to be clickable
       position: relative;
   }
@@ -25,20 +27,23 @@ $LOCAL: cta;
   input:hover,
   button:hover,
   a:hover {
-      color: #{pfe-local($cssvar: Color--hover, $fallback: #{pfe-color(link--hover)})} !important;
+      color: #{pfe-local(
+          $cssvar: Color--hover, $fallback: #{pfe-color(link--hover)}
+      )} !important;
   }
 
   &:focus input,
   &:focus button,
   &:focus a,
   input:focus,
-  button:focus,
-  a:focus {
+  a:focus,
+  button:focus {
       color: #{pfe-local(
         $cssvar: Color--focus, $fallback: #{pfe-color(link--focus)},
       )} !important;
   }
-
+}
+[pfe-priority] .pfe-cta--wrapper {
   a:focus {
     outline: none !important;
     &::before {  // inner border on priority CTAs
@@ -47,7 +52,7 @@ $LOCAL: cta;
       box-sizing: border-box;
       border: 1px solid;
       border-color: #{pfe-local(
-        $cssvar: inner--BorderColor, $fallback: #{pfe-color(link--on-dark)},
+        $cssvar: inner--BorderColor, $fallback: (Color),
       )};
       outline: none;
       position: absolute;
@@ -64,26 +69,35 @@ $LOCAL: cta;
   }
 }
 
-[class^="pfe-cta"][class="PFElement"][pfe-priority], //ie11
+// targeting default cta's
+.pfe-cta--wrapper {
+    padding: 0 !important;
+}
+
+// removing padding from wrapper and placing it on link
+[pfe-priority] .pfe-cta--wrapper {
+    padding: 0 !important;
+}
+
+[class^="pfe-cta"][class="PFElement"][pfe-priority],
 [pfe-priority] .pfe-cta--wrapper {
   a,
   input {
     text-decoration: none;
+    padding: #{pfe-local(
+        $cssvar: Padding, $fallback: (16px 32px),
+    )} !important;
   }
 }
 
-[class^="pfe-cta"][class="PFElement"][pfe-priority="secondary"]  { //ie11
-  background-color: #{pfe-local(
-    $cssvar: BackgroundColor, $fallback: #{pfe-color(surface--lightest)}
-  )};
-}
-
 [class^="pfe-cta"][class="PFElement"][pfe-priority="secondary"], //ie11
 [pfe-priority="secondary"] .pfe-cta--wrapper {
   input,
   button,
   a {
-      color: #{pfe-local($cssvar: Color, $fallback: #{pfe-color(text)})} !important;
+      color: #{pfe-local(
+          $cssvar: Color, $fallback: #{pfe-color(text)}
+      )} !important;
   }
 
   &:hover input,
@@ -92,11 +106,33 @@ $LOCAL: cta;
   input:hover,
   button:hover,
   a:hover {
-      color: #{pfe-local($cssvar: Color--hover, $fallback: #{pfe-color(link--on-saturated)})} !important;
+      color: #{pfe-local(
+          $cssvar: Color--hover, $fallback: #{pfe-color(link--on-saturated)}
+      )} !important;
+  }
+  @include browser-query(edge) {
+      a:focus {
+          color: #{pfe-local(
+            $cssvar: Color--focus, $fallback: #{pfe-color(link--focus)},
+          )} !important;
+      }
+    }
+}
+
+@include browser-query(edge) {
+  .pfe-cta--arrow.pfe-cta {
+      top:    .25rem;
+      width:  18px;
+      height: 18px;
   }
 }
 
 @include browser-query(ie11) {
+  [class^="pfe-cta"] .pfe-cta--arrow.pfe-cta {
+      top:    .35rem;
+      width:  16px;
+      height: 20px;
+  }
   pfe-cta.PFElement{
     button {
       background-color: transparent !important;
@@ -106,14 +142,50 @@ $LOCAL: cta;
     }
     &[pfe-priority="primary"] {
       a, a:visited, a:focus, a:hover {
-        color:  #{pfe-color(link--on-saturated)} !important;
+        color: #{pfe-local(
+          $cssvar: Color, $fallback: #{pfe-color(link--on-saturated)},
+        )} !important;
       }
     }
     &[pfe-priority="primary"][pfe-color="lightest"],
+    &[pfe-priority="secondary"][pfe-color="lightest"] {
+        border-color: #{pfe-local(
+          $cssvar: BorderColor, 
+          $fallback: #{pfe-color(surface--darkest)},
+        )} !important;
+        a {
+            color: #{pfe-local(
+              $cssvar: Color, 
+              $fallback: #{pfe-color(text)},
+            )} !important;
+        }
+      a:hover {
+          color: #{pfe-local(
+            $cssvar: Color, 
+            $fallback: #{pfe-color(ui-complement)},
+          )} !important;
+      }
+    }
     &[pfe-priority="secondary"][pfe-variant="wind"] {
       a, a:visited, a:focus, a:hover {
-        color:  #{pfe-color(link)} !important;
+          color: #{pfe-local(
+            $cssvar: Color, 
+            $fallback: #{pfe-color(link)},
+          )} !important;
       }
     }
   }
 }
+
+// Fallback styles for safari to read a border on focus
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    ::-webkit-full-page-media, _:future, :root, a {
+       border: 1px solid transparent;
+    }
+    [pfe-priority] {
+      a:focus {
+          border-color: #{pfe-local($cssvar: BorderColor--focus, $region: inner)};
+          border-radius: 2px;
+      }
+    }
+}

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

@@ -9,7 +9,6 @@ $pfe-cta--Color--fallback: #003366;
 $variables: (
   Padding:      .6rem 0,
   BorderRadius: 0,
-  
   BackgroundColor:        transparent,
   BackgroundColor--hover: transparent,
   BackgroundColor--focus: transparent,
@@ -55,7 +54,6 @@ $variables: (
   background-color: #{pfe-local(BackgroundColor)};
   border-radius:    #{pfe-local(BorderRadius)};
   border:           #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
-  padding:          #{pfe-local($cssvar: Padding)} !important;
 }
 
 ::slotted(button),
@@ -65,14 +63,13 @@ $variables: (
 
 ::slotted(*) {
   display: inline;
-
+  padding:         #{pfe-local($cssvar: Padding)} !important;
   color:           #{pfe-local(Color, $pfe-cta--Color--fallback)} !important;
   font-family:     #{pfe-local($cssvar: FontFamily, $fallback: #{pfe-var(font-family--heading)})};
   font-size:       #{pfe-local($cssvar: FontSize, $fallback: #{pfe-var(font-size)})};
   font-weight:     #{pfe-local(FontWeight)};
   line-height:     #{pfe-local($cssvar: LineHeight, $fallback: #{pfe-var(line-height)})};
   text-decoration: #{pfe-local(TextDecoration)} !important;
-  
   &::before {  // inner border on priority CTAs
     content: "";
 
@@ -86,7 +83,6 @@ $variables: (
 
     border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-local($cssvar: BorderColor, $region: inner)};
     border-radius: 2px;
-    
     outline: none;
   }
 }
@@ -108,7 +104,7 @@ $variables: (
 
   ::slotted(:hover) {
     --pfe-cta__arrow--Padding:     0 0 0 .5rem;
-    
+
     color: #{pfe-local(Color--hover)} !important;
     text-decoration: #{pfe-local(TextDecoration--hover)} !important;
   }
@@ -127,13 +123,14 @@ $variables: (
   }
 }
 
+
+
 :host(::after) {
   margin-left: #{pfe-local($cssvar: MarginLeft, $region: arrow)};
 }
 
 :host(:hover) {
   --pfe-cta__arrow--Padding:     0 0 0 .5rem;
-  
   background-color: #{pfe-local(BackgroundColor--hover)};
   border-color:     #{pfe-local(BorderColor--hover)};
 
@@ -223,7 +220,7 @@ $variables: (
 
   --pfe-cta--BackgroundColor--focus:    #{pfe-color(surface--lighter)};
   --pfe-cta--BorderColor--focus:        #{pfe-color(ui-complement)};
-  --pfe-cta__inner--BorderColor--focus: var(--pfe-broadcasted--text, #{pfe-color(ui-complement)});
+  --pfe-cta__inner--BorderColor--focus: #{pfe-color(ui-complement)};
   --pfe-cta--Color--focus:              #{pfe-color(ui-complement)};
 }
 
@@ -335,10 +332,10 @@ $variables: (
 /// ===========================================================================
 /// COLOR=BASE
 
-// :host(:not([pfe-priority])[pfe-color="complement"]) {
-//   --pfe-cta--Color:        #{pfe-color(ui-base)};
-//   --pfe-cta--Color--hover: #{pfe-color(ui-base--hover)};
-// }
+:host(:not([pfe-priority])[pfe-color="complement"]) {
+  --pfe-cta--Color:        #{pfe-color(ui-base)};
+  --pfe-cta--Color--hover: #{pfe-color(ui-base--hover)};
+}
 
 :host([pfe-priority="primary"][pfe-color="base"]) {
   --pfe-cta--BackgroundColor:           #{pfe-color(ui-base)};
@@ -440,3 +437,10 @@ $variables: (
   --pfe-cta__inner--BorderColor--focus:  #{pfe-local(BorderColor--focus)};
   --pfe-cta--TextDecoration--hover:      #{pfe-broadcasted(link-decoration--hover)};
 }
+
+/// ===========================================================================
+/// MODALS
+/// ===========================================================================
+:host([slot="pfe-modal--trigger"]) {
+    padding: #{pfe-local($cssvar: Padding)} !important;
+}