Us250350 pfe-cta wrapping issues (#791)

* Adjustments to CTA width
* Addition of centering for primary style buttons that has long wrapping text
* Adjust demo file to prevent focus state issue from appearing on default cta

Author: starryeyez024

CHANGELOG-prerelease.md

@@ -5,6 +5,7 @@ Tag: [v1.0.0-prerelease.41](https://github.com/patternfly/patternfly-elements/re
 - [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add events to the generator
 - [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-tabs keep history on tab click and open tab based on url parameters #786
 - [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-health-index size="mini" version #789
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-cta text wrapping issues
 
 ## Prerelease 40 ( 2020-03-10 )
 

elements/pfe-cta/demo/demo.css

@@ -18,12 +18,10 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
 }
 
 .resize {
-  display: flex;
-  flex-flow: row nowrap;
   resize: horizontal;
   overflow: auto;
   border: 1px solid #ddd;
-  width: 500px;
+  width: 700px;
   padding: 10px;
 }
 

elements/pfe-cta/demo/index.html

@@ -214,7 +214,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
     <h3>Force wrap to test arrow line-wrap</h3>
     <div class="resize">
       <pfe-cta><a href="https://www.redhat.com">Default link cta with longer text</a></pfe-cta>
-      <pfe-cta><button>Default button cta with longer text</button></pfe-cta>
+      <pfe-cta><button>Default button cta: arrow won't wrap correctly</button></pfe-cta>
     </div>
 
     <br />

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

@@ -42,7 +42,6 @@ $variables: (
   display: inline-block;
   position: relative;
   z-index: 0;
-  max-width: max-content;
   vertical-align: middle;
   transition: padding #{pfe-var(animation-speed)} #{pfe-var(animation-timing)};
 
@@ -118,6 +117,10 @@ $variables: (
     color: #{pfe-local(Color--hover)} !important;
     text-decoration: #{pfe-local(TextDecoration--hover)} !important;
   }
+
+  :host([pfe-priority]) & {
+    text-align: center;
+  }
 }
 
 :host(:not([aria-disabled="true"])) ::slotted(*:not(:disabled)),
@@ -133,6 +136,7 @@ $variables: (
   &--wrapper {
     display: block; 
     white-space: nowrap;
+    min-width: 100%;
 
     :host([pfe-priority]) &,
     :host([aria-disabled="true"]) & {