Merge branch 'master' into feat-issue-741-add-event-cta

Author: castastrophe

.travis.yml

@@ -1,17 +1,17 @@
 language: node_js
 sudo: false
 node_js:
-    - "12"
+  - "12"
 os:
-    - linux
+  - linux
 addons:
-    firefox: latest
-    chrome: stable
+  firefox: latest
+  chrome: stable
 script:
-    - npm test -- --verbose
+  - npm test -- --verbose
 cache:
-    directories:
-        - node_modules
+  directories:
+    - node_modules
 # matrix:
 #     exclude:
 #         - os: osx # skip this because on Travis, node.js segfaults on osx+node 9

CHANGELOG-prerelease.md

@@ -2,6 +2,7 @@
 
 Tag: [v1.0.0-prerelease.40](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.40)
 
+- [7deb9bb](https://github.com/patternfly/patternfly-elements/commit/7deb9bb6227c0560b60a665ecd43b450db0f90e1) fix: Prevent default pfe-cta arrow from wrapping to a new line by itself (#679)
 - [](https://github.com/patternfly/patternfly-elements/commit/) feat: adding event to pfe-cta component
 
 ## Prerelease 39 ( 2020-02-19 )

elements/pfe-cta/demo/demo.css

@@ -83,4 +83,4 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
   padding: 15px;
   background: #0c8488;
   --theme: saturated;
-}
+}

elements/pfe-cta/demo/index.html

@@ -1,13 +1,4 @@
 <span class="pfe-cta--wrapper">
-  <slot></slot>${this.isDefault ? `<svg
-    class="pfe-cta--arrow"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 31.56 31.56"
-    focusable="false"
-  >
-    <path
-      d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z"
-    /></svg
-  >` : ``}
+  <slot></slot>${this.isDefault ? `&#160;<svg class="pfe-cta--arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.56 31.56" focusable="false"><path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z"/></svg>` : ``}
   <span class="pfe-cta--inner"></span>
 </span>

elements/pfe-cta/src/pfe-cta.html

@@ -2,7 +2,7 @@
 
 $LOCAL: cta;
 
-$pfe-cta__arrow-size: 0.313em;
+ 
 $pfe-cta--BackgroundColor--focus: rgba(40, 151, 240, 0.2);
 $pfe-cta--Color--fallback: #003366;
 
