patternfly
diff --git a/‎.storybook/color.js‎
Lines changed: 202 additions & 226 deletions b/‎.storybook/color.js‎
Lines changed: 202 additions & 226 deletions
diff --git a/‎elements/pfe-autocomplete/README.md‎
Lines changed: 20 additions & 12 deletions b/‎elements/pfe-autocomplete/README.md‎
Lines changed: 20 additions & 12 deletions
diff --git a/‎elements/pfe-autocomplete/demo/index.html‎
Lines changed: 22 additions & 13 deletions b/‎elements/pfe-autocomplete/demo/index.html‎
Lines changed: 22 additions & 13 deletions
diff --git a/‎elements/pfe-autocomplete/src/pfe-autocomplete.html‎
Lines changed: 19 additions & 16 deletions b/‎elements/pfe-autocomplete/src/pfe-autocomplete.html‎
Lines changed: 19 additions & 16 deletions
@@ -3,20 +3,22 @@
 <pfe-autocomplete> is a Web Component that provides options in a dropdown list as user types in an input box by showing result from an api call.
 
 ## Install
-```
+
+``` 
 npm install @patternfly/pfe-autocomplete
 ```
 
-
 Once installed, import it to your application:
-```
+
+``` 
 import '@patternfly/pfe-autocomplete.umd.js';
 ```
 
 ## Usage
-```html
+
+``` html
 <pfe-autocomplete debounce="500" init-value="uni">
-    <input placeholder="Enter Your Search Term"/>
+    <input placeholder="Enter Your Search Term" />
 </pfe-autocomplete>
 ```
 
@@ -29,7 +31,7 @@ It is called inside component but we define it outside component. First param is
 
 In the function, we add loading attribute then send api call.  When result is ready, we remove loading attribute and  pass the result to web component by calling callback function. Here is an example:
 
-```
+``` 
 // autocomplete call
 searchAutocomplete.autocompleteRequest = function(params, callback) {
   var xhr = new XMLHttpRequest();
@@ -77,9 +79,12 @@ aria-announce-template is an optional attribute string you provide so you can pr
 **`aria-label`**
 This is an optional attribute string that you can provide on the input tag in the light DOM of pfe-autocomplete. The aria-label attribute will default to "Search".
 
-```html
+**`button-text`**
+button-text is a string attribute. Add this attribute to the element when you want to have a textual search button to the right of the input field. The text in the button will contain the value you pass to the attribute. If an empty string ( `button-text=""` ) or no string ( `button-text` ) is provided, the text will default to "Search".
+
+``` html
 <pfe-autocomplete>
-  <input placeholder="Search" aria-label="Buscar" />
+    <input placeholder="Search" aria-label="Buscar" />
 </pfe-autocomplete>
 ```
 
@@ -89,25 +94,28 @@ By observing `selected-value` attribute you can detect autocomplete selected val
 ## Events
 
 ### pfe-autocomplete:search-event
-Fires when a user performs search. By listening to this event you can get selected phrase by getting `e.detail.searchValue`.
 
-```
+Fires when a user performs search. By listening to this event you can get selected phrase by getting `e.detail.searchValue` .
+
+``` 
 detail: {
   searchValue: String
 }
 ```
 
 ### pfe-autocomplete:option-selected
+
 Fires when a user selects an option from the dropdown list.
 
-```
+``` 
 detail: {
   optionValue: String
 }
 ```
 
 ## Get selected item
-User can select an item by clicking on search button, type press enter or select an item by using keyboard and press enter. The selected item can be captured by listening to an event(`pfe-autocomplete:search-event`) or observing attribute(`selected-value`) change.
+
+User can select an item by clicking on search button, type press enter or select an item by using keyboard and press enter. The selected item can be captured by listening to an event( `pfe-autocomplete:search-event` ) or observing attribute( `selected-value` ) change.
 
 ## Dependencies
 
 
@@ -6,8 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PFElements: pfe-autocomplete Demo</title>
 
-  <link rel="stylesheet" type="text/css" href="//overpass-30e2.kxcdn.com/overpass.css">
-
   <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
@@ -40,12 +38,20 @@
   <pfe-band size="small">
     <h1 class="pfe-headline-1">&lt;pfe-autocomplete&gt;</h1>
   </pfe-band>
