Fix: disabled dropdown buttons should not open

Fixes #5370

diff --git a/doc/includes/dropdown/examples_dropdown_advanced.html b/doc/includes/dropdown/examples_dropdown_advanced.html
new file mode 100644 (file)
index 0000000..f224084
--- /dev/null
+++ b/doc/includes/dropdown/examples_dropdown_advanced.html
@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
+<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    <button data-dropdown="drop-advanced" aria-controls="drop-advanced", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
+    <ul id="drop-advanced" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">Yet another</a></li>
+    </ul>
+  </div>
+</div>

diff --git a/doc/includes/dropdown/examples_dropdown_disabled.html b/doc/includes/dropdown/examples_dropdown_disabled.html
new file mode 100644 (file)
index 0000000..75237d7
--- /dev/null
+++ b/doc/includes/dropdown/examples_dropdown_disabled.html
@@ -0,0 +1,25 @@
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</button><br>
+<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">But they don't show up!</a></li>
+</ul>
+
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    <button data-dropdown="drop-disabled" aria-controls="drop-disabled", aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</button><br>
+    <ul id="drop-disabled" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
+      <li><a href="#">This is a link</a></li>
+      <li><a href="#">This is another</a></li>
+      <li><a href="#">But they don't show up!</a></li>
+    </ul>
+  </div>
+</div>

diff --git a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html
index f6c2c3b249ab32e7e228927ff15dec630f1da884..8235af7472ff40d864c3dbd06d4f0961edabd3a7 100644 (file)
--- a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html
+++ b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html
@@ -32,3 +32,10 @@
   <li><a href="#">This is another</a></li>
   <li><a href="#">Yet another</a></li>
 </ul>
+
+<a data-dropdown="drop6" aria-controls="drop6" aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</a><br>
+<ul id="drop6" data-dropdown-content class="f-dropdown" aria-hidden="true" tabindex="-1" >
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>

diff --git a/doc/pages/components/dropdown_buttons.html b/doc/pages/components/dropdown_buttons.html
index 37f338821fe4beb388970452d99bb5c7ed2ee53e..504ada3841d4614853a1b4e74bb9decc9059c2f8 100644 (file)
--- a/doc/pages/components/dropdown_buttons.html
+++ b/doc/pages/components/dropdown_buttons.html
@@ -33,32 +33,13 @@ You can create a dropdown using minimal markup.
 
 <h2>Advanced</h2>
 
-Additional classes can be added to your dropdown buttons to change their appearance.
+Additional classes can be added to your dropdown buttons to change their appearance and behavior.
 
-<div class="row">
-  <div class="large-6 columns">
-    <h4>HTML</h4>
-{{#markdown}}
-```html
-<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
-<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
-  <li><a href="#">This is a link</a></li>
-  <li><a href="#">This is another</a></li>
-  <li><a href="#">Yet another</a></li>
-</ul>
-```
-{{/markdown}}
-  </div>
-  <div class="large-6 columns">
-    <h4>Rendered HTML</h4>
-    <button data-dropdown="dropE" aria-controls="dropE", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
-    <ul id="dropE" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-  </div>
-</div>
+{{> examples_dropdown_advanced}}
+
+Disabled dropdown buttons will not open when tapped:
+
+{{> examples_dropdown_disabled}}
 
 ***
 

diff --git a/js/foundation/foundation.dropdown.js b/js/foundation/foundation.dropdown.js
index 09cbe3bf1385e52ac43cb2b0465ebbb6914fa784..a74c39dbcc316560ef06f4abe5054e85b08f655c 100644 (file)
--- a/js/foundation/foundation.dropdown.js
+++ b/js/foundation/foundation.dropdown.js
@@ -8,6 +8,7 @@
 
     settings : {
       active_class: 'open',
+      disabled_class: 'disabled',
       mega_class: 'mega',
       align: 'bottom',
       is_hover: false,
@@ -147,6 +148,9 @@
     },
 
     toggle : function (target) {
+      if (target.hasClass(this.settings.disabled_class)) {
+        return;
+      }
       var dropdown = this.S('#' + target.data(this.data_attr()));
       if (dropdown.length === 0) {
         // No dropdown found, not continuing

diff --git a/spec/dropdown/basic.html b/spec/dropdown/basic.html
index f112ace1a4a832f3a74eeff5ffd2bdb51deee9df..015181114b377355cb320b1366bd2662c709c889 100644 (file)
--- a/spec/dropdown/basic.html
+++ b/spec/dropdown/basic.html
@@ -13,4 +13,8 @@
 </a>
 <div id="drop3" data-dropdown-content class="f-dropdown content">
   <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
-</div>
\ No newline at end of file
+</div>
+<a id="drop4link" href="#" class="disabled" data-dropdown="drop4">Disabled Dropdown</a>
+<div id="drop4" data-dropdown-content class="f-dropdown content">
+  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
+</div>

diff --git a/spec/dropdown/dropdown.js b/spec/dropdown/dropdown.js
index 03b7fc3002432f9c8d303011afe4dbe43a33461d..ab4d39ea3ae0118c1c367ad89e4c21ed9b2fc9a4 100644 (file)
--- a/spec/dropdown/dropdown.js
+++ b/spec/dropdown/dropdown.js
@@ -23,6 +23,7 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(false);
       expect($('#drop2').hasClass('open')).toBe(false);
       expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
 
     it('displays the dropdown on click', function() {
@@ -33,6 +34,7 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(true);
       expect($('#drop2').hasClass('open')).toBe(false);
       expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
 
     it('displays the content dropdown on click', function() {
@@ -43,6 +45,7 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(false);
       expect($('#drop2').hasClass('open')).toBe(true);
       expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
 
     it('closes an open dropdown when another is clicked', function() {
@@ -54,6 +57,7 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(false);
       expect($('#drop2').hasClass('open')).toBe(true);
       expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
 
     it('closes an open dropdown when the document is clicked elsewhere', function() {
@@ -65,6 +69,7 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(false);
       expect($('#drop2').hasClass('open')).toBe(false);
       expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
 
     it('displays a dropdown even if the dropdown button has deeply nested content', function() {
@@ -75,6 +80,18 @@ describe('dropdown:', function() {
       expect($('#drop1').hasClass('open')).toBe(false);
       expect($('#drop2').hasClass('open')).toBe(false);
       expect($('#drop3').hasClass('open')).toBe(true);
+      expect($('#drop4').hasClass('open')).toBe(false);
+    });
+
+    it('does not display a disabled dropdown', function() {
+      $(document).foundation();
+
+      $('#drop4link').click();
+
+      expect($('#drop1').hasClass('open')).toBe(false);
+      expect($('#drop2').hasClass('open')).toBe(false);
+      expect($('#drop3').hasClass('open')).toBe(false);
+      expect($('#drop4').hasClass('open')).toBe(false);
     });
  });
 });