@cfpb/cfpb-design-system 3.1.7 → 3.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "CFPB's UI framework",
   "main": "src/index.js",
   "author": {
@@ -19,6 +19,6 @@
   "bugs": {
     "url": "https://github.com/cfpb/design-system/issues"
   },
-  "gitHead": "415453147d44ab32977359f985c50a66799818c1",
+  "gitHead": "ce63bfcdecf687e9b96ab2420db225649b65db4b",
   "type": "module"
 }

package/src/components/cfpb-forms/multiselect.js

@@ -265,6 +265,7 @@ function Multiselect(element) {
 
     const selectionsItemLabelDom = create('button', selectionsItemDom, {
       type: 'button',
+      class: 'a-tag-filter',
       innerHTML:
         '<label for=' + optionId + '>' + option.text + closeIcon + '</label>',
     });
@@ -464,7 +465,7 @@ function Multiselect(element) {
 
     // Create all our markup but wait to manipulate the DOM just once
     _selectionsDom = create('ul', null, {
-      className: BASE_CLASS + '__choices',
+      className: 'm-tag-group',
     });
 
     _headerDom = create('header', _containerDom, {

package/src/components/cfpb-forms/multiselect.scss

@@ -148,80 +148,4 @@ select.o-multiselect {
       width: 100%;
     }
   }
-
-  &__choices {
-    padding-left: 0;
-
-    // The following is required to make side-by-side LI
-    // have a space between them.
-    margin-right: math.div(-10px, $base-font-size-px) + em;
-    margin-bottom: 0;
-
-    li {
-      display: inline-block;
-
-      // The following is required to make side-by-side LI
-      // have a space between them.
-      margin-right: math.div(10px, $base-font-size-px) + em;
-    }
-
-    li:last-child {
-      margin-bottom: math.div(10px, $base-font-size-px) + em;
-    }
-
-    button {
-      border: none;
-      background: none;
-      padding: 0;
-      text-align: left;
-
-      &:focus {
-        border-radius: math.div(3px, $size-v) + em;
-        outline: 1px dotted var(--teal);
-        outline-offset: 1px;
-
-        label {
-          background-color: var(--teal-20);
-        }
-      }
-
-      &:hover label {
-        background-color: var(--teal-40);
-      }
-
-      &:active label {
-        background-color: var(--teal-60);
-      }
-    }
-
-    label {
-      display: inline-block;
-      padding: 4px 10px;
-      padding-right: 25px;
-
-      background-color: var(--teal-20);
-      border-radius: math.div(3px, $size-v) + em;
-      border: 1px solid var(--teal);
-      color: var(--black);
-      cursor: pointer;
-      font-size: math.div(16px, $base-font-size-px) + em;
-      position: relative;
-
-      &:hover {
-        background-color: var(--teal-40);
-
-        &::after {
-          color: var(--white);
-        }
-      }
-
-      .cf-icon-svg {
-        position: absolute;
-        top: 4px;
-        right: 5px;
-        margin-left: 10px;
-        fill: var(--black);
-      }
-    }
-  }
 }

package/src/components/cfpb-forms/multiselect.spec.js

@@ -37,7 +37,9 @@ describe('Multiselect', () => {
       const option = document.querySelector('option');
       option.defaultSelected = true;
       multiselect.init();
-      const choices = document.querySelectorAll('.o-multiselect__choices li');
+      const choices = document.querySelectorAll(
+        '.o-multiselect .m-tag-group li',
+      );
 
       expect(choices.length).toBe(1);
       expect(choices[0].innerHTML).toContain('Debt collection');
@@ -52,7 +54,9 @@ describe('Multiselect', () => {
       expect(multiselect.getModel().isAtMaxSelections()).toBe(true);
 
       // renderTags
-      const choices = document.querySelectorAll('.o-multiselect__choices li');
+      const choices = document.querySelectorAll(
+        '.o-multiselect .m-tag-group li',
+      );
       expect(choices.length).toBe(0);
     });
   });

package/src/components/cfpb-forms/tag.scss

@@ -36,6 +36,12 @@
   .cf-icon-svg {
     pointer-events: none;
   }
+
+  // If the contents are wrapped in a label, negate the label's display.
+  > label {
+    display: contents;
+    pointer-events: none;
+  }
 }
 
 a.a-tag-filter {
@@ -54,6 +60,7 @@ a.a-tag-filter {
   display: flex;
   gap: math.div(5px, $btn-font-size) + rem;
 }
+
 @include u-jump-link(
   $jump-link-class: 'a-tag-topic',
   $jump-link-text-class: 'a-tag-topic__text',
@@ -140,6 +147,7 @@ a.a-tag-filter {
 html[lang='ar'] {
   .m-tag-group {
     direction: rtl;
+
     // This is needed for right-to-left (RTL) lists.
     padding-right: 0;
   }

package/src/components/cfpb-typography/mixins.scss

@@ -82,7 +82,6 @@
         outline: none;
 
         &::after {
-          position: absolute;
           content: '';
           display: block;
           position: absolute;