+  <pfe-band color="lightest" size="small">
+    <h2 class="pfe-headline-2">Textual Button</h2>
+    <div>
+      <pfe-autocomplete class="static" debounce="300" button-text="Search">
+        <input placeholder="Enter Your Search Term" />
+      </pfe-autocomplete>
+    </div>
+  </pfe-band>
 
   <pfe-band color="lightest">
     <h2 class="pfe-headline-2" slot="pfe-band--header">Static Data</h2>
     <p class="pfe-text">Uses an array of strings.</p>
     <div>
-      <pfe-autocomplete id="static" debounce="300">
+      <pfe-autocomplete class="static" debounce="300">
         <input placeholder="Enter Your Search Term" />
       </pfe-autocomplete>
     </div>
@@ -71,7 +77,8 @@ <h2 class="pfe-headline-2" slot="pfe-band--header">Disabled</h2>
     </div>
   </pfe-band>
   <script>
-    const staticAutocomplete = document.querySelector("#static");
+    const staticAutocompletes = document.querySelectorAll(".static");
+
     const items = [
       "Item 1",
       "Item 2",
@@ -91,16 +98,18 @@ <h2 class="pfe-headline-2" slot="pfe-band--header">Disabled</h2>
       "Red Hat Enterprise Linux"
     ];
 
-    staticAutocomplete.autocompleteRequest = function (params, callback) {
-      const regx = new RegExp("\^" + params.query, "i");
-      callback(items.filter(function (item) {
-        return regx.test(item);
-      }));
-    };
+    staticAutocompletes.forEach(a => {
+      a.autocompleteRequest = function (params, callback) {
+        const regx = new RegExp("\^" + params.query, "i");
+        callback(items.filter(function (item) {
+          return regx.test(item);
+        }));
+      };
 
-    staticAutocomplete.addEventListener('pfe-autocomplete:search-event', function (e) {
-      document.querySelector("#staticSelectedValue").textContent = e.detail.searchValue;
-    });
+      a.addEventListener('pfe-autocomplete:search-event', function (e) {
+        document.querySelector("#staticSelectedValue").textContent = e.detail.searchValue;
+      });
+    })
 
     const searchAutocomplete = document.querySelector('#search-lazy-loading');
 
 
@@ -1,24 +1,21 @@
-<div id="input-box-wrapper">
+<div id="wrapper">
+  <div id="input-box-wrapper">
     <!-- Input box -->
     <slot></slot>
 
     <!-- loading icon -->
     <span class="loading" aria-hidden="true" hidden>
-        <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">
-          <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+      <svg viewBox="0 0 40 40" enable-background="new 0 0 40 40">
+        <path opacity="0.2" fill="#000"
+          d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
           s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
-          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
-          <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+          c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+        <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
           C22.32,8.481,24.301,9.057,26.013,10.047z">
-          <animateTransform attributeType="xml"
-            attributeName="transform"
-            type="rotate"
-            from="0 20 20"
-            to="360 20 20"
-            dur="0.5s"
-            repeatCount="indefinite"/>
-          </path>
-        </svg>
+          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
+            dur="0.5s" repeatCount="indefinite" />
+        </path>
+      </svg>
     </span>
 
     <!-- clear search button -->
@@ -36,8 +33,14 @@
       c-8.596,8.596-8.596,22.391,0,30.987l33.286,33.286c8.596,8.596,22.391,8.596,30.987,0L192.26,383.796
       c43.282,27.688,97.559,39.683,154.734,28.188c79.167-15.893,142.04-77.067,159.632-155.934
       C540.212,104.314,407.968-27.93,256.233,5.756z M435.857,208.37c0,72.869-59.075,131.944-131.944,131.944
-      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z"/>
+      S171.969,281.239,171.969,208.37S231.043,76.426,303.913,76.426S435.857,135.501,435.857,208.37z" />
       </svg>
     </button>
+  </div>
+  <pfe-search-droplist id="dropdown"></pfe-search-droplist>
 </div>
-<pfe-search-droplist id="dropdown"></pfe-search-droplist>
+
+<!-- Search button (when [button-text] attr provided) -->
+<pfe-button class="search-button--textual" hidden>
+  <button class="search-button__text" disabled></button>
+</pfe-button>