@madgex/design-system 13.8.0 → 14.0.0

package/package.json

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

package/src/components/inputs/button-checkbox/button-checkbox.config.js

@@ -37,5 +37,17 @@ module.exports = {
         },
       },
     },
+    {
+      name: 'No Description',
+      context: {
+        name: 'no-description',
+        value: 'no-description',
+        i18n: {
+          title: 'No Description',
+          description: '',
+          price: '£7',
+        },
+      },
+    },
   ],
 };

package/src/components/inputs/button-checkbox/button-checkbox.scss

@@ -6,7 +6,7 @@
     cursor: pointer;
     border: #{$regular-border};
     border-radius: $border-radius;
-    justify-content: space-around;
+    justify-content: space-evenly;
     padding-left: ($constant-size-baseline * 4);
 
     & > * {
@@ -33,6 +33,7 @@
     width: 100px;
     max-width: 30%;
     white-space: nowrap;
+    margin-left: auto;
   }
 
   // Selected (checked) state

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

@@ -1,23 +1,34 @@
+# MdsCombobox
+
+This component provides autocomplete search functionality to select an option from a list of options.
+
+Options can be provided via the `options` parameter, or obtained from an API using the `apiUrl` parameter.
+
+`value` is an Object or Array of Objects representing the selected option or options.
+
 ## Parameters - Nunjucks
 
-- `id`: the id of your combobox
-- `name`: the name of the input for form submission. Uses ID unless specified - _optional_
-- `labelText`: the text used in the label
-- `options`: a JSON array, e.g `[{ label: 'Orange', value: 45 }]`. Populates both mds-combobox, and fallback select options
-- `apiUrl`: when populated, `options` is ignored and data is fetching from an API URL instead
-- `apiQueryKey`: the query paramter name added to `apiUrl` - _optional_ (defaults to 'searchText')
-- `apiOptionsPath`: where to grab an array of options on api response, e.g. `data.options` would be an array of options. _optional_ . leave undefined to use root api response as array
-- `optionLabelPath`: where to grab the visual label propertly from the option object e.g. 'label' or 'title' or 'nested.object.label' _optional_ (defaults to `label`)
-- `value`: a default selected value for the input - _optional_
-- `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input'
-- `placeholder`: the placeholder for your input (defaults to 'Please select')
-- `classes`: add extra classes to the trigger - _optional_
-- `helpText`: Helper text to display under the label _optional_,
-- `tooltipMessage`: Toggles a tooltip with this message to appear on the input _optional_
-- `validationError`: The error message provided by validation _optional_,
-- `state`: The current state of the input, currently the only allowed value is `error` _optional_
-- `type`: name of the options api e.g "location-lookup"
-- `i18n`: Text to translate/customise (object) **optional**
+- `id`: the id of your combobox **required**
+- `name`: the name of the input for form submission. Uses ID unless specified - **recommended**
+- `labelText`: the text used in the label **required**
+- `value`: the populated option `object` ( `{ label: 'Orange', value: 45 }`) or `array` of option `objects` ( `[{ label: 'Orange', value: 45 }, { label: 'Green', value: 33 }]`)
+- `searchText`: _Not_ the value, but the current text inside the search input.
+- `options`: an `array`, e.g `[{ label: 'Orange', value: 45 }]`. Populates both mds-combobox, and fallback select options
+- `apiUrl`: when populated, `options` is ignored and data is fetched from an API URL instead
+- `apiQueryKey`: the query parameter name added to `apiUrl` - (defaults to 'searchText')
+- `apiOptionsPath`: where to grab an array of options on api response, e.g. `data.options` would be an array of options. leave undefined to use root api response as array
+- `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**
+- `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
+- `tooltipMessage`: Toggles a tooltip with this message to appear on the input
+- `validationError`: The error message provided by validation
+- `state`: The current state of the input, currently the only allowed value is `error`
+- `type`: applied as data-type` attribute, the name of the options api e.g "location-lookup"
+- `i18n`: an `object`, Text to translate/customise
 - `minSearchCharacters`: The minimum number of characters inside the input before a search is performed to avoid low specificity searches. This should be matched by your implementation's search handler.
 
 ```
@@ -30,41 +41,158 @@ i18n: {
   resultsMessage: '{count} result available.', // announce number of results - note the use of `{count}` to get the number of results
   resultsMessage_plural: '{count} results available.', // announce number of results (plural) - note the use of `{count}` to get the number of results
   clearInput: 'clear input', // text for screen readers explaining what the clear control in combobox does
+  removePill: 'Remove {label}', // remove button aria label for pill, if using `multiple:true`
+  selectedOptionsLabel: 'Selected options:' // visually hidden text introducing the list of selected options, if using `multiple:true`
 }
 ```
 
