Merge pull request #178 from paulcpederson/master

Refactor JavaScript

CHANGELOG.md

@@ -1,9 +1,14 @@
-## Unreleased
+## 0.3.0
+
+### Improvements
+- Removed ~ 230 LOC from calcite-web.js
 
 ### Fixed
 - Fixed interpolation of variables in the `keyframes` mixin
+- Fixed modals always closing on any click if open
+- Document modals properly
 
-### Modifide
+### Modified
 - Increase large breakpoint to 1450px
 - add `extra-large-leader-n`
 	- trailer
@@ -13,6 +18,9 @@
 - Remove `container-max` and `container-min`
 - `extra-large-hide` and `-only`
 
+### Removed
+- remove carousel pattern (will be its own project)
+
 ## 0.2.3
 
 ### Modified

docs/source/patterns/_modals.md

@@ -1,3 +1,7 @@
 ## Modals
 
-Modals are meant to "take over" the screen and focus users attention on a dialog which presents the user with an opportunity to add, modify or create content. A modal should always be centered both vertically and horizontally within the browser window. When a modal is opened, the interface darkens and disables all other user interface elements in order to force a user to take an action required by their workflow.
+Modals are meant to "take over" the screen and focus users attention on a dialog which presents the user with an opportunity to add, modify or create content. A modal should always be centered both vertically and horizontally within the browser window. When a modal is opened, the interface darkens and disables all other user interface elements in order to force a user to take an action required by their workflow. Two modals can't be open at once.
+
+To create a link or button that opens a modal, you must add a `js-modal-toggle` class to the element, along with a `data-modal` attribute specifying the name of the modal that should open. The modal should also get a `data-modal` attribute with the same name.
+
+Elements with the `js-modal-toggle` that are inside a modal don't need the `data-modal` attribute as they will just close the modal they are in.

docs/source/patterns/sample-code/_modals.html

@@ -9,9 +9,9 @@ <h3>Modal!</h3>
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-    <button class="btn right">okay</button>
-    <button class="btn-transparent right">cancel</button>
+    <button class="btn right js-modal-toggle">okay</button>
+    <button class="btn-transparent right js-modal-toggle">cancel</button>
   </div>
 </div>
 
-<a class="js-modal-toggle btn" data-modal="foo" href="#">Show Modal</a>
+<a class="js-modal-toggle btn" href="#" data-modal="foo">Show Modal</a>

docs/source/table_of_contents.yml

@@ -515,10 +515,6 @@ patterns:
           id: '93e95ff8-0ad4-478b-b1c4-d87a34486b05'
           link: accordions
           modifiers: true
-        - title: 'Carousels'
-          id: 'c5ffc172-f526-4952-a18f-9f06a7d9724c'
-          link: carousel
-          modifiers: true
         - title: 'Drawers'
           id: 'e538b8cd-ce5e-4f86-823a-ebb5ec041039'
           link: drawers