Merge branch '0.1.2'

* 0.1.2: (29 commits) 0.1.2 release 0.1.2 release prep added my committed changes into changelog Ember Lookups - allowing binding to the controller. Properly calling filled search term method. Ember Lookups - doc update Edited jQuery lookups' select pill markup to match 0.12.0 specs Ember Lookups - Single Select selected result markup updated to match SLDS update Changelog formatting Added changelog file Hotfix for 0.12.0 SLDS tabs (from salesforce-ux/design-system#106) 0.1.2 prep Ember Modals documentation Ember Modals - adding 'show' as a method for $.modal calls Ember Notifications - added support to customize classes that get applied to the sods-notify div Ember Tabs - updated classes that are applied to template markup to comply with SLDS 0.12.0 Updated SLDS to 0.12.0; updated jQuery tabs plugin, demo, and docs; updated jQuery modal plugin, demo, and docs (backdrop) Ember Modals - Changed slds-modal-backdrop markup to just slds-backdrop to match new SLDS release. documentation for jQuery also updated. jQuery lookups: setSelection method and initialSelection option for controlling the selected value programmatically. Also updated the doc with the new features. jQuery Lookups: Clicking lookup results in Firefox/Safari/IE 10 now properly select them. Added an onChange option to run when a user selects an result. Added a getSelection method so user can get the object(s) that is/are currently selected. https://github.com/appiphony/appiphony-lightning-js/issues/9 gulp'd ... Conflicts: bower.json dist/aljs.zip
appiphony · Nov 30, 2015 · 30a84ea · 30a84ea
2 parents 5334b15 + ab9fed1
commit 30a84ea
Show file tree

Hide file tree

