3.0.2

- Added support for a single checkbox rather than a group of checkboxes.
rooseveltframework · Jun 15, 2023 · 0c976ab · 0c976ab
1 parent c395884
commit 0c976ab
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - Put your changes here...
 
+## 3.0.2
+
+- Added support for a single checkbox rather than a group of checkboxes.
+
 ## 3.0.1
 
 - Fixed alignment issue.

diff --git a/README.md b/README.md
@@ -111,7 +111,21 @@ Driven by flexbox to intelligently align the buttons based on how many are in th
 ## Checkboxes and radio buttons
 
 Checkboxes and radio buttons need to follow the following markup structure:
-### Checkboxes
+
+### A single checkbox
+
+Not too different than other inputs:
+
+```html
+<form class="semanticForms">
+  <dl>
+    <dt><label for="checkbox">Single checkbox</label></dt>
+    <dd><input id="checkbox" name="checkbox" type="checkbox"></dd>
+  </dl>
+</form>
+```
+
+### Checkbox group
 
 ```html
 <form class="semanticForms">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "semantic-forms",
   "description": "Semantic Forms",
   "author": "Eric Newport <[email protected]>",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "files": [
     "semanticForms.css",
     "semanticForms.js",

diff --git a/semanticForms.css b/semanticForms.css
@@ -202,6 +202,19 @@
   transform-origin: left bottom;
   transform: translate(0, 38px) scale(1.5);
 }
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox {
+  width: 292px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: left;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox label {
+  margin-top: 10px;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox input {
+  margin: 10px 10px 0 0;
+}
 .semanticForms .floatLabelForm ::placeholder {
   opacity: 0;
   transition: inherit;

diff --git a/semanticForms.html b/semanticForms.html
@@ -71,6 +71,9 @@ <h1>Semantic Forms</h1>
                 </ul>
               </dd>
 
+              <dt><label for="checkbox">Single checkbox</label></dt>
+              <dd><input id="checkbox" name="checkbox" type="checkbox"></dd>
+
               <dt><label data-for="radios">Radios:</label></dt>
               <dd class="radios">
                 <ul id="radios">
@@ -180,6 +183,9 @@ <h1>Semantic Forms</h1>
                 </ul>
               </dd>
 
+              <dt><label for="low-flow-checkbox">Single checkbox</label></dt>
+              <dd><input id="low-flow-checkbox" name="low-flow-checkbox" type="checkbox"></dd>
+
               <dt><label data-for="low-flow-radios">Radios:</label></dt>
               <dd class="radios">
                 <ul id="low-flow-radios">

diff --git a/semanticForms.js b/semanticForms.js
@@ -49,7 +49,7 @@ window.semanticForms = function () {
               if (!dl.classList.contains('floatLabelForm')) {
                 dl.classList.add('floatLabelForm')
               }
-              if (type === 'checkbox' || type === 'radio') {
+              if (input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')) {
                 label = document.querySelector('label[data-for=' + input.parentNode.parentNode.id + ']')
               } else {
                 label = document.querySelector('label[for=' + input.id + ']')
@@ -63,6 +63,11 @@ window.semanticForms = function () {
                 if (dl.firstChild.nodeName !== 'LABEL') {
                   newLabel = document.createElement('label')
                   newLabel.className = 'floatLabelFormAnimatedLabel'
+                  if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {
+                    newLabel.setAttribute('for', input.id)
+                    input.parentNode.classList.add('singleCheckbox')
+                    newLabel.className = ''
+                  }
                   newLabel.innerHTML = labelHTML
                   dl.insertBefore(newLabel, dl.firstChild)
                 }

diff --git a/semanticFormsNoImages.css b/semanticFormsNoImages.css
@@ -202,6 +202,19 @@
   transform-origin: left bottom;
   transform: translate(0, 38px) scale(1.5);
 }
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox {
+  width: 292px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: left;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox label {
+  margin-top: 10px;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox input {
+  margin: 10px 10px 0 0;
+}
 .semanticForms .floatLabelForm ::placeholder {
   opacity: 0;
   transition: inherit;

diff --git a/semanticFormsNoImages.less b/semanticFormsNoImages.less
@@ -247,6 +247,22 @@
       transform: translate(0, 38px) scale(1.5);
     }
 
+    dd:not(.checkboxes):not(.radios).singleCheckbox {
+      width: 292px;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: flex-start;
+      justify-content: left;
+
+      label {
+        margin-top: 10px;
+      }
+
+      input {
+        margin: 10px 10px 0 0;
+      }
+    }
+
     // hide placeholder content until the input is focused
     ::placeholder {
       opacity: 0;