-## Updating hidden input values
+## Usage
 
-When a user selects an option, any inputs passed inside MdsCombobox with the data attribute `data-key` will be populated with values from that chosen option.
+MdsCombobox usage revolves around either options provided by `params.options` or an API (`apiUrl` in use), and being in `multiple` mode via `params.multiple`.
+If `multiple` mode is true,`params.value` must be undefined or an `array`, otherwise undefined or an `object`.
 
-### Example 1
+The params `value`, `options`, `optionLabelPath` and `optionValuePath` are tightly coupled and must be compatible with each other:
 
-Populate the hidden input with the `value` property from the selected option `{label:"my label", value: 56}`.
+- `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`
+
+### 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.
 
 ```njk
-{\% call MdsCombobox({...}) \%}
-<input type="hidden" data-key="value" /> <!-- value will be 56 -->
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ]
+}) \%}
 {\% endcall \%}
+
 ```
 
-### Example 2
+#### with prefilled value
 
-Populate the hidden input with the `nested.thing` property from the selected option `{label:"my label", nested: {thing: 989 }, lat: "56.202", lon: '0.142'}`.
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  value: {value: 'value-2', label: 'my-label-2'},
+  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ]
+}) \%}
+{\% endcall \%}
+
+```
+
+### Example - Multiple mode - no API - default option object shape
 
 ```njk
-{\% call MdsCombobox({...}) \%}
-<input type="hidden" data-key="nested.thing" /> <!-- value will be 989 -->
-<input type="hidden" data-key="lat" /> <!-- value will be 56.202 -->
-<input type="hidden" data-key="lon" /> <!-- value will be 0.142 -->
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
+  multiple: true
+}) \%}
 {\% endcall \%}