@@ -94,9 +94,8 @@ $variables: (
 }
 
 ::slotted(*) {
-  white-space: normal;
-  display: inline;
-
+  white-space: normal; 
+  display: inline; 
   padding: #{pfe-local($cssvar: Padding)} !important;
   color: #{pfe-local(Color, $pfe-cta--Color--fallback)} !important;
   font-family: #{pfe-local(
@@ -132,6 +131,7 @@ $variables: (
 
 .pfe-cta {
   &--wrapper {
+    display: block; 
     white-space: nowrap;
 
     :host([pfe-priority]) &,
@@ -141,7 +141,12 @@ $variables: (
       align-items: center;
       height: 100%;
     }
-
+    // Default CTA arrow wrap fix for Firefox
+    :host(:not([pfe-priority]):not([aria-disabled="true"])) & {
+      @include browser-query(firefox) {
+        max-width: calc(100% - 1ch - #{pfe-local($cssvar: size, $region: arrow)});
+      }
+    }
     @include browser-query(edge) {
       button,
       input {

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

@@ -1,23 +1,25 @@
 @mixin browser-query($browser-list) {
   @each $browser in $browser-list {
-
     @if $browser == ie11 {
       @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */
         @content;
       }
     }
-
     @if $browser == edge12 {
       @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */
         @content;
+      }
     }
-  }
-
     @if $browser == edge {
       @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */
         @content;
       }
     }
+    @if $browser == firefox {
+      @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */
+        @content;
+      }
+    }
   }
 }
 

elements/pfe-sass/mixins/_mixins.scss

@@ -14,32 +14,42 @@ let elementNames = fs
   .filter(file => fs.statSync(path.join(elementsDir, file)).isDirectory());
 
 // Remove base class and sass helpers from listing
-elementNames = elementNames.filter(folder => folder !== "pfelement" && !folder.includes("sass"));
+elementNames = elementNames.filter(
+  folder => folder !== "pfelement" && !folder.includes("sass")
+);
 
 let items = [];
- 
+
 // -> todos contains the array of todos/fixme/polyfills, parsed
 glob(`${elementsDir}/*/src/*.js`, (er, files) => {
   files.forEach(file => {
     items = items.concat(
-      leasot.parse(
-        fs.readFileSync(file, "utf8"), {
-          extension: ".js",
-          customTags: [ "POLYFILL" ],
-          filename: file
-        }
-      )
+      leasot.parse(fs.readFileSync(file, "utf8"), {
+        extension: ".js",
+        customTags: ["POLYFILL"],
+        filename: file
+      })
     );
   });
-    
+
   let regex = new RegExp(/\[(.*?)\]\((.*?)\)/g);
 
   // -> markdown output of the todos
   let output = "";
   output += leasot.report(items, "markdown");
-  
+
   output = output.replace(regex, (full, label, link) => {
-    return "[" + path.basename(label, ".js").split("--").slice(-1).pop() + "](" + path.relative(__dirname, link) + ")";
+    return (
+      "[" +
+      path
+        .basename(label, ".js")
+        .split("--")
+        .slice(-1)
+        .pop() +
+      "](" +
+      path.relative(__dirname, link) +
+      ")"
+    );
   });
 
   let markup = "";
@@ -54,17 +64,16 @@ glob(`${elementsDir}/*/src/*.js`, (er, files) => {
   const tmpl = fs.readFileSync(wrapper, "utf8");
   const compiledTpl = template(tmpl);
   const newContents = compiledTpl({
-    "components": markup,
-    "todo": items.length > 0 ? output : ""
+    components: markup,
+    todo: items.length > 0 ? output : ""
   });
 
   // // Read in the wrapper template
   fs.readFile(wrapper, (err, data) => {
     if (err) throw err;
-  //   // Output the updated index file
+    //   // Output the updated index file
     fs.writeFile(index, newContents, function(err) {
       if (err) throw err;
     });
   });
-
-});
+});

scripts/doc-listing-inject.js

@@ -27,9 +27,9 @@ module.exports = function factory({
     `${elementName}--*.min.css.map`,
     `${elementName}.json`
   ]);
-  
+
   // Dedupe any items
-  files = files.filter((item,index) => files.indexOf(item) === index);
+  files = files.filter((item, index) => files.indexOf(item) === index);
 
   // Tooling
   const fs = require("fs");
@@ -62,10 +62,7 @@ module.exports = function factory({
 
   // Delete the temp directory
   task("clean", () => {
-    return src([
-      paths.temp,
-      paths.compiled
-    ], {
+    return src([paths.temp, paths.compiled], {
       cwd: paths.root,
       read: false,
       allowEmpty: true
@@ -79,9 +76,7 @@ module.exports = function factory({
         cwd: paths.source
       })
         .pipe(sourcemaps.init())
-        .pipe(
-          sass().on('error', sass.logError)
-        )
+        .pipe(sass().on("error", sass.logError))
         // Compile the Sass into CSS
         .pipe(
           sass({
@@ -90,10 +85,13 @@ module.exports = function factory({
         )
         // Adds autoprefixing to the compiled sass
         .pipe(
-          postcss([postcssCustomProperties(), autoprefixer({
-            grid: "autoplace",
-            overrideBrowserslist: browser_support
-          })])
+          postcss([
+            postcssCustomProperties(),
+            autoprefixer({
+              grid: "autoplace",
+              overrideBrowserslist: browser_support
+            })
+          ])
         )
         // Write the sourcemap
         .pipe(sourcemaps.write("./"))
@@ -286,7 +284,13 @@ ${fs
   task("copy:compiled", () => {
     return src(["*"], {
       cwd: paths.temp
-    }).pipe(gulpif((file) => (files.length > 0 && gulpmatch(file, files)) || files.length === 0, dest(paths.compiled)));
+    }).pipe(
+      gulpif(
+        file =>
+          (files.length > 0 && gulpmatch(file, files)) || files.length === 0,
+        dest(paths.compiled)
+      )
+    );
   });
 
   task("compile", () => {
@@ -311,10 +315,7 @@ ${fs
 
   // Delete the temp directory
   task("clean:post", () => {
-    return src([
-      "*.min.css",
-      "*.umd.js"
-    ], {
+    return src(["*.min.css", "*.umd.js"], {
       cwd: paths.temp,
       read: false,
       allowEmpty: true
@@ -365,4 +366,3 @@ ${fs
 
   task("dev:nojs", parallel("build:nojs", "watch:nojs"));
 };
-

scripts/gulpfile.factory.js

@@ -1,6 +1,6 @@
 // If we have a .env file respect the LOCALHOST setting
 // If not default to localhost
-require('dotenv').config();
+require("dotenv").config();
 
 module.exports = {
   host: process.env.LOCALHOST || "localhost",