semantic-forms 5.1.11 → 5.1.12

package/docs/statics/pages/usage.html

@@ -106,6 +106,32 @@
         </dl>
       </form>
 
+      <h5>Add inline buttons</h5>
+
+      <p>Include a button or input with the type "submit" in the <code><!--#<dd>--></code> element to place it next to the input:</p>
+
+      <pre><code class='language-html' lang='html'><escape>
+<form class="semanticForms" method="post">
+  <dl>
+    <dt><label for="email">Email address</label></dt>
+    <dd>
+      <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+      <button type="submit">Sign up</button>
+    </dd>
+  </dl>
+</form>
+</escape></code></pre>
+      
+      <form class="semanticForms" method="post">
+        <dl>
+          <dt><label for="email">Email address</label></dt>
+          <dd>
+            <input id="email" name="email" type="email" placeholder="Enter an email address" autocomplete="off">
+            <button type="submit">Sign up!</button>
+          </dd>
+        </dl>
+      </form>
+
       <h5 id="custominputfields">Customizing input fields</h5>
 
       <p>By default, input fields will display an X icon to clear the text and password fields will also display a show/hide toggle for displaying the password in plain text. You can customize this behavior as follows:</p>
@@ -121,6 +147,13 @@
             <li>Note that checkboxes and radios should have a <code>title</code> attribute on the label instead of the inputs.</li>
           </ul>
         </li>
+        <li><p>Allow fixed-width inputs to grow/shrink to their longest content by applying a <code>data-max-content</code> attribute to the input.</p></li>
+        <li>
+          <p>Create a one-line text input that grows in height by applying a <code>data-auto-grow</code> attribute to a <code>textarea</code> or <code>input</code> (with type "text") element.</p>
+          <ul>
+            <li>Note that pressing <kbd>Enter</kbd> with this attribute will attempt to submit the form. Use <kbd>Shift + Enter</kbd> to add new lines.</li>
+          </ul>
+        </li>
       </ul>
 
       <p>You can also disable float labels on a per-field basis with the <code>no-float-label</code> class:</p>

package/package.json

@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/semantic-forms/graphs/contributors"
     }
   ],
