Merge pull request #2049 from cfpb/ans_tags_filter

Replace multiselect tags with filter tags

packages/cfpb-design-system/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, {

packages/cfpb-design-system/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);
-      }
-    }
-  }
 }

packages/cfpb-design-system/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);
     });
   });

packages/cfpb-design-system/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 {

test/cypress/e2e/packages/cfpb-forms.cy.js

@@ -70,15 +70,18 @@ describe('Multiselect', () => {
   it('should let the user remove a choice', () => {
     // Verify option1 is selected by default.
     cy.get(
-      '.o-multiselect__choices label[for=test_select__multiple-option1]',
+      '.o-multiselect .m-tag-group label[for=test_select__multiple-option1] svg',
     ).should('be.visible');
 
     // Verify option1 can be removed.
     cy.get(
-      '.o-multiselect__choices label[for=test_select__multiple-option1]',
-    ).click();
+      '.o-multiselect .m-tag-group label[for=test_select__multiple-option1] svg',
+    )
+      .parent()
+      .parent()
+      .click();
     cy.get(
-      '.o-multiselect__choices label[for=test_select__multiple-option1]',
+      '.o-multiselect .m-tag-group label[for=test_select__multiple-option1] svg',
     ).should('not.exist');
   });
 
@@ -89,7 +92,7 @@ describe('Multiselect', () => {
       '.a-live__code .o-multiselect__options li[data-option=option2] label',
     ).click();
     cy.get(
-      '.a-live__code .o-multiselect__choices label[for=test_select__multiple-option2]',
+      '.a-live__code .o-multiselect .m-tag-group label[for=test_select__multiple-option2] svg',
     ).should('be.visible');
   });
 });