+
+```
+
+#### with prefilled value
+
+Note the value should be an array when using multiple mode.
+
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  value: [{value: 'value-2', label: 'my-label-2'}],
+  options: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
+  multiple: true
+}) \%}
+{\% endcall \%}
+
+```
+
+### Example - Single mode - API usage - custom option object shape
+
+API response options have a custom shape with `word` and `score` properties,
+like so `[{word: 'something', score: 12},...]`. It also used `?keyword` for the query param on the request.
+
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  apiUrl: '/api/location-lookup',
+  apiQueryKey: 'keyword',
+  optionLabelPath: 'word',
+  optionValuePath: 'score'
+}) \%}
+{\% endcall \%}
+
+```
+
+#### with prefilled value
+
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  value: {word: 'my-label-2', score: 'value-2'},
+  apiUrl: '/api/location-lookup',
+  apiQueryKey: 'keyword',
+  optionLabelPath: 'word',
+  optionValuePath: 'score'
+}) \%}
+{\% endcall \%}
+
+```
+
+### Example - Multiple mode - API usage - default option object shape
+
+API response had a root object property called `data`, like so `{data:[{label: 'something', value: 12},...]}`.
+
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  apiUrl: '/api/location-lookup',
+  apiOptionsPath: 'data',
+  multiple: true
+}) \%}
+{\% endcall \%}
+
+```
+
+options:
+
+#### with prefilled value
+
+Note the value is an array for multiple mode.
+
+```njk
+{\% call MdsCombobox({
+  id:'my-id',
+  name: 'my-combo',
+  labelText:'My Combo',
+  value: [{label: 'my-label-1', value: 'value-1'},{label: 'my-label-2', value: 'value-2'} ],
+  apiUrl: '/api/location-lookup',
+  apiOptionsPath: 'data',
+  multiple: true
+}) \%}
+{\% endcall \%}
+
 ```
 
 ## Accessibility
 
 The Vue component is a [WAI-ARIA 1.0 combobox](https://www.w3.org/TR/wai-aria-practices/#combobox).
 
-NB. The AJAX demo above currently only works in browsers, not <= IE11. Fetch will be polyfilled or replaced in due course.
-
 When Javascript is not available, either a native combobox or native input will be available as a fallback.
 
 aria-describedBy has been added to notify screen reader users how to interact with the autocomplete suggestions.

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

@@ -55,57 +55,80 @@
     }) }}
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
     <mds-combobox
-      comboboxid="{{ comboboxId }}"
+      combobox-id="{{ comboboxId }}"
+      name="{{ comboboxName }}"
       placeholder="{{ params.placeholder }}"
       iconpath="{{ defaultIconPath }}"
-      {% if params.options.length %}options="{{params.options | dump}}"{% endif %}
+      {% if params.options and params.options.length %}options="{{params.options | dump }}"{% endif %}
       {% if params.apiUrl %}api-url="{{params.apiUrl}}"{% endif%}
       {% if params.apiQueryKey %}api-query-key="{{params.apiQueryKey}}"{% endif%}
       {% if params.apiOptionsPath %}api-options-path="{{params.apiOptionsPath}}"{% endif%}
       {% if params.optionLabelPath %}option-label-path="{{params.optionLabelPath}}"{% endif%}
+      {% if params.optionValuePath %}option-value-path="{{params.optionValuePath}}"{% endif%}
       i18n="{{ params.i18n | dump }}"
       data-aria-invalid="{{ params.validationError }}"
       {% if params.minSearchCharacters %}min-search-characters="{{ params.minSearchCharacters }}"{% endif %}
-      {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
-      {% if params.value %}value="{{ params.value }}"{% endif %}
+      {% if params.value %}value="{{ params.value | dump  }}"{% endif %}
+      {% if params.searchText %}search-text="{{ params.searchText }}"{% endif %}
+      {% if params.multiple %}multiple{% endif %}
       {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
       {{- MdsAttributes(params.attributes) -}}
       >
+      {# all 'default slot' fallback content is removed from DOM when vue component loads #}
         <div class="mds-form-element__fallback">
-          {% if params.fallbackTo === 'select' and params.options %}
+        {# matches Combobox Vue component #}
+        {% set _optionValuePath = params.optionValuePath or "value"  %}
+        {% set _optionLabelPath = params.optionLabelPath or "label"  %}
+        {# if no provided options, at least try to render select input with value's options #}
+        {% set _options = params.options or (params.multiple and params.value) %}
+
+          {% if params.fallbackTo === 'select' and _options %}
             <select
               class="mds-form-control"
               id="{{ comboboxId }}"
               name="{{ comboboxName }}"
-              value="{{ params.defaultValue|default('') }}"
+              {% if params.multiple %}multiple{% endif %}
               {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
             >
               <option>{{ placeholder }}</option>
-              {%- if params.options -%}
-                {%- for option in params.options -%}
-                  <option value="{{ option.value }}">{{ option.label }}</option>
+              {%- if _options -%}
+                {%- for option in _options -%}
+                  <option
+                    value="{{ option[_optionValuePath] }}"
+                    {% if not params.multiple and params.value %}
+                      {# not multiple mode, see if value  #}
+                      {% if params.value[_optionValuePath] === option[_optionValuePath] %}selected{% endif %}
+                    {% elseif params.value %}
+                      {# multiple mode, so we assume params.value is an array #}
+                      {% for valOpt in params.value %}
+                      {%if valOpt[_optionValuePath] === option[_optionValuePath] %} selected {% endif %}
+                      {% endfor %}
+                    {% endif %}
+                  >{{ option[_optionLabelPath] }}</option>
                 {%- endfor -%}
               {%- endif -%}
             </select>
-          {% elseif params.fallbackTo === 'input' %}
+            {# we cant have multiple mode and use input #}
+          {% elseif not params.multiple and params.fallbackTo === 'input' %}
             <input
               class="mds-form-control"
               type="text"
               name="{{ comboboxName }}"
               autocomplete="off"
               id="{{ comboboxId }}"
-              value="{{ params.value|default('') }}"
+              {% if params.value %} value="{{params.value[_optionValuePath]}}"{% endif %}
               placeholder="{{ placeholder }}"
               {% 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 %}
-          <span slot="target-inputs">
-             {{- caller() -}}
-          </span>
+          {{- caller() -}}
         {% endif %}
       </mds-combobox>
+      <br><br>
   </div>
 {%- endif -%}

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

@@ -23,31 +23,16 @@ module.exports = {
         classes: 'im-a-custom-class',
       },
     },
-
-    {
-      name: 'default',
-      context: {
-        variantTitle: 'Multi select',
-        name: 'multi',
-        id: 'multiselect',
-        optional: 'true',
-        labelText: 'How far are you willing to travel?',
-        options: optionsDistance,
-        fallbackTo: 'select',
-        multiple: true,
-        placeholder: 'eg. Within 5 miles',
-      },
-    },
     {
-      name: 'Clears hidden field(s)',
+      name: 'Search text pre-populated, option *not* selected',
       context: {
-        variantTitle: 'Clear hidden',
+        variantTitle: 'Search text pre-populated, option *not* selected',
         name: 'Salary',
         id: 'salary-selection',
         optional: 'true',
         labelText: 'Salary expectations?',
         options: optionsSalary,
-        value: 'Up to',
+        searchText: 'Up to',
         fallbackTo: 'select',
       },
     },
@@ -66,6 +51,7 @@ module.exports = {
         apiQueryKey: 's',
         apiOptionsPath: undefined,
         optionLabelPath: 'word',
+        optionValuePath: 'score',
         i18n: {
           requiredIcon: 'Required (test i18n)',
           loadingText: 'Loading  (test i18n)',
@@ -82,18 +68,18 @@ module.exports = {
       context: {
         useAutocomplete: true,
         variantTitle: 'AJAX autocomplete prefilled',
-        name: 'keywords',
+        name: 'keywords-prefilled',
         id: 'keywords-lookup-prefilled',
         labelText: 'Keywords:',
         placeholder: 'eg. Testimonials',
-        value: 'Initial Value',
-        vModel: 'Initial Value',
+        value: { word: 'Initial Value', score: 'the-value' },
         fallbackTo: 'input',
         minSearchCharacters: 3,
         apiUrl: 'https://api.datamuse.com/sug',
         apiQueryKey: 's',
         apiOptionsPath: undefined,
         optionLabelPath: 'word',
+        optionValuePath: 'score',
       },
     },
     {
@@ -101,14 +87,78 @@ module.exports = {
       context: {
         useAutocomplete: true,
         variantTitle: 'AJAX autocomplete prefilled with validation error',
-        name: 'keywords',
+        name: 'keywordsprefilled-error',
         id: 'keywords-lookup-prefilled-validation-error',
         labelText: 'Keywords:',
         placeholder: 'eg. Testimonials',
-        value: 'Initial Value',
-        vModel: 'Initial Value',
+        value: { word: 'Initial Value', score: 'the-value' },
         fallbackTo: 'input',
         validationError: 'There was an error',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
+        optionValuePath: 'score',
+      },
+    },
+    {
+      name: 'AJAX multiselect - multiple attr',
+      context: {
+        useAutocomplete: true,
+        variantTitle: 'AJAX multiselect',
+        name: 'keywords-multiple',
+        id: 'keywords-lookup-multiselect-preselected',
+        labelText: 'Keywords:',
+        placeholder: 'eg. Web developer',
+        fallbackTo: 'select',
+        minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
+        optionValuePath: 'score',
+        multiple: true,
+        i18n: {
+          requiredIcon: 'Required (test i18n)',
+          loadingText: 'Loading  (test i18n)',
+          describedByText:
+            'When autocomplete results are available, use up and down arrows to review and enter to select. (test i18n)',
+          resultsMessage: '{count} result available  (test i18n)',
+          resultsMessage_plural: '{count} results available  (test i18n)',
+          clearInput: 'clear input (test i18n)',
+        },
+      },
+    },
+    {
+      name: 'AJAX multiselect - prefilled',
+      context: {
+        useAutocomplete: true,
+        variantTitle: 'AJAX multiselect-prefilled',
+        name: 'keywords-multiple-prefilled',
+        id: 'keywords-lookup-multiselect-prefilled',
+        labelText: 'Keywords:',
+        placeholder: 'eg. Web developer',
+        value: [
+          { word: 'Initial Value 1', score: 'the-value-1' },
+          { word: 'Initial Value 2', score: 'the-value-2' },
+        ],
+        fallbackTo: 'select',
+        minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
+        optionValuePath: 'score',
+        multiple: true,
+        i18n: {
+          requiredIcon: 'Required (test i18n)',
+          loadingText: 'Loading  (test i18n)',
+          describedByText:
+            'When autocomplete results are available, use up and down arrows to review and enter to select. (test i18n)',
+          resultsMessage: '{count} result available  (test i18n)',
+          resultsMessage_plural: '{count} results available  (test i18n)',
+          clearInput: 'clear input (test i18n)',
+          selectedOptionsLabel: 'Selected options: (test i18n)',
+        },
       },
     },
   ],

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

@@ -1,7 +1,6 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
-{% if not multiple %}
-<div class="mds-grid-row">
+<form class="mds-grid-row">
   <div class="mds-grid-col-6">
     <h3>{{ variantTitle }}</h3>
 
@@ -12,6 +11,7 @@
       options: options,
       optional: optional,
       value: value,
+      searchText: searchText,
       fallbackTo: fallbackTo,
       classes: classes,
       placeholder: placeholder,
@@ -24,25 +24,11 @@
       apiQueryKey: apiQueryKey,
       apiOptionsPath: apiOptionsPath,
       optionLabelPath: optionLabelPath,
+      optionValuePath: optionValuePath,
+      multiple: multiple
       attributes: attributes
     }) %}
-      {# 
-        The below demonstrates how a target input value can be set on option selection, or on clear of combobox
-      #}
-      {% if id === 'salary-selection' %}
-        <input disabled data-key="value" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
-      {% endif %}
-      {% if id === 'keywords-lookup' or id === 'keywords-lookup-prefilled' %}
-        <input disabled data-key="word" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
-      {% endif %}
     {% endcall %}
-
-    {% if id === 'salary-selection' %}
-      <p class="mds-margin-top-b3">A hidden input is cleared when combobox is cleared.
-    {% endif %}
-
-    <br><br>
   </div>
-</div>
-{% endif %}
+</form>
 

package/src/components/inputs/combobox/combobox.scss

@@ -1,39 +1,29 @@
 .mds-combobox {
   display: block;
   position: relative;
-
-  /* .mds-combobox--multiple has checkbox inputs too, so we need to target type="text" only */
-  & input[type='text'] {
-    padding-right: $constant-size-baseline * 14;
-  }
-}
-.mds-combobox--multiple {
-  background-color: #fff;
-  @extend .mds-form-control;
-  padding: 0;
-  & input[type='text'] {
-    width: 100%;
-    border: 0;
-    padding: $constant-size-baseline * 3; // match .mds-form-control
-    font-size: inherit;
-    line-height: inherit;
-    padding-right: $constant-size-baseline * 14;
-    appearance: none;
-    &:focus {
-      outline: 0;
-    }
+  .mds-form-control {
+    display: flex;
+    flex-wrap: wrap;
+    cursor: text;
+    gap: $constant-size-baseline;
   }
 }
-.mds-combobox__input {
-  position: relative;
-}
-.mds-combobox__pills {
-  padding: $constant-size-baseline;
-  padding-bottom: 0;
+.mds-combobox__search-input {
+  flex: 1;
+  min-width: 180px;
+  border: 0;
+  outline: 0;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+  appearance: none;
+  padding-right: $constant-size-baseline * 10;
 }
+
 .mds-combobox__clear {
   position: absolute;
   top: 0;
+  bottom: 0;
   right: 0;
   cursor: pointer;
   &:focus {
@@ -88,3 +78,45 @@
     }
   }
 }
+.mds-combobox__pills {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: $constant-size-baseline;
+  margin-bottom: 0;
+}
+.mds-combobox__pill {
+  font-size: var(--mds-font-type-s-1-size);
+  display: inline-flex;
+  align-items: center;
+  border-radius: $border-radius;
+  padding: $constant-size-baseline ($constant-size-baseline * 2);
+  max-width: 100%;
+  background-color: $constant-color-neutral-lightest;
+}
+
+.mds-combobox__pill-text {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-combobox__pill-icon {
+  background: none;
+  border: none;
+  padding: 0 0 0 ($constant-size-baseline);
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  .mds-icon {
+    top: 0;
+  }
+
+  &:focus {
+    @include inputFocusStyle();
+    border-radius: $border-radius;
+  }
+}