Showing 43 changed files with 15,406 additions and 10,293 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,66 @@
+# Appiphony Lightning JS Beta
+
+### Release 0.1.2 — November 30, 2015
+
+#### jQuery
+* **Lookups**: Lookups now properly populate when selecting a result on Safari/Firefox/IE 10 <a href="https://github.com/appiphony/appiphony-lightning-js/issues/9">(GitHub Issue #9)</a>
+* **Lookups**: Updated single selected result markup to comply with 0.12.0 SLDS release
+* **Lookups**: Added an onChange option to run when a user selects a result
+* **Lookups**: Added an initialSelection option to set the selected result on load
+* **Lookups**: Added a setSelection method to programmatically set the selected result
+* **Lookups**: Added support for custom object icons and hiding icons from results markup <a href="https://github.com/appiphony/appiphony-lightning-js/issues/8">(GitHub Issue #8)</a>
+* **Modals**: Updated backdrop markup to comply with 0.12.0 SLDS release
+* **Tabs**: Updated template classes to comply with 0.12.0 SLDS release
+* **Tabs**: Updated docs to comply with 0.12.0 SLDS release
+
+#### Ember
+* **Lookups**: Added support for a custom icon URL and class
+* **Lookups**: Updated single selected result markup to comply with 0.12.0 SLDS release
+* **Lookups**: Added support to bind to a route's controller and fixed calling the search methods
+* **Lookups**: Added support for custom object icons and hiding icons from results markup <a href="https://github.com/appiphony/appiphony-lightning-js/issues/8">(GitHub Issue #8)</a>
+* **Modals**: Updated backdrop markup to comply with 0.12.0 SLDS release
+* **Modals**: Added a show method to the jQuery call
+* **Tabs**: Updated template classes to comply with 0.12.0 SLDS release
+* **Notifications**: Added support to customize classes that get applied to the slds-notify div
+
+---
+
+### Release 0.1.1 — November 12, 2015
+
+#### jQuery
+* **Datepickers**: Multiple datepickers on a page now properly close each other <a href="https://github.com/appiphony/appiphony-lightning-js/issues/5">(GitHub Issue #5)</a>
+* **Datepickers**: Added the ability to pass in an onChange callback function <a href="https://github.com/appiphony/appiphony-lightning-js/issues/4">(GitHub Issue #4)</a>
+* **Icon Group**: New plugin
+* **Modals**: Modals now consistently open when initialized on the body <a href="https://github.com/appiphony/appiphony-lightning-js/issues/1">(GitHub Issue #1)</a>
+* **Modals**: Set aria-hidden attribute to "true" by default
+* **Modals**: Programmatically dismissing/showing multiple modals now properly shows/hides the modal backdrop <a href="https://github.com/appiphony/appiphony-lightning-js/issues/2">(GitHub Issue #2)</a>
+* **Modals**: Added onShown and onDismissed callbacks
+* **Multi Selects**: Changed multiPicklist function to multiSelect
+* **Picklists**: Keyup no longer causes the UI to scroll
+* **Picklists**: No longer focusing on the first element when no value is selected
+* **Tabs**: Added support for left and right key navigation
+* **Tabs**: Updated aria-selected and tabindex attributes to match SLDS requirements
+* **Tooltips**: Fixed tooltip line height when triggered from inside a button
+
+#### Ember
+* **Checkboxes**: Added a checkbox component
+* **Datepickers**: Added a multi-range datepicker component
+* **Datepickers**: Custom month/day labels now properly work with datepickers
+* **Datepickers**: Clicking on the body properly closes a datepicker
+* **Modals**: Data attribute modal triggers now properly open/close modals
+* **Modals**: Added ability to customize modal body classes
+* **Modals**: Modals now properly work across different view states
+* **Modals**: Modals now properly close when triggered via a jQuery method
+* **Modals**: Updated the close button to use inverse class  
+* **Multi Selects**: Changed multi-picklist to multi-select
+* **Notifications**: Added support to designate UI elements to dismiss a notification
+* **Tabs**: Added support to specify the type of tabs class applied to the component
+* **Tabs**: Added support to bind the active tab to a property
+* **Tabs**: Added support for left and right key navigation
+* **Tabs**: Updated aria-selected and tabindex attributes to match SLDS requirements
+
+---
+
+### Release 0.1 — October 30, 2015
+* Initial release
+* Open sourced: <a href="https://github.com/appiphony/appiphony-lightning-js" target="_blank">https://github.com/appiphony/appiphony-lightning-js</a>
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Appiphony Lightning JS Beta
 ### Your JS Solution for the Lightning Design System
-Current release: 0.1.1  
+Current release: 0.1.2  
 See it in action here: <a href="http://aljs.appiphony.com" target="_blank">http://aljs.appiphony.com</a>
 
 ---

diff --git a/aljs-ember-app/templates/_gettingStartedJQuery.hbs b/aljs-ember-app/templates/_gettingStartedJQuery.hbs
@@ -41,7 +41,7 @@
                     <td data-label="Behavior">Specifies the directory containing SLDS's <code>assets</code> directory</td>
                     <td data-label="Accepted values">Any string</td>
                     <td data-label="Default value" class="slds-cell-shrink"><code>''</code></td>
-                    <td data-label="Comments" class="slds-cell-shrink">The default value represents the root of the site; Use '.' to select the same directory as the current page</td>
+                    <td data-label="Comments" class="slds-cell-shrink">The default value represents the root of the site; use '.' to select the same directory as the current page</td>
                 </tr>
                 <tr>
                     <th scope="row"><code>scoped</code></th>

diff --git a/aljs-ember-app/templates/_lookupsEmber.hbs b/aljs-ember-app/templates/_lookupsEmber.hbs
@@ -4,6 +4,42 @@
 {{#aljs-pre-container type="html"}}
 &#123;&#123;aljs-lookup data-select="single" data-scope="single" data-autocomplete="true" objectLabel="Account" objectPluralLabel="Accounts" items=accounts&#125;&#125;
 {{/aljs-pre-container}}
+        <p class="slds-m-top--medium">This table gives you a quick overview of SLDS-specific markup being read by the plugin.</p>
+        <div class="slds-scrollable--x">
+            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
+                <thead>
+                    <tr class="site-text-heading--label">
+                        <th scope="col">ALJS Markup</th>
+                        <th scope="col">Outcome</th>
+                        <th scope="col">Required</th>
+                        <th scope="col">Applied to</th>
+                        <th scope="col">Comments</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row"><code>data-select="</code><em>single/multi</em><code>"</code></th>
+                        <td data-label="Outcome">Sets the lookup to allow a single selection or multiple selections</td>
+                        <td data-label="Required" class="slds-cell-shrink">
+                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
+                            </svg><span class="slds-assistive-text">Required</span></td>
+                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-lookup</code></td>
+                        <td data-label="Comments"></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><code>data-scope="</code><em>single/multi</em><code>"</code></th>
+                        <td data-label="Outcome">Sets the lookup scope to a single object or multiple objects</td>
+                        <td data-label="Required" class="slds-cell-shrink">
+                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
+                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
+                            </svg><span class="slds-assistive-text">Required</span></td>
+                        <td data-label="Applied to" class="slds-cell-shrink"><code>.slds-lookup</code></td>
+                        <td data-label="Comments"><strong>Multi Scope</strong> is currently in development</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
         <h4 class="site-text-heading--large">Attribute Bindings</h4>
         <p class="slds-m-top--medium">This table details the available attribute bindings for this Ember component.</p>
         <div class="slds-scrollable--x">
@@ -19,13 +55,13 @@
                 <tbody>
                     <tr>
                         <th scope="row"><code>objectLabel</code></th>
-                        <td data-label="Purpose">The singular label of the object you are looking up.</td>
+                        <td data-label="Purpose">The singular label of the object you are looking up</td>
                         <td data-label="Values">A valid string</td>
                         <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
                     <tr>
                         <th scope="row"><code>objectPluralLabel</code></th>
-                        <td data-label="Purpose">The plural label of the object you are looking up.</td>
+                        <td data-label="Purpose">The plural label of the object you are looking up</td>
                         <td data-label="Values">A valid string</td>
                         <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
@@ -37,35 +73,45 @@
                     </tr>
                     <tr>
                         <th scope="row"><code>emptySearchTermQuery</code></th>
-                        <td data-label="Purpose">An optional function that runs <code>callback</code> passing an array of items when an empty search is performed.</td>
+                        <td data-label="Purpose">An optional function that runs <code>callback</code> passing an array of items when an empty search is performed</td>
                         <td data-label="Values"><code>function(callback) { callback([{id: 1, label: 'One'}]); })</code></td>
                         <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
                     <tr>
                         <th scope="row"><code>filledSearchTermQuery</code></th>
-                        <td data-label="Purpose">An optional function that runs <code>callback</code> passing an array of items when a filled search is performed.</td>
+                        <td data-label="Purpose">An optional function that runs <code>callback</code> passing an array of items when a filled search is performed</td>
                         <td data-label="Values"><code>function(searchTerm, callback) { callback([{id: 1, label: 'One'}]); })</code></td>
                         <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
-                </tbody>
-            </table>
-        </div>
-        <h4 class="site-text-heading--large">Events</h4>
-        <p>This table details the JavaScript events that trigger from user interaction.</p>
-        <div class="slds-scrollable--x">
-            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
-                <thead>
-                    <tr class="site-text-heading--label">
-                        <th scope="col">Event</th>
-                        <th scope="col">Element</th>
-                        <th scope="col">Trigger</th>
+                    <tr>
+                        <th scope="row"><code>objectIconUrl</code></th>
+                        <td data-label="Purpose">An optional string that represents a URL path to an image, if null no icon will be displayed./td>
+                        <td data-label="Values">Any valid URL to any image with a transparent background</td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
-                </thead>
-                <tbody>
                     <tr>
-                        <th scope="row"><code>selected.aljs.datepicker</code></th>
-                        <td data-label="Element">The <code>&lt;input&gt;</code> the datepicker is attached to</td>
-                        <td data-label="Trigger">A user selects a date either by clicking a date on the datepicker or entering a valid date in the text input</td>
+                        <th scope="row"><code>isObjectIconCustom</code></th>
+                        <td data-label="Purpose">Determines whether the supplied <code>objectIconUrl</code> is a custom image or from SLDS. To specify <code>false</code>, just omit this attribute</td>
+                        <td data-label="Values"><code>"true"</code></td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><code>objectIconClass</code></th>
+                        <td data-label="Purpose">An optional string that determines classes applied to the object icon container</td>
+                        <td data-label="Values">Any valid string that matches class name(s)</td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><code>selectedResult</code></th>
+                        <td data-label="Purpose">When the Lookup's scope is single, an object that represents the currently selected lookup result</td>
+                        <td data-label="Values">A result object</td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
+                    </tr>
+                    <tr>
+                        <th scope="row"><code>selectedResults</code></th>
+                        <td data-label="Purpose">When the Lookup's scope is multi, an array of objects that represent the currently selected lookup result</td>
+                        <td data-label="Values">An array of result objects</td>
+                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                     </tr>
                 </tbody>
             </table>