@madgex/design-system 14.0.0 → 14.0.2

package/dist/assets/icons.json

@@ -1 +1 @@
-[{"name":"add"},{"name":"arrow-left"},{"name":"arrow-right"},{"name":"calendar"},{"name":"asterisk"},{"name":"cart"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-up"},{"name":"chevron-right"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"remove"},{"name":"search"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"}]
+[{"name":"add"},{"name":"arrow-left"},{"name":"arrow-right"},{"name":"asterisk"},{"name":"calendar"},{"name":"cart"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"redo"},{"name":"remove"},{"name":"search"},{"name":"settings"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"triangle-down"},{"name":"triangle-right"},{"name":"triangle-up"},{"name":"undo"},{"name":"upload"},{"name":"user"}]

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "14.0.0",
+  "version": "14.0.2",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/inputs/combobox/README.md

@@ -20,7 +20,7 @@ Options can be provided via the `options` parameter, or obtained from an API usi
 - `optionLabelPath`: where to grab the visual label from the option object e.g. 'label' or 'title' or 'nested.object.label' (defaults to `label`)
 - `optionValuePath`: where to grab the value from the option object e.g. `value` or `nested.object.value` (defaults to `value`)
 - `multiple`: Boolean, whether to treat `value` input and output as an Array, or a singular. Also to display pills. default `false`
-- `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input' **recommended**
+- `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input' **recommended** (see notes underneath)
 - `placeholder`: the placeholder for your input (defaults to 'Please select') **recommended**
 - `classes`: add extra classes to the trigger
 - `helpText`: Helper text to display under the label
@@ -56,6 +56,16 @@ The params `value`, `options`, `optionLabelPath` and `optionValuePath` are tight
 - `options`: an array of objects, each object has the property stated by `optionLabelPath` and `optionValuePath`
 - `value`: an object ( or array of objects if `multiple:true`), object is the same shape as the ones in `options`, each object has the property stated by `optionLabelPath` and `optionValuePath`
 
+## Fallback
+
+When JavaScript is unavailable, the combobox will gracefully degrade to a native form element. Use the `fallbackTo` parameter to specify which fallback element to use: either a native `select` dropdown or a text `input`.
+
+Both fallback elements share the same `id` as the combobox to ensure the label remains properly associated. However, the fallback's `name` attribute will be `[name]_fallback` to distinguish it from the JavaScript-enabled version. This allows your server-side code to detect when the fallback was used and handle the form submission appropriately.
+
+**Choosing a fallback type:**
+- Use `fallbackTo: 'select'` when you have a static, predefined list of options that work well in a standard dropdown.
+- Use `fallbackTo: 'input'` when options are dynamic (from an API) or when you prefer a text input. With a text input fallback, users can type and submit values that your server can then process (e.g., look up a location ID from a location name).
+
 ### Example - Single mode - no API - default option object shape
 
 As our options object uses the default property names, we don't need to specify them.

package/src/components/inputs/combobox/_template.njk

@@ -1,25 +1,9 @@
-{% from "../label/_macro.njk" import MdsInputLabel %}
-{% from "../_message/_macro.njk" import MdsInputMessages %}
-{% from "../../../sub-components/attributes/macro.njk" import MdsAttributes %}
+{%- from "../label/_macro.njk" import MdsInputLabel -%}
+{%- from "../_message/_macro.njk" import MdsInputMessages -%}
+{%- from "../../../sub-components/attributes/macro.njk" import MdsAttributes -%}
 
-{%- set comboboxId %}
-{%- if params.id -%}
-  {{ params.id }}
-{%- else -%}
-  {#
-      if the id is missing it will be constructed using:
-      [component name]-[item labelText]-[index]
-      e.g. period-next-week-2
-    #}
-{%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}{%- else -%}{{ params.labelText | lower | trim | replace(' ', '-') }}{%- endif -%}
-{%- endif -%}
-{% endset -%}
-
-{% if params.name %}
-  {% set comboboxName = params.name %}
-{% else %}
-  {% set comboboxName = comboboxId %}
-{% endif %}
+{%- set comboboxId = params.id if params.id else params.name -%}
+{%- set comboboxName = params.name if params.name else params.id -%}
 
 {%- set labelId %}{{comboboxId}}-label{% endset -%}
 
@@ -86,7 +70,7 @@
             <select
               class="mds-form-control"
               id="{{ comboboxId }}"
-              name="{{ comboboxName }}"
+              name="{{ comboboxName }}_fallback"
               {% if params.multiple %}multiple{% endif %}
               {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
             >
@@ -109,11 +93,11 @@
               {%- endif -%}
             </select>
             {# we cant have multiple mode and use input #}
-          {% elseif not params.multiple and params.fallbackTo === 'input' %}
+          {% elseif params.fallbackTo === 'input' %}
             <input
               class="mds-form-control"
               type="text"
-              name="{{ comboboxName }}"
+              name="{{ comboboxName }}_fallback"
               autocomplete="off"
               id="{{ comboboxId }}"
               {% if params.value %} value="{{params.value[_optionValuePath]}}"{% endif %}
@@ -121,14 +105,11 @@
               {% if params.validationError %}aria-invalid="true"{% endif %}
               {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
               />
-          {% elseif params.multiple and params.fallbackTo === 'input' %}
-          <strong>YOU MUST USE `select` AS `fallbackTo` WHEN USING `multiple` MODE</strong>
           {% endif %}
         </div>
         {% if caller %}
           {{- caller() -}}
         {% endif %}
       </mds-combobox>
-      <br><br>
   </div>
 {%- endif -%}

package/src/components/inputs/combobox/combobox.config.js

@@ -109,7 +109,7 @@ module.exports = {
         id: 'keywords-lookup-multiselect-preselected',
         labelText: 'Keywords:',
         placeholder: 'eg. Web developer',
-        fallbackTo: 'select',
+        fallbackTo: 'input',
         minSearchCharacters: 3,
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',

package/src/components/inputs/combobox/combobox.njk

@@ -1,7 +1,7 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
 <form class="mds-grid-row">
-  <div class="mds-grid-col-6">
+  <div class="mds-grid-col-6 mds-margin-bottom-b10">
     <h3>{{ variantTitle }}</h3>
 
     {% call MdsCombobox({
@@ -25,7 +25,7 @@
       apiOptionsPath: apiOptionsPath,
       optionLabelPath: optionLabelPath,
       optionValuePath: optionValuePath,
-      multiple: multiple
+      multiple: multiple,
       attributes: attributes
     }) %}
     {% endcall %}