@madgex/design-system 1.59.3 → 1.60.1

package/package.json

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

package/src/components/inputs/file-upload/file-upload.scss

@@ -62,7 +62,7 @@
   }
 }
 
-.js .mds-form-element--file-supported .mds-file-upload__prompt {
+.js .mds-form-element--file-supported.mds-file-upload__prompt {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -86,7 +86,7 @@
   @include z-index;
 }
 
-.js .mds-form-element--file-supported .mds-form-element--selected-file {
+.js .mds-form-element--file-supported.mds-form-element--selected-file {
   @include mq($from: $mds-size-breakpoint-md) {
     width: 50%;
   }
@@ -123,7 +123,7 @@
   }
 }
 
-.js .mds-form-element--file-supported .mds-form-element--dragover {
+.js .mds-form-element--file-supported.mds-form-element--dragover {
   & .mds-file-upload__input {
     background-color: $mds-color-neutral-white;
   }

package/src/components/inputs/multi-select/_template.njk

@@ -16,6 +16,8 @@
   {% endif %}
 {% endmacro %}
 
+{% set maxBorderlessSize = 7 %}
+
 <div class="mds-form-element mds-form-element--multiselect js-mds-multiselect{% if params.state %} mds-form-element--{{params.state}}{% endif %}" data-test="multiselect">
   <fieldset>
     {{ MdsInputLabel({
@@ -31,13 +33,14 @@
       helpText: params.helpText,
       validationError: params.validationError
     }) }}
-
-    <div class="mds-form-element__fallback mds-multiselect">
+    
+    {# This length check doesn't take into account the total including children since that was never required. If we need to do that down the line, we will need to rethink this #}
+    <div class="mds-form-element__fallback mds-multiselect{% if params.terms and params.terms.length < maxBorderlessSize %} mds-multiselect--borderless{% endif %}">
         {{ MdsMultiSelectCheckboxGroup(params.terms, params.name) }}
     </div>
   
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
-    <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}" iconpath="{{defaultIconPath}}"></mds-multiselect>
+    <mds-multiselect name="{{params.name}}" labeltext="{{ params.labelText }}" optional="{{params.optional}}" iconpath="{{defaultIconPath}}" maxborderlesssize="{{maxBorderlessSize}}"></mds-multiselect>
   </fieldset>
 </div>
 

package/src/components/inputs/multi-select/multi-select.config.js

@@ -147,5 +147,17 @@ module.exports = {
         ],
       },
     },
+    {
+      name: 'Less than 7 options',
+      context: {
+        name: 'Role',
+        terms: [
+          { id: 7, label: 'Academic Pharmacist', terms: [] },
+          { id: 1, label: 'Community Pharmacist', terms: [] },
+          { id: 10, label: 'Dispensing Assistant', terms: [] },
+          { id: 4, label: 'Hospital Pharmacist', selected: true, terms: [] },
+        ],
+      },
+    },
   ],
 };

package/src/components/inputs/multi-select/multi-select.scss

@@ -6,6 +6,14 @@
   overflow-y: auto;
   padding: $mds-size-baseline * 2;
 
+  &--borderless {
+    border-color: transparent;
+    min-height: 0;
+    max-height: initial;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   &__checkbox {
     margin-bottom: $mds-size-baseline;
     & input {

package/src/components/inputs/multi-select/vue-components/MultiSelect.vue

@@ -1,5 +1,10 @@
+<!--This length check doesn't take into account the total including children since that was never required. If we need to do that down the line, we will need to rethink this-->
 <template>
-  <div class="mds-multiselect" :data-multiselect-id="name">
+  <div
+    class="mds-multiselect"
+    :class="availableOptions.length < maxborderlesssize ? 'mds-multiselect--borderless' : ''"
+    :data-multiselect-id="name"
+  >
     <MultiSelectCheckboxGroup :name="name" :options="availableOptions" :testId="`${name}-group`" />
   </div>
 </template>
@@ -29,6 +34,10 @@ export default {
       type: String,
       default: '/assets/icons.svg',
     },
+    maxborderlesssize: {
+      type: Number,
+      required: true,
+    },
   },
   provide() {
     return {