Support for disabled list items

zoltantothcom · Jul 23, 2022 · 639b5af · 639b5af
1 parent 38921df
commit 639b5af
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ---
 
+## [2.3.0] - 2022-07-23
+
+### Added
+
+1. Support for disabled list items
+
 ## [2.2.0] - 2019-04-13
 
 ### Added

diff --git a/dist/index.html b/dist/index.html
@@ -15,7 +15,7 @@
           <option value="crimson">Crimson</option>
         </optgroup>
         <optgroup label="Green colors"> 
-          <option value="chartreuse">Chartreuse</option>
+          <option value="chartreuse" disabled>Chartreuse</option>
           <option value="seagreen">SeaGreen</option>
           <option value="olive">Olive</option>
         </optgroup>

diff --git a/dist/vanilla-js-dropdown.css b/dist/vanilla-js-dropdown.css
@@ -60,6 +60,11 @@
 .js-Dropdown-list li.is-selected {
   background-color: #ffdfb6;
 }
+.js-Dropdown-list li.is-disabled {
+  background-color: #f5f5f5;
+  color: #a5a5a5;
+  cursor: not-allowed;
+}
 .js-Dropdown-optgroup {
   border-bottom: 1px solid #a5a5a5;
   color: #a5a5a5;

diff --git a/dist/vanilla-js-dropdown.min.js b/dist/vanilla-js-dropdown.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -55,7 +55,7 @@ <h2>Demo</h2>
                     <option value="olive">Olive</option>
                 </optgroup>
                 <optgroup label="Blue colors">
-                    <option value="aqua">Aqua</option>
+                    <option value="aqua" disabled>Aqua</option>
                     <option value="steelblue">SteelBlue</option>
                     <option value="royalblue">RoyalBlue</option>
                 </optgroup>
@@ -101,7 +101,7 @@ <h2>Installation</h2>
         &lt;option value="olive">Olive&lt;/option>
     &lt;/optgroup>
     &lt;optgroup label="Blue colors">
-        &lt;option value="aqua">Aqua&lt;/option>
+        &lt;option value="aqua" disabled>Aqua&lt;/option>
         &lt;option value="steelblue">SteelBlue&lt;/option>
         &lt;option value="royalblue">RoyalBlue&lt;/option>
     &lt;/optgroup>

diff --git a/docs/javascript/vanilla-js-dropdown.min.js b/docs/javascript/vanilla-js-dropdown.min.js
diff --git a/docs/styles/vanilla-js-dropdown.css b/docs/styles/vanilla-js-dropdown.css
@@ -60,6 +60,11 @@
 .js-Dropdown-list li.is-selected {
   background-color: #ffdfb6;
 }
+.js-Dropdown-list li.is-disabled {
+  background-color: #f5f5f5;
+  color: #a5a5a5;
+  cursor: not-allowed;
+}
 .js-Dropdown-optgroup {
   border-bottom: 1px solid #a5a5a5;
   color: #a5a5a5;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-js-dropdown",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Vanilla JavaScript Dropdown - a tiny (~700 bytes gzipped) select tag replacement with optgroups support.",
   "main": "index.js",
   "scripts": {

diff --git a/src/index.pug b/src/index.pug
@@ -16,7 +16,7 @@ html(lang="en")
                     option(value="salmon") Salmon
                     option(value="crimson") Crimson
                 optgroup(label="Green colors") 
-                    option(value="chartreuse") Chartreuse
+                    option(value="chartreuse" disabled) Chartreuse
                     option(value="seagreen") SeaGreen
                     option(value="olive") Olive
                 optgroup(label="Blue colors") 

diff --git a/src/styles/vanilla-js-dropdown.less b/src/styles/vanilla-js-dropdown.less
@@ -1,6 +1,7 @@
 @js-dropdown-back: #ffffff;
 @js-dropdown-border: #a5a5a5;
 @js-dropdown-selected: #ffdfb6;
+@js-dropdown-disabled: #f5f5f5;
 
 .js-Dropdown {
   display: inline-block;
@@ -69,6 +70,12 @@
     &.is-selected {
       background-color: @js-dropdown-selected;
     }
+
+    &.is-disabled {
+      background-color: @js-dropdown-disabled;
+      color: @js-dropdown-border;
+      cursor: not-allowed;
+    }
   }
 }