-  "version": "5.1.11",
+  "version": "5.1.12",
   "files": [
     "dist",
     "semanticForms.scss",

package/semanticForms.js

@@ -7,7 +7,7 @@ const semanticForms = () => {
 
   const passwordShow = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 12s4-8 11-8 11 8 11 8"/><path d="m1 12s4 8 11 8 11-8 11-8"/><circle cx="12" cy="12" r="3"/></g></svg>'
   const passwordHide = '<svg fill="none" height="256" viewBox="0 0 24 24" width="256" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2 20 20"/><path d="m6.71277 6.7226c-3.04798 2.07267-4.71277 5.2774-4.71277 5.2774s3.63636 7 10 7c2.0503 0 3.8174-.7266 5.2711-1.7116m-6.2711-12.23018c.3254-.03809.6588-.05822 1-.05822 6.3636 0 10 7 10 7s-.6918 1.3317-2 2.8335"/><path d="m14 14.2362c-.5308.475-1.2316.7639-2 .7639-1.6569 0-3-1.3431-3-3 0-.8237.33193-1.5698.86932-2.11192"/></g></svg>'
-  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;margin-top:1px;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
+  const helpTextIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" version="1.1" style="overflow:visible;"><rect width="16" height="16" fill="none"/><path fill="currentColor" d="M8,10.5c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1c0.552,0,1-0.448,1-1C9,10.948,8.552,10.5,8,10.5z M8,0 C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14 s-3.109-0.624-4.243-1.757C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757 C13.376,4.891,14,6.397,14,8C14,9.603,13.376,11.109,12.243,12.243z M7.927,3.755c-2.248,0-2.76,1.695-2.802,2.906h1.571 c0.028-0.256,0.101-1.418,1.221-1.418c0.672,0,1.206,0.406,1.206,1.175c0,0.695-0.724,1.155-1.303,1.711 C7.241,8.685,7.168,9.325,7.168,9.824V10c0.146,0,1.615,0,1.615,0V9.824c0-1.256,1.967-1.594,1.967-3.541 C10.75,5.059,9.874,3.755,7.927,3.755z"/></svg>'
 
   const nodeNameLookup = ['TEXTAREA', 'SELECT']
   const inputTypeLookup = ['checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'image', 'month', 'number', 'password', 'radio', 'range', 'search', 'tel', 'text', 'time', 'url', 'week']
@@ -21,7 +21,7 @@ const semanticForms = () => {
 
     // update each input in the semantic form
     const inputs = Array.from(form.querySelectorAll('input, textarea, select'))
-    for (const input of inputs) {
+    for (let input of inputs) {
       // ignore input if it has previously been formatted
       if (input.classList.contains('semanticform') || !input.id) continue
 
@@ -45,7 +45,6 @@ const semanticForms = () => {
         input.classList.add('semanticform')
 
         // #region create labels
-
         if (type === 'checkbox' || type === 'radio') {
           // recursively find <dd> element
           let dd = input.parentNode
@@ -122,7 +121,31 @@ const semanticForms = () => {
         }
         // #endregion
 
-        // standard inputs
+        // #region standard inputs
+        // check for auto-grow attribute on textareas
+        if (input.getAttribute('data-auto-grow') !== null) {
+          // progressively enhance inputs into textareas
+          if (input.nodeName === 'INPUT' && input.type === 'text') {
+            const newInput = document.createElement('textarea')
+            newInput.id = input.id
+            newInput.class = input.class
+            newInput.innerText = input.value
+            newInput.setAttribute('data-auto-grow', '')
+            input.replaceWith(newInput)
+            input = newInput
+
+          }
+
+          if (input.nodeName === 'TEXTAREA') {
+            // when pressing enter while this input is focused, we want to submit
+            input.addEventListener('keypress', (e) => {
+              if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
+              e.preventDefault()
+              form.requestSubmit()
+            })
+          }
+        }
+
         if (type !== 'checkbox' && type !== 'radio') {
           if (!input.getAttribute('placeholder')) input.setAttribute('placeholder', ' ')
 
@@ -139,7 +162,7 @@ const semanticForms = () => {
             continue
           }
 
-          // #region clear button
+          // #region input clear button
           if (input.nodeName !== 'SELECT' && type !== 'range') {
             const clearBtn = document.createElement('button')
             clearBtn.type = 'button'
@@ -171,6 +194,22 @@ const semanticForms = () => {
             dd.classList.remove(match)
             div.classList.add(match)
           }
+          
+          // check for max-content attribute
+          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing 
+          if (input.getAttribute('data-max-content') !== null) {
+            if (!('fieldSizing' in document.createElement('input').style)) {
+              const adjustWidth = () => {
+                const value = input.value !== '' ? input.value : input.placeholder
+                const width = value.length * 8 + 40
+                input.style.width = width + 'px'
+                input.style.maxWidth = '100%'
+                div.style.width = width + 'px'
+              }
+              adjustWidth()
+              input.addEventListener('input', adjustWidth)
+            }
+          }
 
           div.append(dt, dd)
           dl.append(div)
@@ -178,6 +217,7 @@ const semanticForms = () => {
           // determine visibility of newly created <div>
           if (dt.style.display === 'none' && dd.style.display === 'none') div.style.display = 'none'
         }
+        // #endregion
 
         // handle file input clear btn, cannot be handled with CSS
         if (type === 'file') {
@@ -301,6 +341,22 @@ const semanticForms = () => {
             input.dispatchEvent(new Event('input', { bubbles: true }))
           }
 
+          // progressively enhance textarea for Firefox and Safari
+          // this may be removed once fully supported in Firefox and Safari: https://caniuse.com/wf-field-sizing 
+          if (input.getAttribute('data-auto-grow') !== null) {
+            const adjustHeight = () => {
+              if (input.value.length) {
+                input.style.height = input.scrollHeight + 'px'
+              } else {
+                input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+              }
+            }
+
+            // set initial height to semantic-forms CSS variable
+            input.style.height = window.getComputedStyle(form).getPropertyValue('--semanticFormsInputHeight')
+            input.addEventListener('input', adjustHeight)
+          }
+
           // shifts the clear button to the right if a scrollbar is present
           const shiftClearBtn = () => {
             const clearBtn = input.parentElement?.querySelector('button.clear')

package/semanticForms.scss

@@ -96,6 +96,10 @@ table.semanticForms.light {
   container-type: inline-size;
   container-name: semanticForm;
 
+  @supports (interpolate-size: allow-keywords) { // https://caniuse.com/wf-interpolate-size
+    interpolate-size: allow-keywords;
+  }
+
   // due to the specificity of some of these rules, [hidden] won't actually hide things, so we're forcing the issue
   [hidden] {
     display: none !important;
@@ -254,6 +258,10 @@ table.semanticForms.light {
     line-height: 1.5;
     width: 100%;
     min-height: 38px;
+
+    &[data-auto-grow] {
+      field-sizing: content;
+    }
   }
 
   input[type="search"] {
@@ -439,7 +447,7 @@ table.semanticForms.light {
     }
   }
 
-  // #region summary
+  // #region details
   details {
     box-sizing: border-box; // ensure sizings match across browsers
     position: relative;
@@ -452,14 +460,26 @@ table.semanticForms.light {
     padding: 20px 10px 10px 10px;
     margin-bottom: 15px;
     min-height: calc(var(--semanticFormsFontSize) + 20px);
-
+    
     &::details-content {
       visibility: hidden;
       opacity: 0;
       transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
     }
+    
+    @supports (interpolate-size: allow-keywords) { // https://caniuse.com/wf-interpolate-size
+      transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms, height 250ms;
+
+      &::details-content {
+        height: 0;
+        overflow: hidden;
+        transition: height 250ms, content-visibility 250ms;
+        transition-behavior: allow-discrete;
+      }
+    }
 
     summary {
+      cursor: pointer;
       margin: 0;
       line-height: 1;
       position: absolute;
@@ -486,20 +506,24 @@ table.semanticForms.light {
         transition: 250ms transform ease;
       }
     }
-  }
 
-  details[open] {
-    padding-top: 35px; // TODO: remove this when animated detail label is reintroduced
+    &[open] {
+      &::details-content {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
+      }
 
-    &::details-content {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
-    }
+      @supports (interpolate-size: allow-keywords) {
+        &::details-content {
+          height: auto;
+        }
+      }
 
-    summary {
-      &::after {
-        transform: rotate(90deg);
+      summary {
+        &::before {
+          transform: rotate(90deg);
+        }
       }
     }
   }
@@ -507,10 +531,6 @@ table.semanticForms.light {
   details[open], summary {
     margin-bottom: 10px;
   }
-
-  summary {
-    cursor: pointer;
-  }
   // #endregion
 
   // update for scrollbars
@@ -565,6 +585,42 @@ table.semanticForms.light {
         &:not(.singleCheckbox, .singleRadio) {
           display: flex;
           flex-direction: column;
+
+          // unless there is a button present, which will be placed beside the input
+          &:has(button:not(.clear, .show), input[type="submit"]:not(.clear, .show)) {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+
+            button.clear, button.show {
+              right: 36%; // adjust clear/show button to grid
+            }
+
+            input:not([type="submit"]), select, textarea {
+              grid-row: 1 / 2;
+              grid-column: 1 / 2;
+            }
+
+            button:not(.clear, .show),
+            input[type="submit"]:not(.clear, .show) {
+              grid-row: 1 / 2;
+              grid-column: 2 / 3;
+              width: 100%;
+              max-width: 100%;
+              padding: 10px; // reduce default padding to allow more button text to show
+              margin-top: var(--semanticFormsInputTopMargin);
+              height: var(--semanticFormsInputHeight);
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              display: inline-block;
+            }
+
+            // TODO: handle help text as well (will need to be grid-columns: 0 2 or whatever it is)
+            label:nth-of-type(2) {
+              grid-row: 2 / 3;
+              grid-column: 1 / -1;
+            }
+          }
         }
 
         &.singleCheckbox,
@@ -581,7 +637,7 @@ table.semanticForms.light {
           // single checkbox subtext
           label:nth-of-type(2) {
             grid-column: 1 / -1;
-            padding-left: 20px;
+            padding: 0 10px;
             font-size: small;
             color: var(--semanticFormsTextColor);
           }
@@ -656,6 +712,8 @@ table.semanticForms.light {
     }
 
     span.help {
+      display: grid;
+      place-items: center;
       cursor: help;
       pointer-events: auto;
 
@@ -682,16 +740,8 @@ table.semanticForms.light {
           &:focus:not([type=checkbox], [type=radio], .no-float-label) ~ label:first-of-type,
           &:not(:placeholder-shown):not(.no-float-label):not([type=checkbox]):not([type=radio]) ~ label:first-of-type {
             color: var(--semanticFormsTextColor) !important;
-            // TODO: finish this work on making the help icon responsive
-            // width: 100%;
-            // width: calc(100% + 20px);
             transform: translateY(-150%) scale(0.7);
-
-            // span.required,
-            // span.help {
-            //   position: static;
-            //   right: auto;
-            // }
+            width: 100%;
           }
         }
 
@@ -732,7 +782,7 @@ table.semanticForms.light {
         // subtext
         label:nth-of-type(2) {
           margin-top: -5px;
-          padding-left: 20px;
+          padding: 0 10px;
           font-size: small;
           color: var(--semanticFormsTextColor);
         }
@@ -795,30 +845,15 @@ table.semanticForms.light {
           align-items: center;
           gap: 5px;
 
-          // TODO: same as below
-          // &:has(span.help) {
-          //   width: 80%;
-          //   padding-right: 20px;
-          // }
-
-          // &:has(span.required) {
-          //   width: 80%;
-          //   padding-right: 10px;
-          // }
-
           span.required {
-            // TODO: this places the required asterisk too far to the right when the float label is shrunk
-            // position: absolute;
-            // right: 0;
             cursor: help;
             pointer-events: auto;
             color: red;
           }
 
           span.help {
-            // TODO: this places the help icon too far to the right when the float label is shrunk
-            // position: absolute;
-            // right: 0;
+            display: grid;
+            place-items: center;
             cursor: help;
             pointer-events: auto;
 
@@ -826,16 +861,6 @@ table.semanticForms.light {
               width: 80%;
             }
           }
-
-          // // TODO: cover the case where an input is required AND has help text
-          // &:has(span.required, span.help) {
-          //   width: 80%;
-          //   padding-right: 30px;
-
-          //   span.required {
-          //     right: 18px;
-          //   }
-          // }
         }
       }
 
@@ -844,6 +869,9 @@ table.semanticForms.light {
         position: relative;
 
         label {
+          display: flex;
+          align-items: center;
+          gap: 5px;
           z-index: 2; // ensure the hoverable icon is interactable
           user-select: auto;
           color: var(--semanticFormsTextColor);
@@ -857,16 +885,11 @@ table.semanticForms.light {
           overflow: hidden;
           text-overflow: ellipsis;
           min-width: 0;
-          width: calc(100% + 20px);
-
-          // TODO: remove this? // &:has(span.help) {
-            // width: 100%;
-            // padding-right: 20px;
-          // }
+          width: 100%;
 
           span.help {
-            // TODO: remove this? // position: absolute;
-            // right: 0;
+            display: grid;
+            place-items: center;
             cursor: help;
             pointer-events: auto;
           }
@@ -881,14 +904,28 @@ table.semanticForms.light {
           }
 
           label > span {
-            // TODO: remove this? // position: absolute;
-            // right: 0;
             margin-left: 5px;
             cursor: help;
             pointer-events: auto;
             color: red;
           }
+        }
+      }
 
+      // data-max-content CSS
+      &:has([data-max-content]) {
+        max-width: max-content;
+        min-width: 150px;
+
+        dd {
+          width: max-content;
+
+          input, select {
+            // this is not currently supported in FireFox or Safari, and is progressively enhanced with JS
+            field-sizing: content; 
+            min-width: 150px;
+            max-width: max-content;
+          }
         }
       }
     }
@@ -1196,71 +1233,71 @@ table.semanticForms.light {
 
     // #region low flow form
     &.lowFlow {
-        gap: 5px;
+      gap: 5px;
 
-        dl {
-          grid-auto-flow: dense;
-        }
+      dl {
+        grid-auto-flow: dense;
+      }
 
-        // 1, 4, 7, ...
-        & > dt:nth-of-type(2n + 1),
-        & > dd:nth-of-type(2n + 1) {
-          grid-column: 1;
-        }
+      // 1, 4, 7, ...
+      & > dt:nth-of-type(2n + 1),
+      & > dd:nth-of-type(2n + 1) {
+        grid-column: 1;
+      }
 
-        // 2, 5, 8, ...
-        & > dt:nth-of-type(2n + 2),
-        & > dd:nth-of-type(2n + 2) {
-          grid-column: 2;
-        }
+      // 2, 5, 8, ...
+      & > dt:nth-of-type(2n + 2),
+      & > dd:nth-of-type(2n + 2) {
+        grid-column: 2;
+      }
 
-        dt {
-           min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+      dt {
+          min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
 
-          // add required asterisk
-          &:has(+ dd input:required) {
-            label::after {
-              content: ' *';
-              color: red;
-            }
+        // add required asterisk
+        &:has(+ dd input:required) {
+          label::after {
+            content: ' *';
+            color: red;
           }
         }
+      }
 
 
-        dd {
-          margin-bottom: 10px;
-          min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
+      dd {
+        margin-bottom: 10px;
+        min-width: var(--semanticFormsInputMinWidth) !important; /* this matches the max-width of js-enabled inputs */
 
-          // nudge single checkboxes to match checkbox groups
-          &:not(.checkboxes) {
-            input[type=checkbox] {
-              margin-left: 10px;
-            }
+        // nudge single checkboxes to match checkbox groups
+        &:not(.checkboxes) {
+          input[type=checkbox] {
+            margin-left: 10px;
           }
+        }
 
-          // remove "x" padding
-          input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
-          select,
-          textarea {
-            padding-right: 6px;
-          }
+        // remove "x" padding
+        input:not([type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range]),
+        select,
+        textarea {
+          padding-right: 6px;
+        }
 
-          // subtext
-          label {
-            margin-top: -5px;
-            font-size: small;
-            color: var(--semanticFormsPlaceholderColor);
-          }
+        // subtext
+        label {
+          margin-top: -5px;
+          font-size: small;
+          color: var(--semanticFormsPlaceholderColor);
         }
       }
+    }
 
-      .checkboxes ul,
-      .radios ul {
-        margin-top: var(--semanticFormsInputTopMargin);
-      }
+    .checkboxes ul,
+    .radios ul {
+      margin-top: var(--semanticFormsInputTopMargin);
     }
-    // #endregion
   }
+  // #endregion
+}
 
 // #region tables