@madgex/design-system 1.65.2 → 1.65.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "1.65.2",
+  "version": "1.65.3",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/accordion/accordion.js

@@ -59,11 +59,10 @@ const accordion = {
   },
   setAccordion: (accordionTrigger, accordionContent) => {
     const triggerContainer = accordionTrigger;
-    const accordionTriggerId = triggerContainer.id;
     const label = triggerContainer.querySelector('.mds-accordion-trigger__label');
     const labelText = label.innerText;
     const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
-    const triggerButton = accordion.createButton(accordionTriggerId, triggerContainer);
+    const triggerButton = accordion.createButton(triggerContainer);
     triggerContainer.classList.remove('mds-display-none');
     if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
       accordionContent.setAttribute('aria-label', labelText);
@@ -79,7 +78,7 @@ const accordion = {
       accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
     });
   },
-  createButton: (accordionTriggerId, element) => {
+  createButton: (element) => {
     const accordionTriggerSpan = element.querySelector(`.${accordionTriggerClass} > span`);
     const accordionTriggerButton = document.createElement('button');
     accordionTriggerButton.className = accordionTriggerButtonClass;
@@ -87,7 +86,6 @@ const accordion = {
     accordionTriggerButton.classList.add('mds-button');
     accordionTriggerButton.classList.add('mds-button--plain');
     accordionTriggerButton.classList.add('mds-padding-b0');
-    accordionTriggerButton.setAttribute('id', accordionTriggerId);
     accordionTriggerButton.setAttribute('aria-expanded', false);
     if (accordionTriggerSpan) {
       accordionTriggerButton.appendChild(accordionTriggerSpan);

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

@@ -44,7 +44,7 @@
     }) }}
     <div class="mds-form-element__fallback">
       {% if params.fallbackTo === 'select' and params.options %}
-        <select class="mds-form-control" id="select-{{ comboboxId }}" name="{{ comboboxName }}" aria-labelledby="{{ comboboxId }}-label" value="{{ params.defaultValue|default('') }}" {% if params.validationError %} aria-invalid="true" {% else %} aria-invalid="false" {% endif %} {% if not params.optional %} aria-required="true" {% endif %} >
+        <select class="mds-form-control" id="{{ comboboxId }}" name="{{ comboboxName }}" value="{{ params.defaultValue|default('') }}" {% if params.validationError %} aria-invalid="true" {% else %} aria-invalid="false" {% endif %} {% if not params.optional %} aria-required="true" {% endif %} >
           <option>{{ placeholder }}</option>
           {%- if params.options -%}
             {%- for value, option in params.options -%}

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

@@ -7,8 +7,10 @@ export default {
     connectedCallback() {
       // If the custom element has loaded, clear up any fallback elements that could cause ID clashes or weirdness in form submission
       const fallbackInput = this.parentElement.querySelector('input');
+      const fallbackSelect = this.parentElement.querySelector('select');
 
       if (fallbackInput) fallbackInput.remove();
+      if (fallbackSelect) fallbackSelect.removeAttribute('id');
     },
   },
 };

package/src/components/inputs/combobox/vue-components/Combobox.vue

@@ -15,7 +15,6 @@
       :id="comboboxid"
       :name="name"
       :placeholder="placeholder"
-      :aria-labelledby="labelId"
       :aria-owns="listBoxId"
       :aria-expanded="ariaExpanded"
       :activeDescendent="selectedOptionId"
@@ -23,7 +22,7 @@
       :isRequired="dataRequired"
       v-model="inputValue"
     />
-    <ListBox :id="listBoxId" :aria-labelledby="labelId" :hidden="listBoxHidden" :isLoading="isLoading">
+    <ListBox :id="listBoxId" :hidden="listBoxHidden" :isLoading="isLoading">
       <template>
         <ListBoxOption
           v-for="(option, index) in visibleOptions"
@@ -147,9 +146,6 @@ export default {
       }
       return this.options;
     },
-    labelId() {
-      return `${this.comboboxid}-label`;
-    },
     listBoxId() {
       return `${this.comboboxid}-listbox`;
     },

package/src/js/fractal-scripts/combobox.js

@@ -3,16 +3,17 @@ const elementName = 'mds-combobox';
 function bindToSelect() {
   const el = document.querySelector(`[data-combobox-id="distance-selection"]`);
   if (el) {
-    const selectInput = document.getElementById('select-distance-selection');
+    const selectInput = el.querySelector('select');
     const options = Array.from(selectInput.querySelectorAll('option'));
     const vueSelect = el.querySelector(elementName);
     vueSelect.options = options.slice(1).map((opt) => ({ value: opt.value, label: opt.textContent }));
-    vueSelect.addEventListener('select-option', (event) => {
-      const [option] = event.detail;
-      if (!option) return;
-      selectInput.value = option.value;
-      selectInput.querySelector(`option[value="${option.value}"]`).setAttribute('selected', true);
-    });
+    // not sure it's needed ?
+    // vueSelect.addEventListener('select-option', (event) => {
+    //   const [option] = event.detail;
+    //   if (!option) return;
+    //   selectInput.value = option.value;
+    //   selectInput.querySelector(`option[value="${option.value}"]`).setAttribute('selected', true);
+    // });
   }
 }
 

package/src/tokens/color.json

@@ -82,7 +82,7 @@
           "value" : "#549b24"
         },
         "darkest": {
-          "value" : "#45801d"
+          "value" : "#40791B"
         },
         "base": {
           "value" : "#5ba927"
@@ -99,7 +99,7 @@
           "value" : "#f4aa08"
         },
         "darkest": {
-          "value" : "#d99500"
+          "value" : "#946500"
         },
         "base": {
           "value" : "#ffb411"